@sentry/react-native

What is @sentry/react-native?

@sentry/react-native is a comprehensive error tracking and performance monitoring tool for React Native applications. It helps developers capture and report errors, monitor application performance, and gain insights into issues affecting their apps.

What are @sentry/react-native's main functionalities?

Error Tracking

This feature allows you to capture and report errors in your React Native application. The code sample initializes Sentry with a DSN and captures an exception.

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

Sentry.init({
  dsn: 'https://[e-mail]/0',
});

try {
  throw new Error('Test error');
} catch (error) {
  Sentry.captureException(error);
}

Performance Monitoring

This feature allows you to monitor the performance of your application. The code sample initializes Sentry with a DSN and a traces sample rate, then starts and finishes a transaction.

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

Sentry.init({
  dsn: 'https://[e-mail]/0',
  tracesSampleRate: 1.0,
});

const transaction = Sentry.startTransaction({
  name: 'test-transaction',
});

setTimeout(() => {
  transaction.finish();
}, 2000);

Breadcrumbs

Breadcrumbs are used to record events that lead up to an error. The code sample initializes Sentry and adds a breadcrumb for a user login event.

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

Sentry.init({
  dsn: 'https://[e-mail]/0',
});

Sentry.addBreadcrumb({
  category: 'auth',
  message: 'User logged in',
  level: Sentry.Severity.Info,
});

User Feedback

This feature allows users to provide feedback when an error occurs. The code sample initializes Sentry and shows a report dialog for user feedback.

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

Sentry.init({
  dsn: 'https://[e-mail]/0',
});

Sentry.showReportDialog({
  title: 'Feedback',
  subtitle: 'Please describe what you were doing when the error occurred.',
  labelName: 'Name',
  labelEmail: 'Email',
  labelComments: 'Comments',
  labelSubmit: 'Submit',
  successMessage: 'Thank you for your feedback!',
});

Other packages similar to @sentry/react-native

bugsnag-react-native

Bugsnag provides error monitoring and crash reporting for React Native applications. It offers similar functionalities to Sentry, such as error tracking, performance monitoring, and user feedback. Bugsnag is known for its user-friendly interface and detailed error reports.

instabug-reactnative

Instabug provides comprehensive bug and crash reporting for React Native applications. It offers similar functionalities to Sentry, including error tracking, performance monitoring, and user feedback. Instabug is known for its in-app feedback and bug reporting capabilities, which allow users to report issues directly from the app.

README

Bad software is everywhere, and we're tired of it. Sentry is on a mission to help developers write better software faster, so we can get back to enjoying technology. If you want to join us Check out our open positions

Sentry SDK for React Native

Releases

This repo uses the following ways to release SDK updates:

• Pre-release: We create pre-releases (alpha, beta, RC,…) for larger and potentially more impactful changes, such as new features or major versions.
• Latest: We continuously release major/minor/hotfix versions from the main branch. These releases go through all our internal quality gates and are very safe to use and intended to be the default for most teams.
• Stable: We promote releases from Latest when they have been used in the field for some time and in scale, considering time since release, adoption, and other quality and stability metrics. These releases will be indicated on the releases page with the Stable suffix.

Requirements

• react-native >= 0.65.0

Features

• Automatic JS Error Tracking (using @sentry/browser)
• Automatic Native Crash Error Tracking (using sentry-cocoa & sentry-android under the hood)
• Offline storage of events
• On Device symbolication for JS (in Debug)
• Autolinking
• Events with enriched device data
• RAM bundle support
• Hermes support
• Expo support
• RN New Architecture support

Installation and Usage

To install the package and setup your project:

npx @sentry/wizard -s -i reactNative

How to use it:

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

Sentry.init({
  dsn: "__DSN__",

  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,
});

Sentry.setTag("myTag", "tag-value");
Sentry.setExtra("myExtra", "extra-value");
Sentry.addBreadcrumb({ message: "test" });

Sentry.captureMessage("Hello Sentry!");

Upgrade

If you are coming from react-native-sentry which was our SDK < 1.0 you should follow the upgrade guide and then follow the install steps.

Blog posts

Introducing Mobile Screenshots and Suspect Commits.

Tips for Optimizing React Native Application Performance - Part 2: Using Sentry SDK for Performance Monitoring.

Tips for Optimizing React Native Application Performance: Part 1.

Tracking Stability in a Bluetooth Low Energy-Based React-Native App.

Mobile Vitals - Four Metrics Every Mobile Developer Should Care About.

Performance Monitoring Support for React Native.

Resources

• 
• 
• 
• 
• 
• 

Changelog

6.0.0

This is a new major version 6.0.0 of the Sentry React Native SDK. To upgrade from the SDK version 5, please follow our migration guide.

Major Changes

• React Native Tracing options were moved to the root options

  import * as Sentry from '@sentry/react-native';
  
  Sentry.init({
    tracesSampleRate: 1.0,
    enableAppStartTracking: true, // default true
    enableNativeFramesTracking: true, // default true
    enableStallTracking: true, // default true
    enableUserInteractionTracing: true, // default false
    integrations: [
      Sentry.reactNativeTracingIntegration({
        beforeStartSpan: (startSpanOptions) => {
          startSpanOptions.name = 'New Name';
          return startSpanOptions;
        },
      }),
      Sentry.appStartIntegration({
        standalone: false, // default false
      }),
    ],
  });
  

• New React Navigation Integration interface (#4003)

  import * as Sentry from '@sentry/react-native';
  import { NavigationContainer } from '@react-navigation/native';
  
  const reactNavigationIntegration = Sentry.reactNavigationIntegration();
  
  Sentry.init({
    tracesSampleRate: 1.0,
    integrations: [reactNavigationIntegration],
  });
  
  function RootComponent() {
    const navigation = React.useRef(null);
  
    return <NavigationContainer ref={navigation}
      onReady={() => {
        reactNavigationIntegration.registerNavigationContainer(navigation);
      }}>
    </NavigationContainer>;
  }
  

• Removed beforeNavigate use beforeStartSpan instead (#3998)

  • beforeStartSpan is executed before the span start, compared to beforeNavigate which was executed before the navigation ended (after the span was created)

Other Changes

• Add sentry.origin to SDK spans to indicated if spans are created by a part of the SDK or manually (#4066)

• Xcode Debug Files upload completes in foreground by default (#4090)

• Set parentSpanIsAlwaysRootSpan to true to make parent of network requests predictable (#4084)

• Remove deprecated enableSpotlight and spotlightSidecarUrl (#4086)

• tracePropagationTargets defaults to all targets on mobile and same origin on the web (#4083)

• Move _experiments.profilesSampleRate to profilesSampleRate root options object #3851)

• Native Frames uses spanId to attach frames replacing traceId (#4030)

• Removed deprecated ReactNativeTracing option idleTimeout use idleTimeoutMs instead (#3998)

• Removed deprecated ReactNativeTracing option maxTransactionDuration use finalTimeoutMs instead (#3998)

• New Native Frames Integration (#3996)

• New Stall Tracking Integration (#3997)

• New User Interaction Tracing Integration (#3999)

• New App Start Integration (#3852)

  • By default app start spans are attached to the first created transaction.
  • Standalone mode creates single root span (transaction) including only app start data.

• New React Native Navigation Integration interface (#4003)

  import * as Sentry from '@sentry/react-native';
  import { Navigation } from 'react-native-navigation';
  
  Sentry.init({
    tracesSampleRate: 1.0,
    integrations: [
      Sentry.reactNativeNavigationIntegration({ navigation: Navigation })
    ],
  });
  

Fixes

• TimeToDisplay correctly warns about not supporting the new React Native architecture (#4160)
• Native Wrapper method setContext ensures only values convertible to NativeMap are passed (#4168)
• Native Wrapper method setExtra ensures only stringified values are passed (#4168)
• setContext('key', null) removes the key value also from platform context (#4168)
• Upload source maps for all splits on Android (not only the last found) (#4125)

Dependencies

• Bump JavaScript SDK from v7.119.1 to v8.33.1 (#3910, #3851, #4078, #4154)
  • changelog
  • diff

Dependencies

• Bump Cocoa SDK from v8.37.0 to v8.38.0 (#4180)
  • changelog
  • diff