Reactotron keeps adding new connections with Live Reload

[unixcow]

trafficstars

Enabling live reload in dev menu for a project keeps adding a new connections to reactotron without even clearing the old one. This is so annoying 😅and i don't know if it's supposed to be like that. It seems like a bug for me

Screenshot

Configuration

.configure({ host: '192.168.1.20' })
.useReactNative({ overlay: false, })
.connect()

Version

• Project: 3.7.1~4.0.1
• Application (Mac): 2.17.1

Reproduction

Just connect your android device (this happens only on android), enable live reload (because hot reload sucks and doesn't work most of the time 😂). Now every time you save a change and it live reloads, reactotron will add a new connection.

Expected Behavior

Reactotron stays in the same session, or at least if it has to create a new session, automatically switch to it and optionally remove the older one(s)

[rmevans9]

Do you have async storage configured with reactotron?

[unixcow]

@rmevans9 this is my config, i believe i don't have async storage enabled.

.configure({ host: '192.168.1.20' })
.useReactNative({ overlay: false, })
.connect()

[priyankpat]

I'm also experiencing the same issue. Below is my configuration:

Reactotron
    .configure({
        host: "192.168.x.xx",
    })
    .useReactNative({
        asyncStorage: false,
        networking: {
            ignoreUrls: /symbolicate/,
        },
        editor: false,
        errors: { veto: (stackFrame) => false },
        overlay: false,
    })
    // .use(middleware)
    .connect();

[yuritoledo]

Any suggestion?

[yuritoledo]

@unixcow @PR1YANKPAT3L try something like this, worked for me:

import Reactotron from 'reactotron-react-native'
import AsyncStorage from '@react-native-community/async-storage'
Reactotron
  .useReactNative()
  .configure()
  .setAsyncStorageHandler(AsyncStorage) // <- here!
  .connect()

https://github.com/infinitered/reactotron/issues/770#issuecomment-522484091

[unixcow]

@yuritoledo My flooded reactotron thanks you sir. This should be either mentioned in the docs or marked as a bug though.

[yuritoledo]

I agree with you and as soon as possible flagged as a bug.

@rmevans9 what you can do about this?

[rmevans9]

:wave: Sorry guys. Yes, we need to get that added to the docs ASAP. It was mentioned in the breaking changes of reactotron-react-native but that obviously doesn't help new people coming to Reactotron. I have been a bit busy lately but I will try and get some time to get the docs updated.

[rmevans9]

Actually looking at our current docs:

https://github.com/infinitered/reactotron/blob/master/docs/quick-start-react-native.md#configure-reactotron-with-your-project

It seems like I did get this line added. I am unsure what you guys are hoping to have flagged as a bug since it is mentioned in the setting up docs?

[unixcow]

@rmevans9 maybe a hint that this line isn't optional and will result in this unexpected behavior if not added? or add this line behind the scenes because async storage is already enabled by default. Better yet disable async storage by default so that people trying to use it will hit that warning about using the handler in the docs when they try to read about it.

[yuritoledo]

Thank you sir, for your quick attention.

For me its ok now, with this commit: https://github.com/infinitered/reactotron/commit/f9e2c925685ebe8145d70e4448314c963d8a2798

[priyankpat]

@yuritoledo I will check it out later tonight, thanks for the reply with a fix.

[yuritoledo]

@PR1YANKPAT3L Cool!

[rmevans9]

@unixcow We can certainly do that. A warning might make a lot more sense then just trying to default it out. I am also trying to think of a way to not have to depend on AsyncStorage but due to an issue on Android I am unable to do that so far.

[unixcow]

@rmevans9 yeah because if it weren't for my reporting about it i would've just thought that it's broken. imho, Ideally AsyncStorage should be disabled unless explicitly enabled by the user at that time he/she will have to look into the docs and find out that they need to pass it to reactotron to avoid unexpected behavior. If disabling by default isn't an option though, at least make it error out pointing to the docs.

[frederikocmr]

@unixcow @PR1YANKPAT3L try something like this, worked for me:

import Reactotron from 'reactotron-react-native'
import AsyncStorage from '@react-native-community/async-storage'
Reactotron
  .useReactNative()
  .configure()
  .setAsyncStorageHandler(AsyncStorage) // <- here!
  .connect()

#770 (comment)

Worked for me just by adding .setAsyncStorageHandler(AsyncStorage), as stated in the docs: " AsyncStorage would either come from react-native or @react-native-community/async-storage depending on where you get it from"

[JB-CHAUVIN]

Same problem goes for me...

[priyankpat]

@unixcow @PR1YANKPAT3L try something like this, worked for me:

import Reactotron from 'reactotron-react-native'
import AsyncStorage from '@react-native-community/async-storage'
Reactotron
  .useReactNative()
  .configure()
  .setAsyncStorageHandler(AsyncStorage) // <- here!
  .connect()

#770 (comment)

I was away for a while, so couldn't test. Adding AsyncStorage resolved the issue. Thanks again!

[lucasmathioni]

You can define a unique ID for the device. This way you will establish a single connection per device, without the need to add async storage.

Reactotron.configure({
  getClientId: () => UNIQUE_ID,
})

[duspada]

You can define a unique ID for the device. This way you will establish a single connection per device, without the need to add async storage.

Reactotron.configure({
  getClientId: () => UNIQUE_ID,
})

worked!!! like this:

import DeviceInfo from 'react-native-device-info';
  const tron = Reactotron.configure({
    getClientId: () => DeviceInfo.getAndroidId(), // fix multiple connections
  })

[joshuayoes]

@morganick 👋

[AldoMX]

You can define a unique ID for the device. This way you will establish a single connection per device, without the need to add async storage.

Reactotron.configure({
  getClientId: () => UNIQUE_ID,
})

There is already a unique id in the expo-constants package, the installationId:

import Constants from 'expo-constants';

Reactotron.configure({
  getClientId: async () => Constants.installationId
});

Docs say you should generate and store your own id instead, but I believe this is a legitimate use case for the installation id 😅.