DEV Community

Cover image for Sentry with Next.js
Akilesh
Akilesh

Posted on • Updated on

Sentry with Next.js

" This article is published using Lamento🍋

Sentry is a crash reporting platform that provides you with "real-time insight into production deployments with info to reproduce and fix crashes".

In this blog we will see how to integrate sentry into an existing next.js application.

Installing 📥

Add Sentry’s Next.js SDK to your next.js projects.

yarn add @sentry/nextjs
Enter fullscreen mode Exit fullscreen mode

Automatic Configuration 🛠

npx @sentry/wizard -i nextjs
Enter fullscreen mode Exit fullscreen mode

Choose your project from below listed options on your CLI then the setup wiz will automatically create configuration file's with default values and your API key.

Image description

Generated file's:

  • sentry.client.config.js
  • sentry.server.config.js
  • .sentryclirc (Where the token key will be stored)
  • sentry.properties
  • next.config.wizardcopy.js (if next.config.js already exists).

Modify next.config.js 🔧

If next.config.js does already exist in your project, the app will automatically create a next.config.wizardcopy.js then we'll need to manually copy the snippet into next.config.js.

Image description

/** @type {import('next').NextConfig} */
const { withSentryConfig } = require( '@sentry/nextjs' );

const nextConfig = {
  reactStrictMode: true
}

const sentryWebpackPluginOptions = {
  // Additional config options for the Sentry Webpack plugin. Keep in mind that
  // the following options are set automatically, and overriding them is not
  // recommended:
  //   release, url, org, project, authToken, configFile, stripPrefix,
  //   urlPrefix, include, ignore

  silent: true, // Suppresses all logs
  // For all available options, see:
  // https://github.com/getsentry/sentry-webpack-plugin#options.
};

module.exports = withSentryConfig( nextConfig, sentryWebpackPluginOptions );
Enter fullscreen mode Exit fullscreen mode

Backend 🔙

In an application to capture errors and monitor server performance of the API, we will wrap the handlers with a Sentry function.

Syntax:

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

const handler = async (req, res) => {
  // your API calls...
}

export default withSentry(handler);
Enter fullscreen mode Exit fullscreen mode

Reference:

import type { NextApiRequest, NextApiResponse } from "next"
import { withSentry } from "@sentry/nextjs";

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  res.status(200).json({ name: "Akilesh" });
};

export default withSentry(handler);
Enter fullscreen mode Exit fullscreen mode

Testing 🧪

To check every thing works fine, we will trigger a button click event in a frontend component that throws an error.

            <button type="button" onClick={() => {
              throw new Error("Sentry Frontend Error");
            }}>
              Throw error
            </button>
Enter fullscreen mode Exit fullscreen mode

Image description

Now check your sentry dashboard to know more about the errors and performance metrics.

Image description

Deployment (Vercel) 🛫

Assuming that your next.js project has deployed on vercel.

Add environment variable to your project in vercel Project Settings > General > Environment Variables

SENTRY_AUTH_TOKEN: in environment variable with your sentry auth token which will be present in your .sentryclirc file.

You have successfully integrated sentry with your web application 🥳. To get notified 🔔 in your Slack and Vercel integration check out this post.

Top comments (1)