@sentry/nextjs

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: [
    // ...
  ],
});