'React-Native Error: Connection to http://localhost:8081/debugger-proxy?role=client timed out

I run react-native run-ios command and my app show for 3 secs before showing this. I am running on ios simulator

ExceptionsManager.js:76 Connection to http://localhost:8081/debugger-proxy?role=client timed out. Are you running node proxy? If you are running on the device, check if you have the right IP address in RCTWebSocketExecutor.m.

react-native

Solution 1:^[1]

I somehow managed to make it work without creating a new project by deleting the project app in the simulator on the iOS home screen. It works fine now.

Solution 2:^[2]

For remote debugging, Your both devices must be connected to the same wifi ( network ).

Solution 3:^[3]

I get this issue often. Usually when I'm developing with the remote debugger on and I save codebreaking kind of error.

Try to reload... If that doesn't fix it: crlt + cmd + z. then stop remote debugging, then refresh. That will fix it but now you lost your debugger. So go again... crlt + cmd + z. this time start remote debugging, then refresh again. Your project should be back and good to go.

This works for me, but it's super annoying and time-consuming. I wish someone had a better way.

Solution 4:^[4]

This seemingly was happening to me because I had restarted the react-native packager while I still had a Chrome debugger open which was attached to the previous packager/emulator instance.

Killing that debugger Chrome tab and trying run-ios again seemed to solve it, without any restarts or other skulduggery.

Solution 5:^[5]

Update for iOS 14:

(image from https://www.iphonetricks.org/ios-14-local-network-privacy-feature/)

On iOS 14, when you launch your app on first time, iOS will ask for your permission to scan local network. You need to allow otherwise the app will not be able to connect to remote debugger on your Mac.

Solution 6:^[6]

For me this happened when I was try to debug a real device. Issue was that my computer and my real device were not on the same WiFi.

Solution 7:^[7]

Problem can be with your router. Try connect to wifi through iPhone hotspot.

On github I found workaround, how to set DNS to solving this error on your mac and iPhone:

On you dev machine, System Preference -> Network -> Wi-Fi -> adcanced -> nameOfYourNetwork
In the DNS tab change the ip to 8.8.8.8
Make the same DNS change on your iPhone

Solution 8:^[8]

I had this error when I forgot to switch back to using index file instead of jsbundle after release build.

I had

jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

Instead of

jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

Switched to index file and built again and it worked.

Solution 9:^[9]

For me this works:

Stop remote js debugging.
Close remote js debugger page on brower.
Run React Native Debugger.
Press ctrl+t and type React Native pakager port and confirm.
On simulator press ctrl+M and active remote js debugging.

and good to go!

Solution 10:^[10]

In my case, I was on a different network than the phone. No SIM Card required, I only needed to make sure I was on the same network (we have work and guest networks here). There are some notes in the documentation for RN that you can checkout (mid-way down there is a pink box with the proxy issue we have all faced):

http://facebook.github.io/react-native/docs/running-on-device.html

Solution 11:^[11]

I fixed adding a script in "bundle react native code and images" build phases tab main target. I simply added export DISABLE_XIP=NOTHANKS

The problem was that real device was trying to connect to my ip under xip.io domain

I think this script it is necessary when we are going to add custom images assets in the xCode project, but you can check the url of the ip is wrong in Report navigator tab.

My setup react: 16.3.1, react-native-cli: 2.0.1 react-native: 0.55.4 xCode 9.4.1

Here the original react native docs about xip.io (Troubleshooting chapter) https://facebook.github.io/react-native/docs/running-on-device

Here the possibility for disable XIP. https://github.com/facebook/metro/commit/079dcaed990abb6754c03113362e4f537cd32a24

Here the hint that I found for trying this solution https://github.com/facebook/react-native/issues/12786

Solution 12:^[12]

I tried a lot and finally fixed it by adding NSAllowsArbitraryLoads to info.plist.

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

Solution 13:^[13]

This happened to me because I was connecting via a WiFi network that had a captive portal (aka a pop up window that required you to fill some info before connecting to the internet).

Please make sure you are connecting via a WiFi Network that has no captive portal. Even your personal hotspot on your phone will do the trick!

Here is the reference I never read and cost me some hours:

If you have any issues, ensure that your Mac and device are on the same network and can reach each other. Many open wireless networks with captive portals are configured to prevent devices from reaching other devices on the network. You may use your device's Personal Hotspot feature in this case.

https://facebook.github.io/react-native/docs/running-on-device#troubleshooting

Solution 14:^[14]

If you get:

Another Debugger is already connected

It might sound silly, but don't forget to check for Chrome windows in the background, which could be the "another debugger".

When you tap on "Start JS Debugging", React Native opens a new Chrome window with the debugger. If you have multiple Chrome windows (not tabs) open on Mac OS X, you don't see any visual indication that there is more than one window, so you might be looking at the foreground window with "Another debugger is already connected" and don't realize that the other debugger is a Chrome window in the background.

Solution 15:^[15]

Delete app from Simulator or real device and rebuild project. This worked for me.

Solution 16:^[16]

This was happening to me as well. I somehow fixed it with a reboot... go figure. I am guessing Metro Bundler was not able to launch due to port 8081 already been taken by another process. After a reboot I ran react-native run-ios again and this time the simulator launched properly without the error.

Mind you, this was happening to me in a brand new project.

Solution 17:^[17]

I was facing the same issue for iOS.

Below tricks worked for me:

Open project in Xcode.
Go to Product-> Scheme-> EditScheme-> Run.
Envirionment variable Click + Sign.
Add flag OS_ACTIVITY_MODE with value disable.
Run your app from Xcode (Before this close packager.)

Hope this will help someone.

Solution 18:^[18]

I got same error although it's same to network.

Remove the app from your device and build it again. Will work.

Solution 19:^[19]

#if DEBUG
jsCodeLocation = [NSURL URLWithString:@"http://192.168.11.21:8081/index.bundle?platform=ios&dev=true"];
#else
#warning "PRODUCTION DEVICE"
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#endif

You can find your ip address from this link https://kb.wisc.edu/page.php?id=6526

Solution 20:^[20]

For me, none of the above solutions seemed to work. I tried killing the connection, reloading the bundle, stopping and running npm start again without success. What worked for me eventually was clearing the npm cache before starting it again:

npm start --clear-cache

After this, I reloaded the bundle and the debugger was properly attached.

Solution 21:^[21]

Working on mac.
I solved it by enable "Internet Sharing".
- Go to Settings --> Sharing
- Share you connection from "USB 10/100/1000 LAN"
- To computer using: "Wi-fi"
- check "Internet Sharing" --> create your network
- in your iPhone connect to the new network
- Reload metro and xcode

Solution 22:^[22]

This was happening to me, I'm developing with my actual phone for the simulator. I had to shake my actual phone and pressed the Remote Debugging option, this loaded a new http://localhost:19001/debugger-ui/ page in my browser with an active debugger.

Solution 23:^[23]

open your /etc/hosts
check does them exist

127.0.0.1 localhost
::1       localhost

if not, add them and then yarn ios again. if them exist, sorry, there is nothing I can do

Solution 24:^[24]

Just wanted to mention that when you install a new app on iOS via RN, your device will ask you something about connecting with devices on WiFi, etc. I must have clicked the wrong thing and was stuck in that state. Deleting the app off of my device then re-installing (via RN) brought that dialog up where I could accept it.

Solution 25:^[25]

I commented all lines in my /private/etc/hosts to solve some VPN issues, but it seems like for the IOS react-native debugger to attach you need these host entries:

127.0.0.1 localhost
255.255.255.255 broadcasthost
::1             localhost

Solution 26:^[26]

In my case, my IP address was changed and I was pointing to the old IP address from my iphone.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	jarora
Solution 2
Solution 3	fozzarelo
Solution 4	XML
Solution 5	chengsam
Solution 6	Roni Litman
Solution 7	merry_ejik
Solution 8
Solution 9	Olcay ErtaÅŸ
Solution 10	Tracey
Solution 11
Solution 12	alphacat2018
Solution 13	Walter Monecke
Solution 14	Olcay ErtaÅŸ
Solution 15	Haktan Enes Biçer
Solution 16	rii
Solution 17	Bhagwat K
Solution 18	Tuan Nguyen
Solution 19	Selçuk ?tmi?
Solution 20	barca_d
Solution 21	chenop
Solution 22	jsonmullings
Solution 23	jzyf
Solution 24	Kylan Hurt
Solution 25	Cody Moniz
Solution 26	jas-chu

'React-Native Error: Connection to http://localhost:8081/debugger-proxy?role=client timed out

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]

Solution 14:[14]

Solution 15:[15]

Solution 16:[16]

Solution 17:[17]

Solution 18:[18]

Solution 19:[19]

Solution 20:[20]

Solution 21:[21]

Solution 22:[22]

Solution 23:[23]

Solution 24:[24]

Solution 25:[25]

Solution 26:[26]