How to Use Sentry in a Next.js App for Real Time Error Tracking and Performance Monitoring

As developers, we've all faced the dreaded reality of a bug slipping through the cracks and into production. These bugs can lead to frustrating experiences for end users, damage credibility, and even result in lost business. No one wants to be the developer whose product breaks in the wild. Our goal is always to ship software that's stable, seamless, and polished.

The challenge? Catching these bugs after deployment is often harder than it seems. In many cases, we're completely unaware of an issue unless a user takes the time to report it — and even then, the report may be vague, missing key details like device type, browser version, or the exact steps that led to the failure.

That's where Sentry.io comes in.

Sentry.io is a powerful application monitoring tool that helps developers identify, diagnose, and fix issues in real time across frontend, backend, and mobile applications. With features like detailed error tracking, performance monitoring, and session replay, Sentry makes it easy to catch and understand problems before they impact users.

Recently, I integrated Sentry into an IT ticketing application I'm building with Next.js. The process was straightforward, and I was impressed by how quickly I could gain insights into the app's health. In this post, I'll walk you through what Sentry is, its key features, and how to set it up in a Next.js application. By the end, you'll see how Sentry can help you catch bugs like a pro and improve your application's reliability.

What Is Sentry?

Sentry is an open-source error tracking and performance monitoring platform that provides real-time insights into application issues. It captures errors, exceptions, and performance bottlenecks, allowing developers to quickly identify and resolve problems before they affect users. Sentry supports a wide range of programming languages and frameworks, making it versatile for a variety of tech stacks.

Key Features of Sentry

Sentry comes with powerful features that make tracking and resolving issues a breeze.

1. Error Monitoring

• Automatically captures unhandled exceptions and errors.
• Displays stack traces, affected users, browsers, environments, etc.
• Groups similar errors together and allows you to triage them efficiently.

2. Performance Monitoring

• Tracks slow API calls, frontend load times, and database queries.
• Helps identify bottlenecks and optimize response times.

3. Session Replay

• Replays user sessions so you can see what actions led up to an error (clicks, page views, etc.).

4. Integrations

• Works with many frameworks and languages (JavaScript, React, Node.js, Python, PHP, etc.).
• Easily integrates with tools like GitHub, Slack, Jira, and more for streamlined issue tracking and notifications.

5. Issue Resolution Workflow

• Assign issues to team members.
• Mark issues as resolved or ignored.
• Track regressions when issues reoccur.

Why Use Sentry for Error Tracking in Next.js?

Next.js introduces advanced rendering techniques like Server-Side Rendering (SSR) and Incremental Static Regeneration (ISR), which can add complexity to debugging and monitoring. Here's why Sentry is especially useful in this tech stack:

• SSR and ISR can fail silently without a proper error monitoring system.
• You don't want users to be the first to discover bugs.
• Sentry provides full-stack visibility: client side, API routes, and server side.

Getting Started With Sentry

1. Visit sentry.io and sign up or log in to your account.
2. Create a new project, selecting Next.js as the platform.

Setting Up Sentry in a Next.js Project

1. Run the Sentry wizard

Execute the command in your project's root directory:

npx @sentry/wizard -i nextjs

2. Configure Sentry

The wizard will prompt you with setup questions and automatically generate configuration files like:

• sentry.client.config.ts
• sentry.server.config.ts
• Sample route and page (/sentry-example-page)

3. Save Your Environment Variables

Make sure you save the SENTRY_AUTH_TOKEN from the wizard or from the generated .env.sentry-build file into your .env.

4. Verify Your Setup

• Open the generated example page /sentry-example-page in your browser.
• Click the "Throw Sample Error" button.
• Go to your project dashboard in Sentry and view the new error under the Issues tab.
• After you've verified that Sentry is working you may delete the sample pages.

Capture Errors and Exceptions with Sentry in Next.js

Sentry offers serveral methods for manual error and event reporting.

captureMessage()

Use Sentry.captureMessage() to send custom log messages or warnings:

import * as Sentry from '@sentry/nextjs';

Sentry.captureMessage('This is a custom message', 'info');

Log levels include: fatal, error, warning, info, debug, and log. The default is info.

captureException()

Use Sentry.captureException() to manually report caught exceptions or errors. This is useful when you want to log an error that you catch in your code, rather than relying on automatic error tracking.

Example:

import * as Sentry from '@sentry/nextjs';

try {
  throw new Error('Something went wrong!');
} catch (error) {
  Sentry.captureException(error);
}

addBreadcrumb()

Use Sentry.addBreadcrumb() to manually log a breadcrumb — a small piece of information about an action or event that occurred before an error. These breadcrumbs are automatically attached to events like errors or messages, giving you valuable context when debugging issues in Sentry.

Example:

import * as Sentry from '@sentry/nextjs';

Sentry.addBreadcrumb({
  category: 'ui.click',
  message: 'User clicked Save button',
  level: 'info',
  data: { buttonId: 'save-btn' }
});

Breadcrumb Properties

Creating a Sentry Logging Helper Function

To streamline Sentry usage across your application, create a helper function in src/utils/sentry.ts. This centralizes manual Sentry logging in one function that can be placed throughout the app. This function will create a breadcrumb using Sentry.addBreadcrumb() and will either capture exception with Sentry.captureException() or capture message with Sentry.captureMessage() depending on if there is an error.

import * as Sentry from '@sentry/nextjs';

type LogLevel = 'fatal' | 'error' | 'warning' | 'info' | 'debug' | 'log';

export function logEvent(
  message: string,
  category: string = 'general',
  data?: Record<string, any>,
  level: LogLevel = 'info',
  error?: unknown
) {
  Sentry.addBreadcrumb({
    category,
    message,
    data,
    level
  });

  if (error) {
    Sentry.captureException(error, { extra: data });
  } else {
    Sentry.captureMessage(message, level);
  }
}

Use the logEvent() function like this:

import { logEvent } from 'src/utils/sentry';

try {
  throw new Error('Something went wrong!');
} catch (error) {
  logEvent(
    'Error occurred while doing something',
    'some.category',
    { some: 'data' },
    'error',
    error
  );
}

Conclusion

Sentry is a powerful tool that helps developers detect and fix bugs before they impact users. With real time error tracking, performance insights, and session replay, it provides the context you need to maintain a reliable and responsive application. Integrating Sentry into your Next.js application is quick and pays dividends in long term maintenance and user satisfaction.

If you're building in production, I highly recommend giving Sentry a try.

For more details and advanced usage, check out Sentry's official documentation.