New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for React-Native #185

Closed
respectTheCode opened this Issue Mar 17, 2016 · 28 comments

Comments

Projects
None yet
@respectTheCode
Copy link

respectTheCode commented Mar 17, 2016

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

@antoinerousseau

This comment has been minimized.

@dozoisch

This comment has been minimized.

Copy link

dozoisch commented Jun 14, 2016

Same situation here!

@c-h-

This comment has been minimized.

Copy link

c-h- commented Jul 13, 2016

Same here!

@erickreutz

This comment has been minimized.

Copy link

erickreutz commented Sep 21, 2016

We need this!

@antoinerousseau

This comment has been minimized.

Copy link

antoinerousseau commented Oct 13, 2016

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

This comment has been minimized.

Copy link

antoinerousseau commented Oct 14, 2016

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

@respectTheCode

This comment has been minimized.

Copy link

respectTheCode commented Oct 14, 2016

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

@antoinerousseau

This comment has been minimized.

Copy link

antoinerousseau commented Oct 14, 2016

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

@brianr

This comment has been minimized.

Copy link
Contributor

brianr commented Oct 14, 2016

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

This comment has been minimized.

Copy link

tarr11 commented Oct 30, 2016

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

@skylarmb

This comment has been minimized.

Copy link

skylarmb commented Nov 16, 2016

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

@rokob rokob self-assigned this Feb 10, 2017

@rokob

This comment has been minimized.

Copy link
Contributor

rokob commented Feb 17, 2017

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

This comment has been minimized.

Copy link

cdesch commented Apr 23, 2017

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

@dmazin

This comment has been minimized.

Copy link

dmazin commented Jun 30, 2017

please friends I need this

@bmishkin

This comment has been minimized.

Copy link

bmishkin commented Jul 19, 2017

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

@symptomatik

This comment has been minimized.

Copy link

symptomatik commented Aug 9, 2017

Would love this, please and thank you!!

@tlvenn

This comment has been minimized.

Copy link

tlvenn commented Aug 24, 2017

@rokob any update on your progress ?

@maxs15

This comment has been minimized.

Copy link

maxs15 commented Aug 31, 2017

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

@r3nya

This comment has been minimized.

Copy link

r3nya commented Sep 26, 2017

@zyskowsk

This comment has been minimized.

Copy link

zyskowsk commented Oct 12, 2017

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

@rokob

This comment has been minimized.

Copy link
Contributor

rokob commented Oct 12, 2017

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

This comment has been minimized.

Copy link

zyskowsk commented Nov 2, 2017

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

This comment has been minimized.

Copy link

gregblass commented Nov 7, 2017

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

This comment has been minimized.

Copy link

rgangopadhya commented Nov 10, 2017

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

This comment has been minimized.

Copy link
Contributor

rokob commented Nov 10, 2017

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

@rivkahstandig3636

This comment has been minimized.

Copy link
Contributor

rivkahstandig3636 commented Dec 5, 2017

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

@rgangopadhya

This comment has been minimized.

Copy link

rgangopadhya commented Dec 5, 2017

@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

This comment has been minimized.

Copy link
Contributor

rokob commented Dec 5, 2017

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment