@sentry/nextjs

What is @sentry/nextjs?

The @sentry/nextjs package is a JavaScript SDK for Sentry that provides error tracking and performance monitoring specifically tailored for Next.js applications. It helps developers to automatically capture exceptions, track performance issues, and improve the reliability of their Next.js applications.

What are @sentry/nextjs's main functionalities?

Automatic Error Tracking

Automatically captures unhandled exceptions and errors in the Next.js application and sends them to Sentry for monitoring and analysis.

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

Sentry.init({ dsn: 'YOUR_DSN' });

Performance Monitoring

Enables performance monitoring to track the performance of server-side and client-side Next.js operations, providing insights into slow transactions and bottlenecks.

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

Sentry.init({
  dsn: 'YOUR_DSN',
  tracesSampleRate: 1.0
});

Custom Error Reporting

Allows developers to manually report custom errors or exceptions to Sentry, giving them control over what gets reported.

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

Sentry.captureException(new Error('Custom error message'));

Release Health Tracking

Tracks the health of releases by monitoring error rates and issues that affect end-users, helping developers to understand the impact of new releases.

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

Sentry.init({
  dsn: 'YOUR_DSN',
  release: 'my-project-name@1.0.0'
});

Other packages similar to @sentry/nextjs

bugsnag-js

Bugsnag provides error monitoring for JavaScript applications, including Next.js. It offers similar features to Sentry, such as automatic error detection, custom error reporting, and release tracking. However, Bugsnag's interface and integrations may differ from Sentry's.

raygun4js

Raygun offers real-time error tracking and crash reporting for JavaScript applications. It includes features like user tracking, performance monitoring, and deployment tracking. Raygun's focus on user-centric metrics and detailed diagnostics provides a different perspective compared to Sentry.

logrocket

LogRocket is a frontend application monitoring solution that combines session replay, performance monitoring, and error tracking. Unlike Sentry, which focuses on error and performance data, LogRocket provides insights into user interactions and experiences by recording user sessions.

README

Official Sentry SDK for Next.js

Links

• Official SDK Docs
• TypeDoc

Compatibility

Currently, the minimum Next.js supported version is 11.2.0.

General

This package is a wrapper around @sentry/node for the server and @sentry/react for the client, with added functionality related to Next.js.

To use this SDK, initialize it in the Next.js configuration, in the sentry.client.config.ts|js file, and in the Next.js Instrumentation Hook (instrumentation.ts|js).

// next.config.js

const { withSentryConfig } = require('@sentry/nextjs');

const nextConfig = {
  experimental: {
    // The instrumentation hook is required for Sentry to work on the serverside
    instrumentationHook: true,
  },
};

// Wrap the Next.js configuration with Sentry
module.exports = withSentryConfig(nextConfig);

// sentry.client.config.js or .ts

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

Sentry.init({
  dsn: '__DSN__',
  // Your Sentry configuration for the Browser...
});

// instrumentation.ts

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

export function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    Sentry.init({
      dsn: '__DSN__',
      // Your Node.js Sentry configuration...
    });
  }

  if (process.env.NEXT_RUNTIME === 'edge') {
    Sentry.init({
      dsn: '__DSN__',
      // Your Edge Runtime Sentry configuration...
    });
  }
}

To set context information or send manual events, use the exported functions of @sentry/nextjs.

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

// Set user information, as well as tags and further extras
Sentry.setExtra('battery', 0.7);
Sentry.setTag('user_mode', 'admin');
Sentry.setUser({ id: '4711' });

// Add a breadcrumb for future events
Sentry.addBreadcrumb({
  message: 'My Breadcrumb',
  // ...
});

// Capture exceptions, messages or manual events
Sentry.captureMessage('Hello, world!');
Sentry.captureException(new Error('Good bye'));
Sentry.captureEvent({
  message: 'Manual',
  stacktrace: [
    // ...
  ],
});

Changelog

8.4.0

Important Changes

• feat(nextjs): Trace pageloads in App Router (#12157)

If you are using Next.js version 14.3.0-canary.64 or above, the Sentry Next.js SDK will now trace clientside pageloads with React Server Components. This means, that client-side errors like Error: An error occurred in the Server Components render., which previously didn't give you much information on how that error was caused, can now be traced back to a specific error in a server component.

• feat(angular): Add Support for Angular 18 (#12183)

This release guarantees support for Angular 18 with @sentry/angular.

Other Changes

• feat(deps): Bump @opentelemetry/instrumentation-aws-lambda from 0.41.0 to 0.41.1 (#12078)
• fix(metrics): Ensure string values are interpreted for metrics (#12165)