Reputation: 5309

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.

Upvotes: 73

Answers (30)

niranjan powade

Reputation: 21

Check if only one remote debugger is running in your browser if there are more than the error will occur

Upvotes: 0

TheLegend27

Reputation: 762

I struggled with the same error when wanted to use React Native Debugger with physical device. The solution for me:

Set a static IP for you Mac under settings -> network -> advanced -> TCP/IP -> manually and set it to like 192.168.1.85 or whatever you like
Shake you device to open developer menu
Configure bundler
Set the ip the same as you set in step 1, rest of the options can be left default if you haven't changed the port or something.
under developer menu select start Debugging remotely.

Oh and to get rid of the error in the first place, delete the app from device and reinstall it.

Upvotes: 0

Honcharov Anton

Reputation: 242

Relaunch Xcode and remove the app from device. After, build app again.

This is what's helped in my case.

Upvotes: 0

Avinash Aryan

Reputation: 91

in my case i was testing ion simulator

open setting in simulator
open developer setting
Allow any domain turned on and it started working

Upvotes: 0

Pato Mc Allister

Reputation: 31

Update 2022:

I was trying to run in a physical device.

I deleted podfile.lock and run pod deintegrate.
Deleted the app from physical and simulator device.
Checked if my phone and computer were on the same wifi.
Check in XCode if you are running in debug or release mode.

Then everything worked well.

Upvotes: 0

Cody Moniz

Reputation: 5065

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

Upvotes: 0

Kylan Hurt

Reputation: 23

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.

Upvotes: 0

jzyf

Reputation: 1

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

Upvotes: 0

chengsam

Reputation: 7405

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.

Upvotes: 12

jsonmullings

Reputation: 23

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.

Upvotes: 0

chenop

Reputation: 5143

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

Upvotes: 1

Haktan Enes Biçer

Reputation: 682

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

Upvotes: 0

barca_d

Reputation: 1050

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.

Upvotes: 0

Jonas Sourlier

Reputation: 14435

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.

Upvotes: 1

Zizi

Reputation: 104

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!

Upvotes: 3

Walter Monecke

Reputation: 2558

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

Upvotes: 1

Roni Litman

Reputation: 1001

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.

Upvotes: 8

Selçuk İtmiş

Reputation: 9

#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

Upvotes: 0

BigPurple

Reputation: 61

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

Upvotes: 2

Tuan Nguyen

Reputation: 2607

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

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

Upvotes: 0

alphacat2018

Reputation: 308

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>

Upvotes: 1

Stanislau Buzunko

Reputation: 1831

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.

Upvotes: 4

Kuldeep Saxena

Reputation: 2003

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

Upvotes: 43

Bhagwat K

Reputation: 3142

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.

Upvotes: 0

Tracey

Reputation: 96

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

Upvotes: 2

rii

Reputation: 1648

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.

Upvotes: 0

merry_ejik

Reputation: 521

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

Upvotes: 5

phongyewtong

Reputation: 5309

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.

Upvotes: 30

fozzarelo

Reputation: 589

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.

Upvotes: 32

XML

Reputation: 19498

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.

Upvotes: 12

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

Answers (30)

Related Questions