Error in React Native when connected to Chrome debugger

[satya164]

When the app is connected to chrome debugger, it shows the following error message,

I don't see the @@INIT action, so I assume it's unable to connect.

It works fine if not connected to the debugger. For now I detect if the app is running in a web worker instance and disable the dev tools.

const middlewares = [ applyMiddleware(thunk) ];

if (typeof global.self === 'undefined') {
    middlewares.push(devTools());
}

const finalCreateStore = compose(
    ...middlewares
)(createStore);

[satya164]

Might be related facebook/react-native#4470

[zalmoxisus]

That's strange. I've just checked my example with having Chrome debugger on, and it works. We even have now a docker for Chrome debugger page. Could you please try my example? If the problem persits, please try to use localhost as indicated here to see if the problem is related to the remote server.

[satya164]

@zalmoxisus Will do. BTW I tried on actual device (Android) rather than emulator if it makes a difference.

[zalmoxisus]

Oh, then that could be the problem. It wouldn't work with localhost either.

[zalmoxisus]

@satya164, just checked on HTC One with Android 5.0.1, it has no problems with having Chrome debugger on. Maybe yo use an older version of React Native? Or maybe there's a local network issue? If so, I think we can use a workaround with long polling instead of sockets.

[satya164]

Can't be a network issue as I'm connected through USB. I'm on Android 6.0. Can you provide any tips on how to debug the issue?

[zalmoxisus]

No, it doesn't communicate via USB if you didn't configure you phone to use the laptop internet. Maybe your phone's wifi is just turned off?

It turns out that it cannot connect to remotedev.io, which we use for socket communications. You can of course use it via lan as we implemented in #1, but it's way difficult to expose localhost, and I don't think it will make any difference in this case.

UPD: Sorry, I forgot that it's the case only when turning the debugger on.

[satya164]

Which port does it communicate through? May be I can run adb reverse so that it communicates via USB?

[zalmoxisus]

On port 80.

You can use adb reverse in the scenario described in #1. So you start the local server let's say on port 3000 and specify it in your script. Then by running adb reverse tcp:3000 tcp:3000, the phone should use localhost:3000.

It will not display anything in the monitor app by default, but at least can test if the issue is with socket communications.

[satya164]

@zalmoxisus Will try and report back. Thanks.

[zalmoxisus]

Hey @satya164,

Just released 0.1.0, which allows to connect via a local server using remotedev-server. Could you please give it a try when have some time. Use the instruction from here and from remotedev-server.

If that will not help, we'll try long polling.

[satya164]

Hey, thanks. I'll try soon.

[ssomnoremac]

Any progress on this? It's not easy to get this working on a device connected via USB. I usually run adb reverse tcp:8081 tcp:8081 when I connect up but I've tried a few different things mentioned here without success. Genymotion worked right away.

[zalmoxisus]

@ssomnoremac, thanks for the report. I'm not sure the issue is related to this one. So, according to this, if you disable React Native debugger, it should work. In your case it is more probably a network problem, so the connection with remotedev.io cannot be established.

Are the wifi connected on that device? Have you also tried to run remotedev-server locally and connect as indicated here?

[ssomnoremac]

I was using devtools-on-debugger at first without the devtools in middleware --didn't work. I'll try remotedev-server. Thanks.

[corbt]

For the benefit of google indexing, the error message here is "Event response for 'login' timed out" (it took me too long to find this).

My situation is that I'm running remote-redux-devtools with a local server, but many times I don't have the redux debugger running because I'm working on something else. So I'd like to make this error ignorable (I know that the debugger won't be able to connect, and I'm ok with that).

[zalmoxisus]

The issue with sockets on React Native when connected to Chrome debugger should be fixed in 0.32. We are now using WSS for remotedev.io, which should help with firewall issues. Additionally, I just shipped a new version where socket exceptions only appear as logs in the console.

[ohasy]

for me it worked, after I removed port and host from my composeWithDevTools