Remote devtools + local devserver connection issues

[josecarlosns]

So I was using remote-redux-devtools with a local remotedev instance and the redux devtools extension for chrome to use for debugging one of my project and after some really long hours trying to get these things to work I was able to make a connection, but there's a catch: the connection keeps getting closed and reopened, and I simply can't figure out why!

I started the project using the create-react-native-app helper and expo-cli.

Environment:

create-react-native-app v2.0.2
react-native-cli v2.0.1
react-native v0.59.8
expo-cli v2.20.1
node v11.14.0
npm v6.7.0
yarn v1.16.0

This is my package.json

{
	"main": "node_modules/expo/AppEntry.js",
	"scripts": {
		"start": "expo start",
		"android": "expo start --android",
		"ios": "expo start --ios",
		"web": "expo start --web",
		"eject": "expo eject"
	},
	"dependencies": {
		"base-64": "^0.1.0",
		"expo": "^33.0.0",
		"firebase": "^6.2.2",
		"native-base": "^2.12.1",
		"react": "16.8.3",
		"react-dom": "^16.8.6",
		"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
		"react-native-router-flux": "^4.0.6",
		"react-native-tab-view": "^2.6.2",
		"react-native-web": "^0.11.4",
		"react-redux": "^7.1.0",
		"redux": "^4.0.1",
		"redux-thunk": "^2.3.0"
	},
	"devDependencies": {
		"babel-eslint": "^10.0.2",
		"babel-preset-expo": "^5.1.1",
		"eslint": "^5.16.0",
		"eslint-config-prettier": "^5.0.0",
		"eslint-plugin-prettier": "^3.1.0",
		"eslint-plugin-react": "^7.13.0",
		"prettier": "^1.18.2",
		"remote-redux-devtools": "^0.5.16",
		"remotedev-server": "^0.3.1"
	},
	"private": true
}

To start debugging my project first I start the local devserver by using:

remotedev --host=192.168.2.183 --port=8000

Then I run

adb reverse tcp:8000 tcp:8000

with my device connected (I'm not using emulator). On the code where I create my store I connect to the remotedev server like this:

import { composeWithDevTools } from 'remote-redux-devtools';

const enhance = composeWithDevTools({
	realtime: true,
	host: '192.168.2.183',
	port: 8000
});

const store = createStore(myReducer, {}, enhance(applyMiddleware(ReduxThunk)));

Then I start the packager like usual with yarn start, and then things start getting crazy, because when connecting to the local devserver, my packager log shows this:

connected to remotedev-server
remote-redux-devtools: Socket connection errors are being suppressed.
This can be disabled by setting suppressConnectErrors to 'false'.
connected to remotedev-server

Server ping timed out
- node_modules/socketcluster-client/lib/scclientsocket.js:632:14 in SCClientSocket._onSCClose
- node_modules/socketcluster-client/lib/scclientsocket.js:299:11 in SCTransport.<anonymous>
- ... 9 more stack frames from framework internals

remote-redux-devtools: Socket connection errors are being suppressed.
This can be disabled by setting suppressConnectErrors to 'false'.
remote-redux-devtools: Socket connection errors are being suppressed.
This can be disabled by setting suppressConnectErrors to 'false'.

Server ping timed out
- node_modules/socketcluster-client/lib/scclientsocket.js:632:14 in SCClientSocket._onSCClose
- node_modules/socketcluster-client/lib/scclientsocket.js:299:11 in SCTransport.<anonymous>
- ... 9 more stack frames from framework internals

Event response for '#handshake' timed out
- node_modules/socketcluster-client/lib/sctransport.js:333:16 in SCTransport._handleEventAckTimeout
- node_modules/socketcluster-client/lib/sctransport.js:364:11 in <unknown>
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:256:17 in <unknown>
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:152:6 in _callTimer
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:414:6 in Object.callTimers
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:366:41 in MessageQueue.__callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:106:11 in <unknown>
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:314:8 in MessageQueue.__guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:105:9 in MessageQueue.callFunctionReturnFlushedQueue
* http://localhost:19001/debugger-ui/debuggerWorker.js:80:58 in <unknown>

connected to remotedev-server

The output of the remotedev command looks like this:

[RemoteDev] Start server...
--------------------------------------------------------------------------------

   �[0;33m[Busy]�[0m Launching SocketCluster
   �[0;32m[Active]�[0m SocketCluster started
            Version: 14.3.5
            Environment: dev
            WebSocket engine: ws
            Port: 8000
            Master PID: 19895
            Worker count: 1
            Broker count: 1

   �[0;32m[Done]�[0m Migrations are finished

1561980073680 - Origin: Worker (PID 19920)
   [Warning] SocketProtocolError: Server ping timed out
    at SCServerSocket._onSCClose 
    at WebSocket.<anonymous> 
    at WebSocket.emit (events.js:193:13)
    at WebSocket.emitClose 
    at Socket.socketOnClose 
    at Socket.emit (events.js:193:13)
    at TCP._handle.close (net.js:614:12)
1561980078147 - Origin: Worker (PID 19920)
   [Warning] SocketProtocolError: Server ping timed out
    at SCServerSocket._onSCClose 
    at WebSocket.<anonymous> 
    at WebSocket.emit (events.js:193:13)
    at WebSocket.emitClose 
    at Socket.socketOnClose 
    at Socket.emit (events.js:193:13)
    at TCP._handle.close (net.js:614:12)
1561980078646 - Origin: Worker (PID 19920)
   [Warning] SocketProtocolError: Failed to complete handshake
    at SCServerSocket._onSCClose
    at WebSocket.<anonymous>
    at WebSocket.emit (events.js:193:13)
    at WebSocket.emitClose
    at Socket.socketOnClose 
    at Socket.emit (events.js:193:13)
    at TCP._handle.close (net.js:614:12)
1561980091946 - Origin: Worker (PID 19920)
   [Warning] SocketProtocolError: Socket hung up
    at SCServerSocket._onSCClose 
    at WebSocket.<anonymous> 
    at WebSocket.emit (events.js:193:13)
    at WebSocket.emitClose 
    at Socket.socketOnClose 
    at Socket.emit (events.js:193:13)
    at TCP._handle.close (net.js:614:12)

And when I start the remote redux devtools extension on chrome it connects to the application for an instant, then disconnects, and keeps repeating this.

[gusoskar]

Have you found a solution for this, I'm experiencing the same problems?

[josecarlosns]

@gusoskar I just stopped using remote-redux-devtools altogether, I couldn't even setup the chrome extension properly! What I wanted was to use these tools to watch redux actions/reducers while setting up JS breakpoints on vscode for remote debugging a React-Native app I'm building. But this is just too much of a hassle to setup, and even so I found so many issues (this one wasn't the only one BY FAR) and spent so many hours trying that I just eventually gave up.

But I was able to setup react-native-debugger and with it everything worked, EXCEPT setting up vscode breakpoints. So my choices where:

• Use react-native-debugger alone for debugging redux and JS code.

Or...

• Just abandon redux remote debugging and stick with vscode.

I chose the latter.

[rgomezp]

I got a similar but different error:
Socket closed without status code

• node_modules/socketcluster-client/lib/scclientsocket.js:632:14 in SCClientSocket._onSCClose
• node_modules/socketcluster-client/lib/scclientsocket.js:299:11 in SCTransport.
• ... 9 more stack frames from framework internals

Would appreciate any insights here

[wemmyo]

If you're having this issue with an expo app, make sure "packagerPort": 19001 is on the same port with "devToolsPort": 19001 on your packager-info.json in .expo folder.

[rgomezp]

@wemmyo ,
Thank you! this fixed the socket issue. The redux remote dev tools still won't populate with data, however :/

Edit: never mind, it didn't work. The ports keep getting overwritten each time I run expo start

[wemmyo]

@rgomezp You might need to change the ports to match each other after running expo start, save changes then open devtools. Also if you're using remote-redux-devtools I'd suggest you use redux-devtools-extension with react-native-debugger instead. https://github.com/zalmoxisus/redux-devtools-extension , https://github.com/jhen0409/react-native-debugger

[aminta]

Hi!

It's 2023 and the problem is still present. I use React Native with Hermes but without Flipper because of incompatibility with some Firebase libraries.

So, I start yarn redux-devtools --hostname=localhost --port=8000 --open, start the Metro server and I've configured the store (with RTK Query) like so:

import devToolsEnhancer from 'remote-redux-devtools';
[...]
const store = configureStore({
  reducer: persistedReducer,
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }).concat(...middlewares),

  devTools: false,
  enhancers: [devToolsEnhancer({realtime: true, port: 8000})],
});

All it works but every 20 seconds I got from Metro: [SocketProtocolError: Client pong timed out]

Any suggestion?

[dhruvsakariya-alchemy]

Hello @aminta Have You Managed to fix this Error ? I am getting the same error everyting is working but after 20 seconds getting Client pong timed out

[arturyumaev]

I've just faced with the same issue. It's working for only a few seconds.

[bastiankistner]

instead of

import devToolsEnhancer from 'remote-redux-devtools';

install @redux-devtools/remote and use

import { devToolsEnhancer } from '@redux-devtools/remote';