Notes

Integrating Sentry with a React Native app built using Expo

Edit on GitHub

ReactJS
2 minutes

Install the package

1npm i sentry-expo

Initialize Sentry as soon as possible before loading your React Native app

 1/*
 2App.jsx or App.tsx
 3*/
 4import * as Sentry from 'sentry-expo'
 5import Constants from 'expo-constants'
 6
 7Sentry.init({
 8  dsn: 'DSN link goes here',
 9  enableInExpoDevelopment: true, // disabled by default. if false, all your dev/local errors will be ignored and only app releases will report errors to Sentry, Sentry.captureException() will be no-op
10  debug: true
11})
12
13if (!__DEV__) {
14  // revisionId is not available in the manifest when running in development mode (using Expo CLI), defaulting to undefined.
15  Sentry.setRelease(Constants.manifest.revisionId)
16}

Now you can use Sentry anywhere in your app. Example usage:

1Sentry.setTag('sampleTag', 'tag-value')
2Sentry.setExtra('sampleExtra', 'extra-value')
3Sentry.addBreadcrumb({ message: 'breadcrumb-message' })
4Sentry.captureMessage('Salam Sentry!')
5Sentry.captureException(new Error('Test Error from React Native'))

In order to be able to use source maps and get improved error tracking and monitoring, upload your source maps to Sentry. This can be easily done by adding a postPublish hook in app.json.

 1/*
 2app.json
 3*/
 4
 5{
 6  "expo": {
 7    // ... your existing configuration
 8
 9    "hooks": {
10      "postPublish": [
11        {
12          "file": "sentry-expo/upload-sourcemaps",
13          "config": {
14            "organization": "my-organization",
15            "project": "my-awesome-project",
16            "authToken": "your auth token here",
17            "url": "your sentry url here" // OPTIONAL- only necessary when self-hosting Sentry
18          }
19        }
20      ]
21    }
22  }
23}