feat: Next.js SDK + Plugin

[iker-barriocanal]

Getting Started

It's assumed that NextJS is installed. Note that its version can't be latest; please replace it with a numeric version instead (it can be the latest version, but use the numeric notation).

Install:

yarn add @sentry/nextjs@6.3.0-beta.7

Note: It's important to use exactly @sentry/nextjs@6.3.0-beta.7

to setup the SDK call

npx @sentry/wizard -i nextjs

follow the steps and finish the setup.
After starting your next app, the Sentry SDK is started on both the frontend and backend.
The next config we provide out of the box comes with automatic source map setup and Vercel deployment support.

Features

✅  Error Monitoring both frontend and backend
✅  Automatic source maps (incl. upload) for both JS and TS
🔜  Performance Monitoring (transactions frontend + backend)

---

Manual Setup

The config we provide by default is rather lengthy and if you don't start from scratch and have an existing config, you need to merge it manually. Note however that the config files are automatically generated by the wizard.

next.config.js

// This file sets a custom webpack configuration to use your Next.js app
// with Sentry.
// https://nextjs.org/docs/api-reference/next.config.js/introduction
// https://docs.sentry.io/platforms/javascript/guides/nextjs/

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

const moduleExports = {
  // Your existing module.exports
};

const SentryWebpackPluginOptions = {
  // Additional config options for the Sentry Webpack plugin. Keep in mind that
  // the following options are set automatically, and overriding them is not
  // recommended:
  //   release, url, org, project, authToken, configFile, stripPrefix,
  //   urlPrefix, include, ignore
  // For all available options, see:
  // https://github.com/getsentry/sentry-webpack-plugin#options.
};

// Make sure adding Sentry options is the last code to run before exporting, to
// ensure that your source maps include changes from all other Webpack plugins
module.exports = withSentryConfig(moduleExports, SentryWebpackPluginOptions);

sentry.client.config.js

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

const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;

Sentry.init({
  dsn: SENTRY_DSN || '__DSN__',
  // ...
});

sentry.server.config.js

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

const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;

Sentry.init({
  dsn: SENTRY_DSN || '__DSN__',
  // ...
});

TypeScript Source Maps

If you are using TypeScript, make sure to add "sourceMap": true and "noEmit": false in your tsconfig.json in the compiler options:

{
  "compilerOptions": {
    "sourceMap": true,
    "noEmit": false,
  }
}

---

Usage

With the provided configuration you don't have to do anything else, the SDK is already working. If you want to configure it, custom the Sentry.init in the sentry.client.config.js or sentry.server.config.js.

The SDK itself underneath uses either @sentry/react or @sentry/node depending on if it's called on the frontend or backend.

[github-actions]

size-limit report

Path	Size
@sentry/browser - CDN Bundle (gzipped)	20.6 KB (0%)
@sentry/browser - Webpack	21.48 KB (0%)
@sentry/react - Webpack	21.52 KB (0%)
@sentry/browser + @sentry/tracing - CDN Bundle (gzipped)	27.82 KB (0%)

[rhcarvalho]

What are we supposed to do with this comment?

[rhcarvalho]

Why do we assume that err.err is a thing if we don't know the type of err?

[rhcarvalho]

This is probably fine, but has a caveat: it possibly slows down requests on the server when there are errors, even if it is not necessary.

Flushing on every error is most of the time not required. In certain platforms, in particular serverless platforms, we should flush once per request.

Is there an obvious better place we could put it in? Per-request flush?

[HazAT]

[JavaGalaxy]

does the next.js supports sentry now?

[iker-barriocanal]

Yes, it should be working.