@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.16.0

Important Changes

• feat(nextjs): Use spans generated by Next.js for App Router (#12729)

Previously, the @sentry/nextjs SDK automatically recorded spans in the form of transactions for each of your top-level server components (pages, layouts, ...). This approach had a few drawbacks, the main ones being that traces didn't have a root span, and more importantly, if you had data stream to the client, its duration was not captured because the server component spans had finished before the data could finish streaming.

With this release, we will capture the duration of App Router requests in their entirety as a single transaction with server component spans being descendants of that transaction. This means you will get more data that is also more accurate. Note that this does not apply to the Edge runtime. For the Edge runtime, the SDK will emit transactions as it has before.

Generally speaking, this change means that you will see less transactions and more spans in Sentry. You will no longer receive server component transactions like Page Server Component (/path/to/route) (unless using the Edge runtime), and you will instead receive transactions for your App Router SSR requests that look like GET /path/to/route.

If you are on Sentry SaaS, this may have an effect on your quota consumption: Less transactions, more spans.

• - feat(nestjs): Add nest cron monitoring support (#12781)

The @sentry/nestjs SDK now includes a @SentryCron decorator that can be used to augment the native NestJS @Cron decorator to send check-ins to Sentry before and after each cron job run:

import { Cron } from '@nestjs/schedule';
import { SentryCron, MonitorConfig } from '@sentry/nestjs';
import type { MonitorConfig } from '@sentry/types';

const monitorConfig: MonitorConfig = {
  schedule: {
    type: 'crontab',
    value: '* * * * *',
  },
  checkinMargin: 2, // In minutes. Optional.
  maxRuntime: 10, // In minutes. Optional.
  timezone: 'America/Los_Angeles', // Optional.
};

export class MyCronService {
  @Cron('* * * * *')
  @SentryCron('my-monitor-slug', monitorConfig)
  handleCron() {
    // Your cron job logic here
  }
}

Other Changes

• feat(node): Allow to pass instrumentation config to httpIntegration (#12761)
• feat(nuxt): Add server error hook (#12796)
• feat(nuxt): Inject sentry config with Nuxt addPluginTemplate (#12760)
• fix: Apply stack frame metadata before event processors (#12799)
• fix(feedback): Add missing h import in ScreenshotEditor (#12784)
• fix(node): Ensure autoSessionTracking is enabled by default (#12790)
• ref(feedback): Let CropCorner inherit the existing h prop (#12814)
• ref(otel): Ensure we never swallow args for ContextManager (#12798)