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

Automatic Configuration 🛠

npx @sentry/wizard -i nextjs

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.

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.

/** @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 );

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);

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);

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>

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

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.