For people looking to implement Sentry with Next.js, make sure to check out https://github.com/UnlyEd/next-right-now
Most interesting parts are:
Disclaimer: I'm one of the project's contributors
Note the above links point to a fix commit to avoid breaking, but you should consider looking at a up-to-date version. Branch: https://github.com/UnlyEd/next-right-now/blob/v2-mst-aptd-at-lcz-sty/
utils/sentry.ts
import { NowRequest } from '@now/node/dist';
import * as Sentry from '@sentry/node';
import get from 'lodash.get';
import { isBrowser } from '@unly/utils';
/**
* Initialize Sentry and export it.
*
* Helper to avoid duplicating the init() call in every /pages/api file.
* Also used in pages/_app for the client side, which automatically applies it for all frontend pages.
*/
Sentry.init({
dsn: process.env.SENTRY_DSN,
enabled: process.env.NODE_ENV !== 'test',
environment: process.env.APP_STAGE,
release: process.env.APP_VERSION_RELEASE,
});
if (!process.env.SENTRY_DSN && process.env.NODE_ENV !== 'test') {
// eslint-disable-next-line no-console
console.error('Sentry DSN not defined');
}
// Scope configured by default, subsequent calls to "configureScope" will add additional data
Sentry.configureScope((scope) => { // See https://www.npmjs.com/package/@sentry/node
scope.setTag('nodejs', process.version);
scope.setTag('nodejsAWS', process.env.AWS_EXECUTION_ENV || null); // Optional - Available on production environment only
scope.setTag('memory', process.env.AWS_LAMBDA_FUNCTION_MEMORY_SIZE || null); // Optional - Available on production environment only
scope.setTag('runtimeEngine', isBrowser() ? 'browser' : 'server');
scope.setTag('buildTime', process.env.BUILD_TIME);
});
/**
* Configure the Sentry scope by extracting useful tags and context from the given request.
*
* @param req
*/
export const configureReq = (req: NowRequest): void => {
Sentry.configureScope((scope) => {
scope.setTag('host', get(req, 'headers.host'));
scope.setTag('url', get(req, 'url'));
scope.setTag('method', get(req, 'method'));
scope.setContext('query', get(req, 'query'));
scope.setContext('cookies', get(req, 'cookies'));
scope.setContext('body', get(req, 'body'));
scope.setContext('headers', get(req, 'headers'));
});
};
export default Sentry;
Usage examples (pages/_app.tsx):
import * as Sentry from '@sentry/node';
import '../utils/sentry';
//...
Sentry.configureScope((scope) => { // See https://www.npmjs.com/package/@sentry/node
scope.setTag('customer', customerRef);
scope.setTag('userId', userSession.id);
scope.setContext('userSession', userSession);
scope.setContext('cookies', readonlyCookies);
});
Sentry.addBreadcrumb({ // See https://docs.sentry.io/enriching-error-data/breadcrumbs
category: fileLabel,
message: `Preparing app (${isBrowser() ? 'browser' : 'server'})`,
level: Sentry.Severity.Debug,
});
Webpack config (next.config.js)
webpack: (config, { isServer, buildId }) => {
// Fixes npm packages that depend on `fs` module
config.node = {
fs: 'empty',
};
// XXX See https://github.com/zeit/next.js/blob/canary/examples/with-sentry-simple/next.config.js
// In `pages/_app.js`, Sentry is imported from @sentry/node. While
// @sentry/browser will run in a Node.js environment, @sentry/node will use
// Node.js-only APIs to catch even more unhandled exceptions.
//
// This works well when Next.js is SSRing your page on a server with
// Node.js, but it is not what we want when your client-side bundle is being
// executed by a browser.
//
// Luckily, Next.js will call this webpack function twice, once for the
// server and once for the client. Read more:
// https://nextjs.org/docs#customizing-webpack-config
//
// So ask Webpack to replace @sentry/node imports with @sentry/browser when
// building the browser's bundle
if (!isServer) {
config.resolve.alias['@sentry/node'] = '@sentry/browser';
}
return config;
},
