Search code examples
androidreactjsreact-nativesentryreact-native-sentry

Sentry React Native intialisation without setup wizard

It is necessary to run sentry setup wizard inorder to use sentry in react native app. I dont need all the functionalies, only error handling .

Can I just install @sentry/react-native package and use the Sentry.ErrorBoundary ?

I tried referring to youtube tutorials ,referring to documentation and referring to blogs.

Solution

  • You can run @sentry/wizard and then disable performance. The wizard at the current version 3.4.0 doesn't add any extras for performance.

    Run wizard by:

    npx @sentry/wizard@latest -s -i reactNative

    If you wish to setup the project manually you can do that by following these steps in the Sentry docs https://docs.sentry.io/platforms/react-native/manual-setup/manual-setup/. Not that besides the code, you also need to Build Phase to the Xcode project and sentry.gradle to your app/build.gradle if you want to get automatic source maps upload to see symbolicated stack traces with the errors. (That means to see your code and files instead of the minified bundle code.)

    Short summary here (for current version @sentry/[email protected]):

    yarn add @sentry/react-native@latest --save

    Your App.tsx

    import * as Sentry from "@sentry/react-native";

Sentry.init({
  dsn: "__YOUR_DSN__",

  enableTracing: false // to disable performance
});

// ...

export default Sentry.wrap(App);

    Then you can use the ErrorBoundary like this:

    import React from "react";
import * as Sentry from "@sentry/react";

<Sentry.ErrorBoundary fallback={<p>An error has occurred</p>}>
  <Example />
</Sentry.ErrorBoundary>;

// or

Sentry.withErrorBoundary(Example, { fallback: <p>an error has occurred</p> });

    More detailed information on https://docs.sentry.io/platforms/javascript/guides/react/features/error-boundary/