Support for React-Native

[respectTheCode]

We use rollbar for all of our web and native mobile projects but it doesn't work with react-native.

[antoinerousseau]

That would be great.

Sentry doc about it: https://docs.getsentry.com/hosted/clients/javascript/integrations/react-native/

Some discussions:
facebook/react-native#1194
facebook/react-native#5378

[dozoisch]

Same situation here!

[c-h-]

Same here!

[erickreutz]

We need this!

[antoinerousseau]

I have set up my RN app to call the Rollbar API when catching an exception, and it works great.
It looks like this (more or less):

import {Platform} from 'react-native'
import StackTrace from 'stacktrace-js'

export const init = () => {
  const originalHandler = global.ErrorUtils.getGlobalHandler()

  const handler = (error) => {
    report(error, 'uncaught')
    if (originalHandler) {
      originalHandler(error)
    }
  }
  global.ErrorUtils.setGlobalHandler(handler)
}

export const report = (error, context) => {
  StackTrace.fromError(error, {offline: true})
  .then((stack) => {
    const frames = stack.map((frame) => ({
      filename: frame.fileName,
      lineno: frame.lineNumber,
      colno: frame.columnNumber,
      method: frame.functionName,
    }))

    const params = {
      access_token: '<token>',
      data: {
        environment: (__DEV__ ? 'development' : 'production'),
        code_version: '1.0',
        platform: Platform.OS,
        framework: Platform.OS,
        context,
        body: {
          trace: {
            frames,
            exception: {
              class: error.name,
              message: error.message,
            },
          },
        },
      },
    }

    fetch('https://api.rollbar.com/api/1/item/', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(params),
    })
    .then((response) => {
      if (__DEV__ && response.status >= 400) {
        console.error('Rollbar response status is ' + response.status)
      }
    })
  })
}

However I couldn't manage to upload the source map to Rollbar.

react-native bundle --platform ios --dev false --entry-file index.ios.js --sourcemap-output main.jsbundle.map --bundle-output main.jsbundle

After multiple tries, I read this on the website:

Some source map generation tools support an alternate representation of the map that combines multiple sub-maps into "sections" within the top level map. Each section can either be embedded source map or a reference to an external source map. Unfortunately, we don't yet support this source map format.

And my source map does indeed contain "sections".
Any thoughts?

[antoinerousseau]

Finally had to switch to Sentry. Their React Native plugin worked great for me, and they support source maps with sections.

[respectTheCode]

We switched to bugsnag after we couldn't get sentry to work.

[antoinerousseau]

Bugsnag looks neat indeed!
https://docs.bugsnag.com/platforms/react-native/

[brianr]

Hey everyone - just checking in to say we see this and we're planning to work on it soon. Will provide an update as soon as we have a timeline.

[tarr11]

Yeah, this is a showstopper for me. Will probably switch soon if this isn't fixed. Love rollbar otherwise though.

[skylarmb]

+1 ! We love it on web but would like to use it in react native as well

[rokob]

I am working on library support for react-native. Because of the unique environment, the plan is actually to have a different notifier library that deals with this use case directly. Much work needs to be done shuttling things across the js bridge into the native environments and this would not be well suited to live in the rollbar.js library. I will update this issue with further information as the work progresses.

[cdesch]

@rokob Can you share the library so we can help with it?

[dmazin]

please friends I need this

[bmishkin]

we're considering moving to another exception product, bc rollbar doesn't have react native support =(

[symptomatik]

Would love this, please and thank you!!

[tlvenn]

@rokob any update on your progress ?

[maxs15]

Still doesn't support react-native ?
This is crazy ! :(

[r3nya]

Waiting for https://github.com/rollbar/rollbar-react-native :)

[zyskowsk]

@rokob excited for this to be done :) (also hi from everyone over here !)

[rokob]

Sorry for the delay on this, we made the decision to block this on some improvements to our Android notifier (namely rewriting the Java notifier and building a new Android one on top of, which was the last couple weeks: rollbar/rollbar-java#66). That is now doneish, so I am anticipating taking care of this react-native issue quickly.

The plan is to have a new library: https://github.com/rollbar/rollbar-react-native which has rollbar.js, rollbar-ios, and rollbar-android as dependencies.

Getting rollbar.js and rollbar-android into a solid place to rely on them for react-native seemed like an opportunity to kill two birds so that was proritized over this issue. rollbar-ios could probably use some love too, but that will come after react-native.

Hey @zyskowsk, you guys using react-native? Bonjour to everyone over there, looks like things are going well.

[zyskowsk]

Everyone says bonjour back @rokob! Yup, we released iOS/android apps built on react-native in september. We are on bugsnag right now but will move over as soon as this is ready :)

[gregblass]

Just wanted to state that there are lots of people out there using Expo - which prevents us from using libraries that require native linking. If the rollbar integration could avoid using native linking, that would be ideal! Or at least have an option not to.

[rgangopadhya]

I use rollbar without linking:

import rollbar from 'rollbar/src/react-native/rollbar';
export const Rollbar = new rollbar({
  accessToken: ENV.ROLLBAR_TOKEN,
  captureUncaught: true,
  payload: {
     ...
  }
});

I believe this is necessary since the standard rollbar client relies on document. This works great except sourcemaps don't work -- as mentioned above, Expo generates sourcemaps with sections. Would be great if Rollbar supported those.

[rokob]

We are working on getting sectioned source maps working right now.

[rivkahstandig3636]

Please check out https://github.com/rollbar/rollbar-react-native for react-native support.

[rgangopadhya]

@rivkahstandig3636 @rokob I also notice that telemetry support, specifically autoInstrument, is missing here. Would be super helpful to be able to see recent activity before an error. Any plans to support this for react native?

[rokob]

Once we solidify what makes sense to instrument on mobile devices we intend to support telemetry. We could add manual events sooner than that, not sure on the timeline of that however.