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

💥 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

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 3
Comments: 18 (5 by maintainers)

Most upvoted comments

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 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>`

Zeldroxe on Mar 19, 2019

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.

grabbou on Apr 16, 2019

@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

FrikkieSnyman on Mar 25, 2019

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.

FrikkieSnyman on Mar 20, 2019

@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 on Apr 3, 2019

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.

ScreamZ on Apr 2, 2019

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.

grabbou on Mar 20, 2019

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® Core™ 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

dantekelly on Mar 18, 2019