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
• 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:
  • Routing Instrumentation (React Navigation v4 and above and React Native Navigation)
  • XHR and Fetch requests
  • User Interaction events (touch, gesture)
• 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 package maintained by the Expo team
• 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.

Run @sentry/wizard:

npx @sentry/wizard -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 about How to Add Sentry to Your Expo Project. This SDK works 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. However, if you are using bitcode, you will need to disable the “Upload Debug Symbols to Sentry” build phase and then separately upload debug symbols from iTunes Connect to Sentry.

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.

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.

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

Or, try a native crash:

Sentry.nativeCrash();

Add Readable Stack Traces to Errors

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

To fix this, head over to our source maps documentation where you'll learn how to upload source maps, so you can make sense of your stack traces.