Bugs can be really cool, but not when it comes to your app.
That's where sentry-expo
comes in! Keep a close eye on your app, whether it's in development, staging, or production, by getting real-time insight into errors and bugs. That way, you can quickly reproduce, fix, and re-deploy!
Hey- before you actually use Sentry, make sure you've created a Sentry project. How do you do that? Open this drop-down to find out!
🚨 Creating a Sentry project
Before getting real-time updates on errors and making your app generally incredible, you'll need to follow these steps:
- Sign up for Sentry (it's free), and create a project in your Dashboard. Take note of your organization name, and project name.
- Take note of your
DSN
, you'll need it later - Go to the Sentry API section, and create an auth token (Ensure you have
project:write
selected under scopes). Save this, too.
Once you have each of these: organization name, project name, DSN, and auth token, you're all set!
In your project directory, run
expo install sentry-expo
If you don't have
expo-cli
installed, you should! But you can also just install withyarn add sentry-expo
.
Add the following to your app's main file (usually App.js
):
import * as Sentry from 'sentry-expo';
Sentry.init({
dsn: 'YOUR DSN HERE',
enableInExpoDevelopment: true,
debug: true, // If `true`, Sentry will try to print out useful debugging information if something goes wrong with sending the event. Set it to `false` in production
});
Add the expo.hooks
object to your project's app.json
(or app.config
) file:
{
"expo": {
// ... your existing configuration
"hooks": {
"postPublish": [
{
"file": "sentry-expo/upload-sourcemaps",
"config": {
"organization": "your sentry organization's short name here",
"project": "your sentry project's name here",
"authToken": "your auth token here"
}
}
]
}
}
}
If you're using the bare workflow, or using a plain React Native app, you should also follow these quick steps to finish up your setup
All done! For more information on customization and additional features, read the full guide on using Sentry in Expo apps in our docs ➡️ "Using Sentry".
Setting up sentry-expo
in the bare workflow requires just a few extra steps in addition to those listed above:
-
Run
yarn add @sentry/react-native
, followed bynpx pod-install
. -
Run
yarn sentry-wizard -i reactNative -p ios android
. This will automatically configure your native Android & iOS projects -
The previous step will add an extra
import * as Sentry from '@sentry/react-native'; Sentry.init({ dsn: 'YOUR DSN', });
to your root project file (usually App.js
), so make sure you remove it (but keep the sentry-expo
import and original Sentry.init
call!)
With expo-updates
, release builds of both iOS and Android apps will create and embed a new update from your JavaScript source at build-time. This new update will not be published automatically and will exist only in the binary with which it was bundled. Since it isn't published, the sourcemaps aren't uploaded in the usual way like they are when you run expo publish
(actually, we are relying on Sentry's native scripts to handle that). Because of this you have some extra things to be aware of:
- Your
release
will automatically be set to Sentry's expected value-${bundleIdentifier}@${version}+${buildNumber}
(iOS) or${androidPackage}@${version}+${versionCode}
(Android). - Your
dist
will automatically be set to Sentry's expected value-${buildNumber}
(iOS) or${versionCode}
(Android). - The configuration for build time sourcemaps comes from the
ios/sentry.properties
andandroid/sentry.properties
files. For more information, refer to Sentry's documentation.
Please note that configuration for
expo publish
andexpo export
is still done viaapp.json
.
Skipping or misconfiguring either of these will result in sourcemaps not working, and thus you won't see proper stacktraces in your errors.
Note: There seems to be a possible bug with
sentry-react-native
which results in Android sourcemaps not working appropriately. If you run into this issue in the bare workflow, something that seems to help remedy the issue is setting the release (usingSentry.Native.setRelease
) after runningSentry.init
.
If you're self-hosting your Over the Air Updates (this means you run expo export
instead of expo publish
), you need to:
- replace
hooks.postPublish
in yourapp.json
file withhooks.postExport
(everything else stays the same) - add the
RewriteFrames
integration to yourSentry.init
call like so:
Sentry.init({
dsn: SENTRY_DSN,
enableInExpoDevelopment: true,
integrations: [
new RewriteFrames({
iteratee: (frame) => {
if (frame.filename) {
// the values depend on what names you give the bundle files you are uploading to Sentry
frame.filename = Platform.OS === 'android' ? 'app:///index.android.bundle' : 'app:///main.jsbundle';
}
return frame
},
}),
],
})
If you like sentry-expo
and want to help make it better then please feel free to open a PR! Make sure you request a review from one of our maintainers 😎