🤖Sentry

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.

Overview

Sentry 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.

The official Sentry documentation

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.

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:

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:

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:

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:

throw new Error('Test Sentry error');

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