Skip to content
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 for Web #120

Open
daxfrost opened this issue May 15, 2020 · 11 comments
Open

Support for React Native for Web #120

daxfrost opened this issue May 15, 2020 · 11 comments

Comments

@daxfrost
Copy link

daxfrost commented May 15, 2020

image

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
Copy link
Author

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
Copy link
Contributor

@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
Copy link
Author

daxfrost commented May 18, 2020

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
Copy link
Author

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

@waltjones
Copy link
Contributor

@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
Copy link

same here
image

@waltjones
Copy link
Contributor

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 waltjones mentioned this issue Jun 28, 2023
1 task
@waltjones
Copy link
Contributor

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
Copy link

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
Copy link
Contributor

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
Copy link

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants