Setup Application Monitoring and Error Tracking

[natterstefan]

Feature Request

Set up Sentry or other error tracking solutions to be able to track errors during runtime.

Links

• Migration guide from @sentry/browser to @sentry/react with Next.js getsentry/sentry-javascript#3163
• https://unlyed.github.io/next-right-now/guides/monitoring/use-sentry#a-note-about-sentrynode-usage-webpack-trick
• Use @sentry/react instead of @sentry/browser UnlyEd/next-right-now#164
• https://docs.sentry.io/product/integrations/github/
• https://docs.sentry.io/platforms/javascript/guides/nextjs/
• https://blog.sentry.io/2020/08/04/enable-suspect-commits-unminify-js-and-track-releases-with-vercel-and-sentry

Code Snippets

# .env.local

# Sentry
# @see https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
SENTRY_DSN=""
# get the values here https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#configure-sentry-cli
SENTRY_URL="https://sentry.io/"
SENTRY_ORG="your-organisation"
SENTRY_PROJECT="your-project"
# get the auth token here https://sentry.io/settings/account/api/auth-tokens/
SENTRY_AUTH_TOKEN=""
# if you get an an error that the file could not be found, note that this is a
# false-positive error
# @see https://github.com/getsentry/sentry-docs/issues/3721
# @see https://github.com/getsentry/sentry-javascript/issues/3691#issuecomment-868377000
SENTRY_SERVER_INIT_PATH=.next/server/sentry/initServerSDK.js

// next.config.js

/**
 * ATTENTION: The order matters - first `withPlugins` then `withSentryConfig`
 * @see https://github.com/getsentry/sentry-javascript/issues/3579#issuecomment-854973389
 */
const config = withPlugins([withGraphql], nextConfig)

if (nextConfig.publicRuntimeConfig.sentry.dsn) {
  module.exports = withSentryConfig(config, SentryWebpackPluginOptions)
} else {
  module.exports = config
}

If ⬆️ does not work, consider cyrilwanner/next-compose-plugins#50 (comment), getsentry/sentry-javascript#3579 (comment) or getsentry/sentry-javascript#3643 (comment) instead.

Keep an eye on

• fix: await Sentry. flush() on Vercel next-with-sentry#2 (comment)