483bd3ddda
* Find/replace * Update more URLs * More rename * Fix remaining examples * More updates * Update create-next-app * Update remaining text * Update Co-authored-by: Shu Uesugi <shu@chibicode.com> |
||
---|---|---|
.. | ||
pages | ||
next.config.js | ||
package.json | ||
README.md |
Sentry (Simple Example)
How To Use
Using create-next-app
Execute create-next-app
with npm or Yarn to bootstrap the example:
npm init next-app --example with-sentry-simple with-sentry-simple
# or
yarn create next-app --example with-sentry-simple with-sentry-simple
Download Manually
Download the example:
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-sentry-simple
cd with-sentry-simple
Install it and run:
NPM
npm install
npm run dev
Yarn
yarn
yarn dev
Deploy it to the cloud with Vercel (Documentation).
About Example
This is a simple 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
Note: Source maps will not be sent to Sentry when running locally (unless Sentry configuration environment variables are correctly defined during the build step)
Note: Error handling works differently in production. Some exceptions will not be sent to Sentry in development mode (i.e. npm run dev
).
Note: The build output will contain warning about unhandled Promise rejections. This caused by the test pages, and is expected.
Note: 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.
Note: Both @zeit/next-source-maps
and @sentry/webpack-plugin
are added to dependencies (rather than devDependencies
) is because if used with SSR (ex. heroku), these plugins are used during production for generating the source-maps and sending them to sentry.
Configuration
You will need a Sentry DSN for your project. You can get it from the settings of your project in Client Keys (DSN). Then, copy the string labeled DSN (Public).
The Sentry DSN should then be updated in _app.js
.
Sentry.init({
dsn: 'PUT_YOUR_SENTRY_DSN_HERE',
})
More configurations available for Sentry webpack plugin and using Sentry Configuration variables for defining the releases/verbosity/etc.
Disabling Sentry during development
An easy way to disable Sentry while developing is to set its enabled
flag based off of the NODE_ENV
environment variable, which is properly configured by the next
subcommands.
Sentry.init({
dsn: 'PUT_YOUR_SENTRY_DSN_HERE',
enabled: process.env.NODE_ENV === 'production',
})
Disabling Sentry uploading during local builds
Unless the SENTRY_DNS
, SENTRY_ORG
and SENTRY_PROJECT
environment variables passed to the build command, Sentry webpack plugin won't be added and the source maps won't be uploaded to sentry.
Check with-dotenv example for integrating .env
file env variables