React Native

Features:

• Automatic Native Crash Error Tracking (using both sentry-cocoa & sentry-android)
• Offline storage of events
  • Android: Offline caching when a device is offline; we send a report once the application is restarted
  • iOS: Offline caching when a device is unable to connect; we send a report once we receive another event
• Events enriched with device data
• Source Context shows snippets of your code around the location of stack frames
• Autolinking
• Breadcrumbs created for outgoing http request with XHR and Fetch; UI and system events; and console logs
• Release health tracks crash free users and sessions
• Performance Monitoring creates transactions automatically for:
  • App Start time
  • Routing Instrumentation (React Navigation v4 and above and React Native Navigation)
  • XHR and Fetch requests
  • User Interaction events (touch, gesture)
  • Slow and Frozen frames tracking
  • Stall Tracking of the JavaScript loop
  • React Profiler tracks React components
• Under the hood the SDK relies on our JavaScript SDK, which makes all functions available for JavaScript also available in this SDK
• On Device symbolication for JavaScript (in Debug)
• RAM bundle support
• Hermes support
• Expo support out of the box
• Attachments enrich your event by storing additional files, such as config or log files.
• User Feedback provides the ability to collect user information when an event occurs.
• View Hierarchy shows the structure of native components at the time an error occurred.

On this page, we get you up and running with Sentry's SDK.

Don't already have an account and Sentry project established? Head over to sentry.io, then return to this page.

If you prefer to follow video instructions, see How to Install the Sentry React Native SDK in 60 Seconds.

Install

Sentry captures data by using an SDK within your application’s runtime.

Run @sentry/wizard:

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

Sentry Wizard will patch your project accordingly, though you can set up manually if you prefer. You only need to patch the project once. Then you can add the patched files to your version control system. The following tasks will be performed by the Sentry Wizard:

• Install the @sentry/react-native package.
• Enable the Sentry React Native Gradle build step for Android to auto-upload generated source maps and debug symbols.
• Wrap the Bundle React Native code and images Xcode project build phase script to upload generated source maps and collect bundled node modules.
• Add Upload Debug Symbols to Sentry Xcode project build phase.
• Run pod install.
• Store build credentials in ios/sentry.properties and android/sentry.properties.
• Configure Sentry for the supplied DSN in your App.tsx file.

Expo

If you're using Expo, read our docs to learn how to add Sentry to your Expo project. This SDK will work for both managed and bare projects.

iOS Specifics

When you use Xcode, you can hook directly into the build process to upload debug symbols and source maps.

Android Specifics

For Android, we hook into Gradle for the source map build process. When you run react-native link, the Gradle files are automatically updated. When you run ./gradlew assembleRelease or ./gradlew bundleRelease, source maps are automatically built and uploaded to Sentry.

If you have enabled Gradle's org.gradle.configureondemand feature, you'll need a clean build, or you'll need to disable this feature to upload the source map on every build.

To disable this feature, set org.gradle.configureondemand=false or remove it as its default value is disabled, do this in the gradle.properties file.

Configure

Configuration should happen as early as possible in your application's lifecycle.

Initialize

To initialize the SDK, you need to call:

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

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",

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

Once this is done, all unhandled exceptions will be automatically captured by Sentry. You can also perform the following optional steps:

Wrap Your App

Wrap your app with Sentry to automatically instrument it with touch event tracking and automatic performance monitoring:

export default Sentry.wrap(App);

Enable Performance Monitoring

Learn how to enable Sentry's performance monitoring in your SDK to help you track your application performance, measuring metrics like throughput and latency.

Ensure Promise Rejection Handling is Active

Due to an issue with React Native's dependencies, unhandled promise rejections might not be correctly caught by Sentry. If the rejection handling is not active, our SDK might issue a warning:

WARN: Unhandled promise rejections might not be caught by Sentry. Read about how to fix this on our troubleshooting docs.

Visit our troubleshooting section to read on how to make sure promise rejection handling is active.

Add Readable Stack Traces to Errors

Depending on how you've set up your project, the stack traces in your Sentry errors probably don't look like your actual code.

For information on source maps and how to upload them, head over to our Source Maps documentation.

Verify

This snippet includes an intentional error, so you can test that everything is working as soon as you set it up.

throw new Error("My first Sentry error!");

Or, try a native crash:

Sentry.nativeCrash();

To view and resolve the recorded error, log into sentry.io and open your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved.