infinitered / infinitered/reactotron

Application won't connect to Reactotron (iOS Simulator)

Open
#1,185 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
15.6k
Forks
972
PR merge metrics
No merged PRs in 30d

Description

When running my application in the iOS Mac Simulator, it won't connect to Reactotron even if I should have the good configuration.

My configuration used to work before, but after some changes it doesn't anymore. I checked with the demo app and it's correctly connecting.

Package.json

```
{
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"ios8": "react-native run-ios --simulator=\"iPhone 8\"",
"start": "react-native start",
"lint": "eslint .",
"lint:fix": "yarn lint --fix",
"storybook": "start-storybook -p 7007",
"test": "TZ=UTC jest --watch",
"test:ci": "TZ=UTC jest --coverage --maxWorkers=2",
"generate:icon": "react-native set-icon --path assets/logo/logo.jpg --platform all",
"generate:splash": "react-native set-splash --path assets/splash/splash.png --resize cover --background #f55b3a"
},
"husky": {
"hooks": {
"pre-push": "yarn lint"
}
},
"dependencies": {
"@mindinventory/react-native-tab-bar-interaction": "mindinventory/react-native-tab-bar-interaction",
"@react-native-community/async-storage": "^1.8.1",
"@react-native-community/masked-view": "^0.1.7",
"@react-navigation/bottom-tabs": "^5.2.1",
"@react-navigation/native": "^5.0.9",
"@react-navigation/stack": "^5.1.1",
"axios": "^0.19.2",
"i18n": "^0.8.5",
"i18n-js": "^3.5.1",
"immutable": "^4.0.0-rc.12",
"native-base": "^2.13.12",
"react": "^16.13.0",
"react-native": "0.61.5",
"react-native-gesture-handler": "^1.6.0",
"react-native-global-props": "^1.1.5",
"react-native-linear-gradient": "^2.5.6",
"react-native-localize": "^1.3.4",
"react-native-paper": "^3.6.0",
"react-native-screens": "^2.3.0",
"react-native-snap-carousel": "^3.8.4",
"react-native-splash-screen": "^3.2.0",
"react-native-svg": "^12.0.3",
"react-native-swiper": "^1.6.0-nightly.5",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "^4.2.2",
"react-navigation-material-bottom-tabs": "^2.2.4",
"react-navigation-tabs": "^2.8.2",
"react-redux": "^7.2.0",
"redux": "^4.0.5",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"redux-persist-transform-expire": "^0.0.2",
"redux-persist-transform-immutable": "^5.0.0",
"redux-saga": "^1.1.3",
"reselect": "^4.0.0"
},
"devDependencies": {
"@babel/core": "^7.6.2",
"@babel/runtime": "^7.6.2",
"@bam.tech/react-native-make": "^2.0.0",
"@react-native-community/eslint-config": "^0.0.5",
"@storybook/addon-actions": "^5.3.17",
"@storybook/addon-links": "^5.3.17",
"@storybook/addons": "^5.3.17",
"@storybook/react-native": "^5.3.17",
"@storybook/react-native-server": "^5.3.17",
"@testing-library/react-native": "^5.0.3",
"babel-jest": "^24.9.0",
"babel-loader": "^8.1.0",
"babel-plugin-module-resolver": "^4.0.0",
"eslint": "^6.5.1",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-prettier": "^6.4.0",
"eslint-config-standard": "^14.1.0",
"eslint-config-standard-react": "^9.2.0",
"eslint-import-resolver-babel-module": "^5.1.2",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jest": "^22.17.0",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-node": "^10.0.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.16.0",
"eslint-plugin-react-hooks": "^2.1.2",
"eslint-plugin-redux-saga": "1.0.0",
"eslint-plugin-standard": "^4.0.1",
"husky": "^4.2.3",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.56.0",
"prettier": "^1.18.2",
"react-dom": "^16.13.0",
"react-test-renderer": "^16.13.1",
"reactotron-react-native": "^4.0.3",
"reactotron-redux": "^3.1.2",
"reactotron-redux-saga": "^4.2.3"
},
"jest": {
"preset": "react-native",
"transform": {
"node_modules/react-native/.+\\.js$": "/node_modules/react-native/jest/preprocessor.js"
}
}
```

Here are my app configs :

reactotron.js :
```
/* eslint-disable no-console */
/* global __DEV__ */

import Reactotron from 'reactotron-react-native';
import AsyncStorage from '@react-native-community/async-storage';
import { reactotronRedux } from 'reactotron-redux';
import sagaPlugin from 'reactotron-redux-saga';

const reactotron = Reactotron.setAsyncStorageHandler(AsyncStorage);

// connecting the app
reactotron.configure();

// plugins
reactotron.useReactNative({
storybook: true,
});
reactotron.use(
reactotronRedux({
isActionImportant: action => action.type.startsWith('core/'),
}),
);
reactotron.use(sagaPlugin());

if (__DEV__) {
Reactotron.connect();
Reactotron.clear();
}

if (__DEV__) {
console.tron = Reactotron.logImportant;
} else {
console.tron = console.error;
}

export default reactotron;
```

I checked with reactotron react-native demo app to compare if it's a port / hostname error, and I have exactly the same outputs when checking my ports :

My app :
Capture d’écran 2020-04-04 à 09 54 54
Capture d’écran 2020-04-04 à 09 56 40

The demo app which is correctly connecting to reactotron :
Capture d’écran 2020-04-04 à 09 56 47
Capture d’écran 2020-04-04 à 09 56 50

Contributor guide

Open the contributing guide

Research direction

Start by comparing reactotron.js and package.json with the Reactotron React Native demo app, then reproduce the connection failure in the iOS Simulator. Check whether the same configuration and ports are used; done means the application connects to Reactotron as the demo does.

Written by the indexing model from the issue text.

Assessment

Tech stack
ios, javascript, react-native
Domain
desktop, devtools, networking
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.