this updates some links to the docs site to their new location
4 KiB
Sentry
This is a example showing how to use Sentry to catch & report errors on both client + server side.
_app.js
renders on both the server and client. It initializes Sentry to catch any unhandled exceptions_error.js
is rendered by Next.js while handling certain types of exceptions for you. It is overridden so those exceptions can be passed along to Sentrynext.config.js
enables source maps in production for Sentry and swaps out@sentry/node
for@sentry/browser
when building the client bundle
How To Use
Using create-next-app
Execute create-next-app
with npm or Yarn to bootstrap the example:
npx create-next-app --example with-sentry with-sentry
# or
yarn create next-app --example with-sentry with-sentry
Download Manually
Download the example:
curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-sentry
cd with-sentry
Install it and run:
npm install
npm run dev
# or
yarn
yarn dev
Deploy it to the cloud with Vercel (Documentation).
Notes
- By default, neither sourcemaps nor error tracking is enabled in development mode (see Configuration).
- When enabled in development mode, error handling works differently than in production as
_error.js
is never actually called. - The build output will contain warning about unhandled Promise rejections. This is caused by the test pages, and is expected.
- The version of
@zeit/next-source-maps
(0.0.4-canary.1
) is important and must be specified since it is not yet the default. Otherwise source maps will not be generated for the server. - Both
@zeit/next-source-maps
and@sentry/webpack-plugin
are added to dependencies (rather thandevDependencies
) because if used with SSR, these plugins are used during production for generating the source-maps and sending them to sentry.
Configuration
Error tracking
- Copy your Sentry DSN. You can get it from the settings of your project in Client Keys (DSN). Then, copy the string labeled DSN (Public).
- Put the DSN inside the
SENTRY_DSN
environment variable inside a new environment file called.env.local
Note: Error tracking is disabled in development mode using the
NODE_ENV
environment variable. To change this behaviour, remove theenabled
property from theSentry.init()
call inside your_app.js
file.
Automatic sourcemap upload (optional)
- Set up the
SENTRY_DSN
environment variable as described above. - Save your Sentry Organization slug inside the
SENTRY_ORG
and your project slug inside theSENTRY_PROJECT
environment variables. - Create an auth token in Sentry. The recommended way to do this is by creating a new internal integration for your organization. To do so, go into Settings > Developer Settings > New internal integration. After the integration is created, copy the Token.
- Save the token inside the
SENTRY_AUTH_TOKEN
environment variable.
Note: Sourcemap upload is disabled in development mode using the
NODE_ENV
environment variable. To change this behaviour, remove theNODE_ENV === 'production'
check from yournext.config.js
file.
Other configuration options
More configurations are available for the Sentry webpack plugin using Sentry Configuration variables for defining the releases/verbosity/etc.