---
description: >-
  Take action on broken lines of code, crashes, and busted API calls with the
  only developer-first app monitoring platform built to give you answers - not
  clues.
---

# Sentry

## Overview

[Sentry](https://sentry.io/welcome/) is an open-source error tracking and monitoring tool that helps developers identify and fix issues in their applications. It provides real-time insights into the health and performance of your applications by collecting and analyzing error messages, exceptions, and performance metrics.

## How to use

Here we use Sentry. The installation method is as follows below.

{% hint style="info" %}
[The official Sentry documentation](https://docs.sentry.io/platforms/javascript/guides/react/)
{% endhint %}

### Step 1: **Create a Sentry account**

If you haven't already, create a Sentry account at sentry.io. After signing up, you'll be taken to your dashboard.

### Step 2: Install Sentry **SDK**

install the required Sentry dependencies. Use the following command to install the Sentry packages using npm or yarn.

```bash
yarn add @sentry/react @sentry/tracing
```

### Step 3: **Create a new Sentry project**

On your Sentry dashboard, create a new project by clicking the "Create Project" button. Choose your project name, platform, and organization, and click "Create Project".

### Step 4: **Configure Sentry in your app**

In your app, create a new file called `sentry.client.config.ts` in the `src/services/sentry` directory. Add the following code to the file:

```typescript
import * as Sentry from '@sentry/react';
import { Integrations } from '@sentry/tracing';

const SENTRY_DSN = process.env.NEXT_PUBLIC_SENTRY_DSN;

const sentryOptions = {
  dsn: SENTRY_DSN,
  integrations: [
    new Integrations.BrowserTracing(),
  ],
  tracesSampleRate: 1.0,
};

Sentry.init(sentryOptions);
```

Replace `<your Sentry DSN>` with the DSN for your Sentry project, which you can find on your project's settings page in Sentry.

Next, create a new file called `sentry.server.config.ts` in the `src/services/sentry` directory. Add the following code to the file:

```typescript
import * as Sentry from '@sentry/node';
import { RewriteFrames } from '@sentry/integrations';

const SENTRY_DSN = '<your Sentry DSN>';

const sentryOptions = {
  dsn: SENTRY_DSN,
  integrations: [
    new RewriteFrames({
      iteratee: (frame) => {
        // Strip out the Next.js build directory from the stack trace
        frame.filename = frame.filename.replace(
          process.cwd(),
          'app:///'
        );
        return frame;
      },
    }),
  ],
};

Sentry.init(sentryOptions);
```

Again, replace `<your Sentry DSN>` with the DSN for your Sentry project.

### Step 5: Add environment variable for firebase

We need update your `.env` data files.

```
NEXT_PUBLIC_SENTRY_DSN=<your Sentry DSN>
```

### Step 6: **Set up error tracking in your app**

In your `_app.tsx` file, add the following code at the top of the file:

```typescript
import { withSentry } from '@sentry/nextjs';

const MyApp = ({ Component, pageProps }) => {
  return <Component {...pageProps} />;
};

export default withSentry(MyApp);
```

This wraps your app with the `withSentry` higher-order component, which automatically tracks errors and performance data in your app.

### Step 7: **Verify that Sentry is working**

To verify that Sentry is set up correctly in your app, you can throw an error in your app and check that it appears in your Sentry dashboard. For example, you can add the following code to any page in your app:

```typescript
throw new Error('Test Sentry error');
```

After you trigger the error, go to your Sentry dashboard and verify that the error.
