Support for React Native for Web

[daxfrost]

The above is an error when running the React Native app on the web.

When the consuming application is supporting React Native for Web, it would be great if there was handling for this by bundling your regular javascript web SDK and/or piping Platform specific API calls to this instead - or simply avoiding calls to the native layer depending on how your JS layer is already working - many React Native 3rd party libraries are starting to handle React Native for Web, otherwise consumers must handle both your web & react native SDKs with their own separation layer.

Do you have a solution for this already that I am missing?

Thank you for your great work so far!

[daxfrost]

Assuming the Rollbar.js is the same as the one used for web, I am going to try make a PR and suggest it to you.

[waltjones]

@daxfrost Thank you.

The plan, unless there are problems with this approach, is to add the uncaught error handling to the react-native target of https://github.com/rollbar/rollbar.js. Then rollbar.js (the package, not the file) can be used directly for web-only, instead of using rollbar-react-native. See comments here:
#74

[daxfrost]

Hi @waltjones, correct my understanding here - but the hope I have is that we only require a single rollbar dependency (rollbar-react-native) for supporting native apps, but fallback to rollbar.js / web version by simply avoiding native code in this package, if react native for web is the output for the project consuming rollbar.

When you refer to:

"Then rollbar.js (the package, not the file) can be used directly for web-only, instead of using rollbar-react-native."

Are you suggesting that we'd use 2 separate dependencies for the consuming project, i.e: rollbar-react-native as well as rollbar.js?

[daxfrost]

Sorry, I re-read this, and through the other thread think I understand now.

[waltjones]

@daxfrost I'm looking at the example here: https://github.com/necolas/react-native-web

For react-native-web, is there any reason one shouldn't just use the browser target of rollbar.js?

import Rollbar from 'rollbar';

const rollbar = Rollbar.init({ /* config... */});

// etc.

Now that I'm seeing ErrorUtils isn't used, it seems like it is just a browser app with import {} from 'react-native' included. Am I missing something?

[rafakwolf]

same here

[waltjones]

Hi @rafakwolf , can you try using the Rollbar.js package, e.g. npm install rollbar instead of rollbar-react-native. https://github.com/rollbar/rollbar.js

That package has the correct error capture interface for web (vs native), and doesn't expect dependencies like ErrorUtils.

Import and initialize should look like this:

import Rollbar from 'rollbar';

const rollbar = Rollbar.init({
    accessToken: "POST_CLIENT_ITEM_ACCESS_TOKEN",
    captureUncaught: true,
    captureUnhandledRejections: true
});

// etc.

[waltjones]

v1.0.0-beta.0 is now available. https://github.com/rollbar/rollbar-react-native/releases/tag/v1.0.0-beta.0

This is expected to be fully compatible with iOS build targets, as well as web-only targets and @rollbar/react. Please report any issues. Note that there are breaking changes between v0.9.3 and this 1.0.0 beta. See the updated SDK guide and the migration guide for details.

[camsjams]

Hi @waltjones

Catching up on this.

So for a project like described where it should support react-native (Android and iOS) and a react-native-web build (typical browser) in same codebase, what is the recommendation now?

Should we use the rollbar npm package or rollbar-react-native?

[waltjones]

Use rollbar-react-native.

The v1.0.0 beta supports all targets with one config. https://docs.rollbar.com/docs/react-native#javascript

When it detects the web target it will use rollbar.js, and will not attempt any native initialization. The documented rollbar-react-native methods are available on the rollbar object, same as the native initialization. If or when needed , the rollbar.js instance is available at rollbar.rollbar.

[camsjams]

Thanks!