Getting Started with Sentry Nextjs

Sentry Nextjs is a powerful tool for monitoring and error tracking in your Nextjs application. To get started, you'll need to install the Sentry Nextjs package using npm or yarn.

By default, Sentry Nextjs will automatically capture errors and exceptions in your application. This is thanks to Sentry's automatic error tracking feature.

You can also manually send errors to Sentry using the `sentry.captureException()` function. This is useful for catching and reporting errors that occur in specific parts of your code.

Consider reading: Nextjs Error Page

To get the most out of Sentry with Next.js, you need to configure it correctly. You can do this by creating initialization config files.

Create two files in the root directory of your project, sentry.client.config.js and sentry.server.config.js. These files should contain your initialization code for the client-side SDK and server-side SDK, respectively.

If you want to instrument Next.js API Routes, which run on serverless, you need to wrap your handler in our withSentry wrapper. This ensures that crashes can be captured.

Consider reading: Next Js Client Side Rendering

You can include your DSN directly in these two files, or provide it in either of two environment variables, SENTRY_DSN or NEXT_PUBLIC_SENTRY_DSN.

To extend the default Next.js configuration, use withSentryConfig. This will automatically call the code in sentry.server.config.js and sentry.client.config.js, and generate and upload source maps to Sentry.

Here's what you need to include in your next.config.js:

In serverless deployment environments, including Vercel, the Next.js server runs in a "minimal" mode to reduce serverless function size. This can lead to errors not being caught by @sentry/nextjs.

You can use Next.js error page customization to capture these errors in Sentry. Create a pages/_error.js file and include the following code.

Next.js includes a custom error boundary that catches certain errors before they bubble up to handlers. This can be a problem for error tracking.

Related reading: Nextjs Error Boundary

To set up Sentry with Next.js, you'll need to create two files in your project's root directory: sentry.client.config.js and sentry.server.config.js. These files will hold your initialization code for the client-side and server-side SDKs, respectively.

Expand your knowledge: Next Js Debugging

You can include your DSN directly in these files or provide it through environment variables, such as SENTRY_DSN or NEXT_PUBLIC_SENTRY_DSN. This will allow you to capture crashes and start performance monitoring.

To extend Next.js configuration, use withSentryConfig to automatically call the code in sentry.server.config.js and sentry.client.config.js at server startup and client page load. This will guarantee that the SDK is initialized early enough to catch all errors and start performance monitoring.

You'll also need to include the Sentry config last in your next.config.js file, as any other configuration may interfere with source maps.

By default, withSentryConfig will add an instance of SentryWebpackPlugin to the webpack plugins for both server and client builds. This will automatically upload your source files, source maps, and bundles to Sentry.

If you want to handle source map uploading separately, you can disable the plugin for either the server or client build process by adding a sentry object to moduleExports above.

The SentryWebpackPlugin uses sentry-cli to manage releases and source maps, which can be configured using configuration files or environment variables. You can also combine these approaches, with environment variables taking precedence over values set in configuration files.

To manually set up Sentry, you can pass an auth token directly via the authToken option or set the SENTRY_AUTH_TOKEN environment variable. However, do not commit your auth token to version control.

Take a look at this: Nextjs Middleware Firebase Auth

To configure sentry-cli, you can use configuration files or environment variables. Configuration files can be added to your VCS, while sensitive data like tokens should be set in environment variables.

The SentryWebpackPlugin uses sentry-cli to manage releases and source maps, which can be configured in one of two ways - using configuration files, or with environment variables.

You can combine the two approaches, but be aware that environment variables will take precedence over values set in the configuration files.

Add the token to .sentryclirc, which authenticates your user account.

The URL, organization, and project properties identify your organization and project.

Broaden your view: Nextjs Build Fails Environment Variables