Migration from 0.6.1 to 0.7.0 breaks debugger

[OzzieOrca]

Migrating to 0.7.0 crashes the app when trying to use the Chrome debugger.

Running react-native 0.61.2.

I get the following error:

Invariant Violation: Calling synchronous methods on native modules is not supported in Chrome.

Here's my rollbar config:

import { Client, Configuration } from 'rollbar-react-native';
import Config from 'react-native-config';
import { Platform } from 'react-native';
import DeviceInfo from 'react-native-device-info';

const codeVersion = `${Config.TRAVIS_COMMIT || 'development'}.${Platform.OS}`;

const config = new Configuration(Config.ROLLBAR_ACCESS_TOKEN, {
  enabled: !__DEV__,
  payload: {
    appVersion: DeviceInfo.getBuildNumber(),
    codeBundleId: codeVersion,
    client: {
      javascript: {
        source_map_enabled: true,
        guess_uncaught_frames: true,
        code_version: codeVersion,
      },
    },
  },
});

export const rollbar = new Client(config);

[waltjones]

@OzzieOrca Thank you for the report. Didn't see this here, but will investigate.

Can you try setting captureDeviceInfo to false in your config and see if it will bypass this problem?

[OzzieOrca]

Yup this works:

import { Client, Configuration } from 'rollbar-react-native';
import Config from 'react-native-config';
import { Platform } from 'react-native';
import DeviceInfo from 'react-native-device-info';

const codeVersion = `${Config.TRAVIS_COMMIT || 'development'}.${Platform.OS}`;

const config = new Configuration(Config.ROLLBAR_ACCESS_TOKEN, {
  enabled: !__DEV__,
+ captureDeviceInfo: false,
  payload: {
    appVersion: DeviceInfo.getBuildNumber(),
    codeBundleId: codeVersion,
    client: {
      javascript: {
        source_map_enabled: true,
        guess_uncaught_frames: true,
        code_version: codeVersion,
      },
    },
  },
});

export const rollbar = new Client(config);

Thanks for the quick reply! Do you have any docs on what info it collects? I may just stay at the old version if there's something useful in there.

[OzzieOrca]

Here's the Android error that seems more specific:
When debugging:

TypeError: NativeClient.deviceAttributes is not a function

When not debugging:

TypeError: undefined is not a function, js engine: hermes

[waltjones]

To clarify, those errors are without setting captureDeviceInfo: false, correct?

[OzzieOrca]

Correct. Yes captureDeviceInfo: false fixes everything I've mentioned.

[OzzieOrca]

I was looking at the diff between 0.6.1 and 0.7.0 f98a982...cf3ae7a Is the captureDeviceInfo stuff a new feature? Sorta looks like it. If disabling it doesn't omit any data I used to have that might be nicer than downgrading.

[waltjones]

Great, that's what I expected. Just making sure.

This feature is new to 0.7.0, so an earlier version won't have the extra metadata. The feature adds device information to payloads that are sent from the Javascript side. The metadata is retrieved synchronously (which is what causes the Chrome debugger issue) in order to include it in the initial config of rollbar.js, and still ensure rollbar.js inits before other application code runs.

Ideally you'd disable while debugging and still be able to enable in production.

Example data in the payload:

iOS

    "os": {
      "system_name": "iOS", 
      "device_code": "x86_64", 
      "app_name": "reactNativeApp", 
      "code_version": "1", 
      "bundle_identifier": "org.reactjs.native.example.reactNativeApp", 
      "short_version": "1.0", 
      "device_name": "iPhone 8", 
      "os_version": "13.2", 
      "os": "ios"
    }

Android:

    "os": {
      "phone_model": "Android SDK built for x86", 
      "product": "sdk_gphone_x86", 
      "brand": "google", 
      "android_version": "9", 
      "board": "goldfish_x86", 
      "device": "generic_x86", 
      "os": "android", 
      "manufacturer": "Google"
    }

[OzzieOrca]

Ok cool. Thanks for your help and quick responses! Hopefully the defaults can get better :)

Here's what I'm going with for now:

import { Client, Configuration } from 'rollbar-react-native';
import Config from 'react-native-config';
import { Platform } from 'react-native';
import DeviceInfo from 'react-native-device-info';

const codeVersion = `${Config.TRAVIS_COMMIT || 'development'}.${Platform.OS}`;

const config = new Configuration(Config.ROLLBAR_ACCESS_TOKEN, {
  enabled: !__DEV__,
  captureDeviceInfo: !__DEV__, // New feature in rollbar-react-native 0.7.0 that breaks Chrome debugging https://github.com/rollbar/rollbar-react-native/issues/101. Disabling in dev.
  payload: {
    appVersion: DeviceInfo.getBuildNumber(),
    codeBundleId: codeVersion,
    client: {
      javascript: {
        source_map_enabled: true,
        guess_uncaught_frames: true,
        code_version: codeVersion,
      },
    },
  },
});

export const rollbar = new Client(config);

[waltjones]

Looks good. 0.7.1 will have this off by default, and that will be released shortly.

[ramandika]

Hey @waltjones, I face the same issue in 0.7.1, I think it is because of the cache. One may want to do it first clear pod cache before updating the version.