React-native: Regression: Cannot connect to packager via IP or physical ios devices

[FrikkieSnyman]

💥 Regression Report

Upgraded to RN 0.59.0, and tried to run my app on ios. When I tried to enable remote debugging, I got an error saying that the connection to http://localhost:8081/debugger-proxy?role=client timed out.

I followed the troubleshooting here: http://facebook.github.io/react-native/docs/running-on-device.html#troubleshooting, and confirmed that my local machine's IP address is being detected correctly.

I then tried opening the debugger-ui on chrome by navigating to my local ip (ie 10.27.79.224:8081/debugger-ui) and it failed to connect. This definitely worked in RN 0.57 (from which I upgraded). Testing on RN 0.58.6, this also works.

Last working version

Worked up to version: 0.58.6

Stopped working in version: 0.59.0

To Reproduce

Install React Native version 0.59.0. Run npm start to start the packager. Obtain the local machine's IP, and then navigate to the obtained IP:8081/debugger-ui. Connection should be refused, and debugging on a physical ios device is not possible.

Expected Behavior

I expect to be able to debug remotely from a physical ios device.

Code Example

n/a

Environment

  React Native Environment Info:
    System:
      OS: macOS 10.14.3
      CPU: x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
      Memory: 432.55 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 8.15.0 - ~/.nvm/versions/node/v8.15.0/bin/node
      Yarn: 1.13.0 - ~/.nvm/versions/node/v8.15.0/bin/yarn
      npm: 6.4.1 - ~/.nvm/versions/node/v8.15.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        Build Tools: 23.0.1, 27.0.3, 28.0.3
        API Levels: 23, 26, 27, 28
    IDEs:
      Android Studio: 3.3 AI-182.5107.16.33.5199772
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      @types/react: 16.3.14 => 16.3.14 
      @types/react-native: 0.57.11 => 0.57.11 
      react: 16.8.4 => 16.8.4 
      react-native: 0.59.0 => 0.59.0 
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

[ArdenDigital]

Experiencing this on Android as well. Attempted to debug with my 192.168.x.x and 8081 port. Experiencing "Could not connect to development server." on both a fresh react-native init project along with a project upgraded from 0.58.6.

React Native Environment Info:
System:
OS: Linux 5.0 Arch Linux undefined
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Memory: 2.14 GB / 15.39 GB
Shell: 5.7.1 - /usr/bin/zsh
Binaries:
Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
Yarn: 1.13.0 - ~/.nvm/versions/node/v10.15.3/bin/yarn
npm: 6.9.0 - ~/.nvm/versions/node/v10.15.3/bin/npm
Watchman: 4.9.0 - /usr/bin/watchman
SDKs:
Android SDK:
API Levels: 22, 23, 24, 25, 26, 27, 28
Build Tools: 27.0.3, 28.0.0, 28.0.2, 28.0.3
System Images: android-22 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom, android-24 | Google APIs Intel x86 Atom, android-25 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-26 | Google Play Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
IDEs:
Android Studio: 3.3
npmPackages:
react: 16.8.3 => 16.8.3
react-native: 0.59.1 => 0.59.1
npmGlobalPackages:
react-native-cli: 2.0.1

[viktorlarsson]

Experiencing the same issue here.

React Native Environment Info:
    System:
      OS: macOS 10.14.3
      CPU: (4) x64 Intel(R) Core(TM) i5-5350U CPU @ 1.80GHz
      Memory: 202.59 MB / 8.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.10.0 - /usr/local/bin/node
      Yarn: 1.12.3 - /usr/local/bin/yarn
      npm: 5.6.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 26, 27, 28
        Build Tools: 26.0.3, 27.0.3, 28.0.2, 28.0.3
        System Images: android-27 | Intel x86 Atom_64
    IDEs:
      Android Studio: 3.3 AI-182.5107.16.33.5314842
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3 
      react-native: 0.59.1 => 0.59.1 
    npmGlobalPackages:
      react-native-git-upgrade: 0.2.7

[Zeldroxe]

You just need to add a new line with your device ip into android/app/src/debug/res/xml/react_native_config.xml

Like this :
``xml <?xml version="1.0" encoding="utf-8"?> <network-security-config> <domain-config cleartextTrafficPermitted="true"> <domain includeSubdomains="false">localhost</domain> <domain includeSubdomains="false">10.0.2.2</domain> <domain includeSubdomains="false">10.0.3.2</domain> <domain includeSubdomains="false">192.168.1.38</domain> </domain-config> </network-security-config>

[grabbou]

Closing since it's not an issue.

We need to update documentation here: https://facebook.github.io/react-native/docs/running-on-device#docsNav with the steps on how to troubleshoot this issue if it happens (and it will happen, since it's super common to run on a different IP).

[grabbou]

Would be awesome if anyone of you would like to send a PR - I would be more than happy to help :)

[FrikkieSnyman]

Hi @grabbou

Thanks for getting back on this. For interests sake, did you try to reproduce this issue?

I do believe it's an issue and was unrightfully closed. This is functionality that works perfectly fine on 0.58.6 but doesn't on 0.59.0 without any changes in my set up.

So I don't think this is due to running on different IP ranges, plainly because it works fine when running on a previous version of RN.

Also as stated in the OP, in RN 0.59 you can not even navigate to the debugger-ui using the machine hosting the packager using its IP, but you can in RN 0.58.6.

[grabbou]

Oh snap! I’ve read this was Android issue (which we have fixed yesterday locally by updating the XML as suggested).

I have no problems running iOS on a device - but going to double check.

[FrikkieSnyman]

Thanks! I did also double check on my side this morning before I replied! Let me know what you find

[gabrielperales]

@FrikkieSnyman @grabbou I'm also having this issue, I thing it is related to the metro bundler. I've seen that after updating my project to RN 0.59 there is a new file metro.config.js and maybe it is related because you can configure some aspects of the metro bundler server like port and other stuff.

[FrikkieSnyman]

@grabbou I got this working by adding --host `ipconfig getifaddr en0` to my start script.

I didn't have time to figure out why this used to work prior to 0.59, but it seems that it is probably related with react-native-cli. The folks over there are also not too sure what the purpose of the host flag is: https://github.com/react-native-community/react-native-cli/issues/195

[Lepozepo]

I'm running into the same issue. I can consistently reproduce this issue if I create a new project via react-native init, open the xcode project, set up signing, run the project on an iOS device, shake the device, and enable the debugger. If you don't enable the debugger, you will not have any issues running the project. If I use a version under 0.59 I don't have any issues connecting to the debugger. I tried adding the --host line to my start script but I'm still having issues. @grabbou what else can we do to help patch this up?

[mstllc]

I've also tried everything suggested here and elsewhere but am unable to get any iOS/Android simulator/emulator/device to connect to the remote debugger. As mentioned above, I'm running everything on the same machine. When I chose Debug JS Remotely from the debug menu, it opens my browser to http://localhost:8081/debugger-ui/ but it just says Cannot GET /debugger-ui/ and the device has the red screen with text Unable to connect with remote debugger. Timeout while connecting to remote debugger.

Setup a clean project with 0.58.6 and everything works just as expected. I started this project with 0.59.0 and I'm now upgraded to 0.59.2 with the issue still persisting. Everything else seems to be working just fine, it's only when trying to connect to the remote debugger. I need to log some datas!

Thanks for taking a look, let me know if i can provide more info.

[Iamstanlee]

any fix for this, same issue here @Zeldroxe solution doe not seem to work

[ScreamZ]

I just fixed the issue on Android using this seems related to android 9.

https://stackoverflow.com/posts/50834600/revisions

A little android:usesCleartextTraffic="true" did the trick on <application tag.

[mstllc]

@ScreamZ doesn't seem to do anything on my end. Unless the debug settings aren't taking effect, that cleartext traffic flag is set in app/src/debug/react_native_config.xml already, so you shouldn't need to add it to the application tag again.

It's so odd, I have asked a few others who are into 0.59.x and they aren't having the same issue... The fact that it doesn't work for me on iOS and Android, and it _does_ work for others, makes it feel like something else on my system is different. Possible I have some other network process running on a required port or just some other system level network setting?

[mstllc]

I found a few new data points worth sharing, but still not 100% sure what to do or how to resolve the issue. The first thing I realized is that I didn't have watchman installed on this computer at all? I thought it was a requirement for react-native but I guess not, I've been working on this app for 3 weeks with no issues besides not being able to connect to the remote debugger. So I installed watchman, cleared caches and node_modules, reinstalled and still have the issue.

I updated my react-native version to 0.59.3 and still have the issue. Finally I created a brand new project using react-native init and _that_ project works just fine with connecting to the remote debugger. Again, upgrading the _existing_ project didn't fix the issue in that project, and I didn't see anything in the changelog regarding this issue, so I'm a leaning more towards it being something related to not having watchman installed when I created this project initially, while the new project was created after watchman was installed and it is functioning properly. Does react-native init do something differently depending on if you have watchman installed or not?

So idk, I think my issue is maybe different from others and I feel like I'm going to need to try to port my code into the newly created project if I want debugger support (I do). Not sure what else to try!

[grabbou]

Thanks for providing comments and reproductions here. Let's make sure that this gets fixed in 0.59 / 0.60. I am going to put a todo on this issue and be back to it this week to see what's going on.

[cpojer]

This issue has been moved to react-native-community/react-native-cli#324.