Sentry - Supersaas Docs

Sentry is a powerful tool that helps monitor and fix errors in your application. Integrating Sentry can significantly enhance your debugging process and improve the overall user experience.

Getting Started with Sentry

Sign Up for Sentry:
- Create an account on Sentry (the free tier supports up to 5,000 events per month).
- Create a new project in your Sentry Dashboard.
- Take note of the following details, as you'll need them later:
  - Organization Slug: Found in your Organization settings tab.
  - Project Name: Available in your project's Settings > Projects tab.
  - DSN: Located in your project's Settings > Projects > Project name > Client Keys (DSN) tab.

Update Environment Variables:

Modify the following environment variables in your .env file:

EXPO_PUBLIC_SENTRY_DSN=
EXPO_PUBLIC_SENTRY_ORG_NAME=
EXPO_PUBLIC_SENTRY_PROJECT_NAME=
SENTRY_AUTH_TOKEN=

Install the Sentry Package:
- Run the following command to install the Sentry package:
```
npx expo install @sentry/react-native
```

Initialize Sentry in Your App:

Open src/app/_layout.tsx and add the following code to initialize Sentry:

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

Sentry.init({
  dsn: process.env.EXPO_PUBLIC_SENTRY_DSN,
  debug: false, // Set to `true` for debugging information; use `false` in production.
});

Create the Metro Configuration File:

In the root of your project, create a file named metro.config.js with the following content:

const { getSentryExpoConfig } = require("@sentry/react-native/metro");

const config = getSentryExpoConfig(__dirname);

module.exports = config;

Update the App Configuration:

Modify the app.config.ts file to include the Sentry plugin in the plugins section:

[
  {
    "name": "@sentry/react-native/expo",
    "url": "https://sentry.io/",
    "project": process.env.EXPO_PUBLIC_SENTRY_PROJECT_NAME,
    "organization": process.env.EXPO_PUBLIC_SENTRY_ORG_NAME
  }
]