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.
Official Sentry SDK for Next.js
Links
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
).
const { withSentryConfig } = require('@sentry/nextjs');
const nextConfig = {
experimental: {
instrumentationHook: true,
},
};
module.exports = withSentryConfig(nextConfig);
import * as Sentry from '@sentry/nextjs';
Sentry.init({
dsn: '__DSN__',
});
import * as Sentry from '@sentry/nextjs';
export function register() {
if (process.env.NEXT_RUNTIME === 'nodejs') {
Sentry.init({
dsn: '__DSN__',
});
}
if (process.env.NEXT_RUNTIME === 'edge') {
Sentry.init({
dsn: '__DSN__',
});
}
}
To set context information or send manual events, use the exported functions of @sentry/nextjs
.
import * as Sentry from '@sentry/nextjs';
Sentry.setExtra('battery', 0.7);
Sentry.setTag('user_mode', 'admin');
Sentry.setUser({ id: '4711' });
Sentry.addBreadcrumb({
message: 'My Breadcrumb',
});
Sentry.captureMessage('Hello, world!');
Sentry.captureException(new Error('Good bye'));
Sentry.captureEvent({
message: 'Manual',
stacktrace: [
],
});
8.5.0
Important Changes
- feat(react): Add React 19 to peer deps (#12207)
This release adds support for React 19 in the @sentry/react
SDK package.
- feat(node): Add
@sentry/node/preload
hook (#12213)
This release adds a new way to initialize @sentry/node
, which allows you to use the SDK with performance
instrumentation even if you cannot call Sentry.init()
at the very start of your app.
First, run the SDK like this:
node --require @sentry/node/preload ./app.js
Now, you can initialize and import the rest of the SDK later or asynchronously:
const express = require('express');
const Sentry = require('@sentry/node');
const dsn = await getSentryDsn();
Sentry.init({ dsn });
For more details, head over to the
PR Description of the new feature. Our docs will be updated
soon with a new guide.
Other Changes
- feat(browser): Do not include metrics in base CDN bundle (#12230)
- feat(core): Add
startNewTrace
API (#12138) - feat(core): Allow to pass custom scope to
captureFeedback()
(#12216) - feat(core): Only allow
SerializedSession
in session envelope items (#11979) - feat(nextjs): Use Vercel's
waitUntil
to defer freezing of Vercel Lambdas (#12133) - feat(node): Ensure manual OTEL setup works (#12214)
- fix(aws-serverless): Avoid minifying
Module._resolveFilename
in Lambda layer bundle (#12232) - fix(aws-serverless): Ensure lambda layer uses default export from
ImportInTheMiddle
(#12233) - fix(browser): Improve browser extension error message check (#12146)
- fix(browser): Remove optional chaining in INP code (#12196)
- fix(nextjs): Don't report React postpone errors (#12194)
- fix(nextjs): Use global scope for generic event filters (#12205)
- fix(node): Add origin to redis span (#12201)
- fix(node): Change import of
@prisma/instrumentation
to use default import (#12185) - fix(node): Only import
inspector
asynchronously (#12231) - fix(replay): Update matcher for hydration error detection to new React docs (#12209)
- ref(profiling-node): Add warning when using non-LTS node (#12211)