"Socket Hung Up" error with basic setup for web React / Redux

[donpinkus]

I'm using the most basic setup to debug a web-based regular React app.

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'remote-redux-devtools';

const store = createStore(reducer, preloadedState, composeWithDevTools(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

When I open my app, I get this error flooding the console:

connected to remotedev-server

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

Error {
  code: 1006,
  message: "Socket hung up",
  name: "SocketProtocolError",
  stack: "SocketProtocolError@https://localhost:3000/static/js/bundle.js:119101:28↵_onSCClose@https://localhost:3000/static/js/bundle.js:120445:3…"
}

[rgomezp]

Any update on this? I've tried everything and can't figure this out

[georgeMorales]

I have the same problem!

[mktsofteasy]

Has anyone solved this problem?

[rgomezp]

To fix the error, make sure "packagerPort": 19001 is on the same port with "devToolsPort": 19001 on your packager-info.json in .expo folder (expo only)

However, while this fixed the error, the dev tools themselves don't get populated with the state

[ghasemikasra39]

same issue

[henriqueshishido]

I also have the same issue.

[gguidotti]

I'm having the same issue with regular React web app. My store is pretty basic at the moment, I'm just using a combindeReducers call with a couple of reducers. Did not setup any middlewares yet so I'm trying to use this extension running the default export from the package itself instead of relying on the { composeWithDevTools }.

EDIT:
I installed the Redux DevTools extension for Chrome and I came here to set everything up, but I just realized that this was not the right place. After switching to the redux-devtools-extension page I followed the instructions and and successfully linked my app with the extension, now everything is fine. My bad 😅

[rickshido]

I found a solution for this problem. I will report it as follows:

Step 1 - Verify installed packages:

• remote-redux-devtools
• remotedev-server
• remotedev
• react-devtools

Step 2 - Verify if the source code file that uses "devTools" contains:
const enhance = composeWithDevTools({
realtime: true,
host: 'localhost',
port: 8000
});

const store = createStore(rootReducer, enhance(applyMiddleware(reduxThunk)));

Step 3 - In Android Emulator settings, verify:

• DEBUG JS REMOTELY: let it disabled
• In "DEV SETTINGS" -> "Debug server host & port device": let empty

Step 4 - In the Remote DevTools (Chrome extension):

• Click in "SETTINGS" button
• check "use custom (local) server" and fill with the fields --> Hostname: localhost e Port: 8000

Step 5 - In terminal, in the project directory, run:
$ emulator -avd <device_name> //// or start emulator using Android Studio
$ react-native start --reset-cache
$ remotedev --hostname=localhost --port=8000
$ adb reverse tcp:8000 tcp:8000
$ adb reverse tcp:8081 tcp:8081
$ react-native run-android

I hope these steps help you. Any doubts, feel free to contact me.

[ghasemikasra39]

I found a solution for this problem. I will report it as follows:

Step 1 - Verify installed packages:

• remote-redux-devtools
• remotedev-server
• remotedev
• react-devtools

Step 2 - Verify if the source code file that uses "devTools" contains:
const enhance = composeWithDevTools({ realtime: true, host: 'localhost', port: 8000 });

const store = createStore(rootReducer, enhance(applyMiddleware(reduxThunk)));

Step 3 - In Android Emulator settings, verify:

• DEBUG JS REMOTELY: let it disabled
• In "DEV SETTINGS" -> "Debug server host & port device": let empty

Step 4 - In the Remote DevTools (Chrome extension):

• Click in "SETTINGS" button
• check "use custom (local) server" and fill with the fields --> Hostname: localhost e Port: 8000

Step 5 - In terminal, in the project directory, run:
$ emulator -avd <device_name> //// or start emulator using Android Studio
$ react-native start --reset-cache
$ remotedev --hostname=localhost --port=8000
$ adb reverse tcp:8000 tcp:8000
$ adb reverse tcp:8081 tcp:8081
$ react-native run-android

I hope these steps help you. Any doubts, feel free to contact me.

unbelievable 👍 It's working. You're amazing man.

[rgomezp]

@rickshido @ghasemikasra39 ,
Is this different for Expo? Also, what to do if running a real device?

[rickshido]

Hi @rgomezp
I am not sure if these steps are the same for Expo.
If you are running in a real device, you need change:

const enhance = composeWithDevTools({
realtime: true,
host: '<your_pc_ip_address>',
port: 8000
});
const store = createStore(rootReducer, enhance(applyMiddleware(reduxThunk)));

And, in your Real Device, open the App and go to Dev Settings → Debug server host & port for device. Set your PC_IP_ADDRESS and the port of the (e.g. 10.0.1.1:8000).

I hope it help you.

[ardyfeb]

Hi @rgomezp
I am not sure if these steps are the same for Expo.
If you are running in a real device, you need change:

const enhance = composeWithDevTools({
realtime: true,
host: '<your_pc_ip_address>',
port: 8000
});
const store = createStore(rootReducer, enhance(applyMiddleware(reduxThunk)));

And, in your Real Device, open the App and go to Dev Settings → Debug server host & port for device. Set your PC_IP_ADDRESS and the port of the (e.g. 10.0.1.1:8000).

I hope it help you.

where i can find "Dev setting -> Debug server host & port" ?

[Mazvangui]

I found a solution for this problem. I will report it as follows:

Step 1 - Verify installed packages:

• remote-redux-devtools
• remotedev-server
• remotedev
• react-devtools

Step 2 - Verify if the source code file that uses "devTools" contains:
const enhance = composeWithDevTools({ realtime: true, host: 'localhost', port: 8000 });

const store = createStore(rootReducer, enhance(applyMiddleware(reduxThunk)));

Step 3 - In Android Emulator settings, verify:

• DEBUG JS REMOTELY: let it disabled
• In "DEV SETTINGS" -> "Debug server host & port device": let empty

Step 4 - In the Remote DevTools (Chrome extension):

• Click in "SETTINGS" button
• check "use custom (local) server" and fill with the fields --> Hostname: localhost e Port: 8000

Step 5 - In terminal, in the project directory, run:
$ emulator -avd <device_name> //// or start emulator using Android Studio
$ react-native start --reset-cache
$ remotedev --hostname=localhost --port=8000
$ adb reverse tcp:8000 tcp:8000
$ adb reverse tcp:8081 tcp:8081
$ react-native run-android

I hope these steps help you. Any doubts, feel free to contact me.

It's working. You're amazing bro @rickshido.

[Rawan-Eltobgy]

Hi @rgomezp
I am not sure if these steps are the same for Expo.
If you are running in a real device, you need change:
const enhance = composeWithDevTools({
realtime: true,
host: '<your_pc_ip_address>',
port: 8000
});
const store = createStore(rootReducer, enhance(applyMiddleware(reduxThunk)));
And, in your Real Device, open the App and go to Dev Settings → Debug server host & port for device. Set your PC_IP_ADDRESS and the port of the (e.g. 10.0.1.1:8000).
I hope it help you.

where i can find "Dev setting -> Debug server host & port" ?

shake your device, you would find a pop-up menu, click settings from it then Debug server host & port