"Socket hung up"

[zhulichao]

Dependencies as follows.When debugger in browser, the result as follows. I don't know weather the react-native of 0.42.0 result in this problem.

"dependencies": {
    "antd-mobile": "^1.0.1",
    "react": "~15.4.0",
    "react-dom": "~15.4.0",
    "react-native": "0.42.0",
    "react-native-vector-icons": "^4.0.0",
    "react-redux": "^5.0.3",
    "react-web": "0.4.6",
    "redux": "^3.6.0",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "babel-jest": "19.0.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-import": "^1.1.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-react-native": "^1.9.0",
    "babel-preset-stage-1": "^6.16.0",
    "haste-resolver-webpack-plugin": "^0.2.2",
    "jest": "19.0.2",
    "json-loader": "^0.5.4",
    "react-devtools": "^2.0.12",
    "react-hot-loader": "^1.3.0",
    "react-test-renderer": "~15.4.0",
    "remote-redux-devtools": "0.5.0",
    "remote-redux-devtools-on-debugger": "^0.7.0",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.1",
    "webpack-html-plugin": "^0.1.1"
  },

[zalmoxisus]

"Socket hung up" means that the connection to the server couldn't be established. We should probably catch this and add a more friendly exception.

Most likely you specified a port, but didn't start remotedev-server. If no port specified, it will use remotedev.io server.

[G-Rath]

@zalmoxisus +1 for handling this better.

We're using this for debugging, but don't always have remotedev-server running, as our app is still in development, and we're not always debugging the state.

This is causing the console to be filled, and become very ugly very quickly when trying to quickly debug something via other console output.

[zalmoxisus]

@G-Rath, a more friendly error message (as I suggested above) wouldn't help with that. Should we just swallow the exceptions or not to reconnect?

In case you want to investigate this, the log comes from here. Socketcluster offers reconnecting configurable.

[G-Rath]

@zalmoxisus - Fair enough. I was thinking some maybe on the lines of printing an error once the first time, then afterwards when trying to reconnect, don't print an error if you've never had any connection to remotedev, since you don't know if they're running.

All in all it's an annoying thing to work with, because it's hard to account for all the use cases, and for if you're not connecting because remotedev isn't running or if it's an 'actual' error.

I think it might be nice to have something like an option for print-once-then-swallow-on-start (I imagine the print as something like "I've tried to connect with no success - remember to run remotedev if you want to use the remote debugger!") when trying to connect at the very least, since then if you were having actual issues with your connection you could just disable the flag and see the error log.

Either way, I'd think it best to only swallow 'socket hung up' errors, since that's the only error (that I've seen so far) that's thrown when this use case applies. (i.e any other error is actually error, not just a case of remotedev not running).

I also definitely think that the exceptions should not be just swallowed - at the very least a print-once message should be shown so that you'd at least know that the code tried to run.

I'm happy to work with you on this best I can, tho my JS + socket work is a little on the rusty side ;)

[zalmoxisus]

@G-Rath I agree with that. If you want to cut a PR to show the error message, it would be much appreciated. If not, I'll make it later (when will work on the next release).

[G-Rath]

@zalmoxisus - I'll give it a go when I get some time, hopefully this weekend or next :)

I'll let you know how I get on.

[G-Rath]

@zalmoxisus I've made a pull request for this, and it works nicely.

Sadly we can't actually catch net::ERR_CONNECTION_RESET, but because we're no longer logging after that message, consoles like Chrome will collapse it, until another console message that doesn't match is logged.

This should make the console a bit cleaner, and is setup so that if a connection is made the suppression is reset.

Feel free to change the code to your liking. I also added a console.log to the connect method, as I found it useful to log when the connection was successful without having the redux devtools open. I'm happy to remove that if you want :)

[marcusegues]

I get this "Socket hung up" error when I try to react-native run-android but not when I react-native run-ios. Is there a plausible reason why this is so?

My package.json is:

{
  "name": "vapp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "postinstall": "remotedev-debugger --hostname=localhost --port=8000 --injectserver=reactnative"
  },
  "dependencies": {
    "lodash": "^4.17.4",
    "prop-types": "^15.5.10",
    "react": "16.0.0-alpha.6",
    "react-native": "0.44.2",
    "react-native-pjsip": "^1.0.1",
    "react-navigation": "^1.0.0-beta.11",
    "react-redux": "^5.0.5",
    "redux": "^3.6.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "babel-jest": "20.0.3",
    "babel-preset-react-native": "1.9.2",
    "jest": "20.0.4",
    "react-test-renderer": "16.0.0-alpha.6",
    "remote-redux-devtools": "^0.5.11",
    "remote-redux-devtools-on-debugger": "^0.7.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

And my configureStore.js:

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'remote-redux-devtools';
import thunkMiddleware from 'redux-thunk';
import rootReducer from './reducers';

const configureStore = () => {
  const composeEnhancers = composeWithDevTools({ realtime: true, port: 8000 });
  const store = createStore(
    rootReducer,
    composeEnhancers(
      applyMiddleware(
        thunkMiddleware,
      )
    )
  );
  return store;
};

export default configureStore;

[G-Rath]

@marcusegues Have you reversed your ports using the ADB? (via running adb reverse tcp:8000 tcp:8000)

That's usually the most common reason for socket hung up - keep in mind that if you disconnect the device from your computer, the port doesn't remain reversed; You have to (re-)run that ADB command every time you connect your device.

[marcusegues]

Yes, adb reverse tcp:8000 tcp:8000 solved it for me!

[jhalborg]

Using Expo, this only works 2/3 of the time, the other 1/3 I get this error. It sometimes goes away by just restarting, reloading or other 'magic' stuff, but I'd prefer to figure out how to get it working 3/3 times. Any steps I can take?

[jungleyu]

@G-Rath I ran the adb reverse command, but still got the error, can not found out the root cause.

[G-Rath]

@jungleyu I've not worked with this in a while, but the best generic advice I can give is to just be patient; Stop all the build tools & local servers, unplug all the devices, completely close the app on the phone, heck even reboot the computer so the background services get cleared and restarted.

From there, work though the list one by one:

1. Plug the phone in (but don't open the app)
2. Run adb reverse tcp:8000 tcp:8000
3. Open up the Chrome dev tools, and make sure you can see your device under the remote devices tab. (Open up Chrome Mobile if it doesn't show up after a couple of seconds).
4. Start up your app.

I'd also advise waiting a few seconds on each step to ensure they've been completed successfully.

Other than that, there's little much you can do. It's annoying, but should work after enough tries.

[jungleyu]

@G-Rath I follow your steps, it works good on my real device though failed on emulator, thanks for your answer.

[ohasy]

for me, it was incorrect port number. removing port number and host did it for me.

[rgomezp]

I'm having this issue with Expo. Anyone figured out a good solution for this? @jhalborg

[tattivitorino]

I am having the same issue with an expo ejected app. 10% of the time I have the devtools working for both ios and android! I must be missing something here! I am testing on real devices and using yarn start Should I keep the devices always plugged?

Could anyone help me with the proper configuration with an ejected app? Any help will be very much appreciated! Cheers

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": {
    "axios": "^0.19.0",
    "eslint": "^6.1.0",
    "expo": "^33.0.0",
    "expo-asset": "^5.0.1",
    "expo-av": "~5.0.2",
    "expo-constants": "~5.0.1",
    "expo-document-picker": "~5.0.2",
    "expo-file-system": "~5.0.1",
    "expo-font": "~5.0.1",
    "expo-image-manipulator": "~5.0.1",
    "expo-image-picker": "~5.0.2",
    "expo-linear-gradient": "~5.0.1",
    "expo-media-library": "~5.0.1",
    "expo-permissions": "~5.0.1",
    "expo-secure-store": "~5.0.1",
    "expokit": "33.0.4",
    "js-sha256": "^0.9.0",
    "jwt-decode": "^2.2.0",
    "moment": "^2.24.0",
    "moment-duration-format": "^2.3.2",
    "moment-range": "^4.0.2",
    "native-base": "^2.13.4",
    "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-calendars": "^1.201.0",
    "react-native-datepicker": "^1.7.2",
    "react-native-loading-spinner-overlay": "^1.0.1",
    "react-native-scalable-image": "^0.5.1",
    "react-native-swipe-list-view": "^2.0.0",
    "react-native-unimodules": "^0.4.0",
    "react-native-web": "^0.11.4",
    "react-navigation": "^3.11.1",
    "react-redux": "7.0.0",
    "redux": "^4.0.4",
    "redux-form": "^8.2.5",
    "redux-saga": "^1.0.5",
    "reselect": "^4.0.0"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.1.1",
    "remote-redux-devtools": "^0.5.16"
  },
  "private": true
}

My Store:

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import { composeWithDevTools } from 'remote-redux-devtools';
import rootReducer from './reducers';
import rootSaga from './sagas';

const composeEnhancers = composeWithDevTools({ realtime: true, port: 8000 });
const sagaMiddleware = createSagaMiddleware();
const store = createStore(rootReducer, composeEnhancers(
  applyMiddleware(sagaMiddleware)
));
sagaMiddleware.run(rootSaga);

export default store;

My console throws this:

Socket hung up
- node_modules/sc-errors/index.js:122:18 in SocketProtocolError
- node_modules/socketcluster-client/lib/scclientsocket.js:632:38 in _onSCClose
- ... 12 more stack frames from framework internals

[rgomezp]

Same here:

Socket hung up
- node_modules/socketcluster-client/lib/scclientsocket.js:632:14 in SCClientSocket._onSCClose
- node_modules/socketcluster-client/lib/scclientsocket.js:304:11 in SCTransport.<anonymous>
- ... 9 more stack frames from framework internals

[tattivitorino]

@rgomezp here's how I sorted for my expo ejected app

yarn add redux-devtools-cli remote-redux-devtools "redux-devtools": "redux-devtools --hostname=192.168.0.13 --port=1024" in scripts attr where hostname is your computer IP and choose whatever port you want

{
  "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",
    "redux-devtools": "redux-devtools --hostname=192.168.0.13 --port=1024"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "expo": "^33.0.0",    
    "expokit": "33.0.4",   
    "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-unimodules": "^0.4.0",
    "react-native-web": "^0.11.4",
    "react-navigation": "^3.11.1",
    "react-redux": "7.0.0",
    "redux": "^4.0.4",
    "redux-form": "^8.2.5",
    "redux-saga": "^1.0.5",
    "reselect": "^4.0.0"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.1.1",
    "eslint": "^6.1.0",
    "eslint-plugin-react": "^7.14.3",
    "redux-devtools-cli": "^0.0.1-1",
    "remote-redux-devtools": "^0.5.16"
  },
  "private": true
}

my store:

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

import rootReducer from './reducers';
import rootSaga from './sagas';

const composeEnhancers = composeWithDevTools({ realtime: true, name: 'Instance name', hostname: '192.168.0.13', port: 1024 });
const sagaMiddleware = createSagaMiddleware();

const store = createStore(rootReducer, composeEnhancers(
  applyMiddleware(sagaMiddleware)
));

sagaMiddleware.run(rootSaga);
export default store;

yarn start to start the app npm run redux-devtools

Open the standalone Chrome remotedev Go to settings Use custom localserver hostname: your computer IP address port : same as the configs in my case 1024 hit submit

I'm testing on real devices over the wifi, they are not plugged. I havent tested on simulators. If you want simulators try localhost instead of the IP.

I hope it helps anyone in need!!!! Cheers

[rgomezp]

@tattivitorino , No luck unfortunately :(

Get store.subscribe is not a function so I guess the store is not getting created properly

[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 , The ports get overwritten each time I run the project to 19001 and 19002 (can't get them to be on the same port)

[KEMBL]

@rgomezp and anyone who reads until here

in a case it still interesting, remote-redux-devtools does not work for me, but redux-devtools-extension works well! I can see the Redux panel with actions, store, etc. in React Native Debugger, that is how I did it:

1) use redux-devtools-extension (mine version is 2.13.8 ) import { composeWithDevTools } from 'redux-devtools-extension';

const composeEnhancers = composeWithDevTools({
    name: 'my-application',
 });

2) In store creation I am using composeEnhancers, if you do not need try to use devToolsEnhancer might work too const store = createStore(rootReducer, initState, composeEnhancers(applyMiddleware(...middleware)));

3) Open React Native Debugger (mine version is 0.11.5 ), in my case it connects to port 8081 by default

4) Start your Native App in android emulator (at list I tried that on android, might be working for iOs too) react-native run-android

5) when the App loads press CTRL+M, select Debug

after this App reloads and React Native Debugger should show proper info in the Redux panel

for a local debug it is ok, for the remote debugging the question is still opened :/ As far as I can remember, It uses to work a couple of years ago, in a combination with remotedev-server but now it does not.

Also, that comment might be interesting: https://github.com/jhen0409/react-native-debugger/issues/259#issuecomment-423395464