Merge pull request #13464 from ethereum/sentry

Sentry

.env.example

@@ -33,4 +33,11 @@ BUILD_LOCALES=
 
 # If resource constraints are being hit during builds, change LIMIT_CPUS to a
 # fixed number of CPUs (e.g. 2) to limit the demand during build time
-LIMIT_CPUS=
+LIMIT_CPUS=
+
+# Sentry auth token required for error tracking
+SENTRY_AUTH_TOKEN=
+NEXT_PUBLIC_SENTRY_DSN=
+
+# Enables the bundle analyzer
+ANALYZE=false

instrumentation.ts

@@ -0,0 +1,28 @@
+import * as Sentry from "@sentry/nextjs"
+
+export async function register() {
+  const dsn = process.env.NEXT_PUBLIC_SENTRY_DSN
+
+  if (!dsn) {
+    console.warn("Sentry DSN not found, skipping")
+    return
+  }
+
+  const commonSentryOptions = {
+    dsn,
+    enabled: process.env.NODE_ENV === "production",
+    tracesSampleRate: 1.0,
+  }
+
+  if (process.env.NEXT_RUNTIME === "nodejs") {
+    Sentry.init({
+      ...commonSentryOptions,
+    })
+  }
+
+  if (process.env.NEXT_RUNTIME === "edge") {
+    Sentry.init({
+      ...commonSentryOptions,
+    })
+  }
+}

next.config.js

@@ -1,5 +1,10 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const { PHASE_DEVELOPMENT_SERVER } = require("next/constants")
+const { withSentryConfig } = require("@sentry/nextjs")
+
+const withBundleAnalyzer = require("@next/bundle-analyzer")({
+  enabled: process.env.ANALYZE === "true",
+})
 
 const { i18n } = require("./next-i18next.config")
 
@@ -22,7 +27,7 @@ module.exports = (phase, { defaultConfig }) => {
   let nextConfig = {
     ...defaultConfig,
     reactStrictMode: true,
-    webpack: (config) => {
+    webpack: (config, { webpack }) => {
       config.module.rules.push({
         test: /\.ya?ml$/,
         use: "yaml-loader",
@@ -53,13 +58,30 @@ module.exports = (phase, { defaultConfig }) => {
       // Modify the file loader rule to ignore *.svg, since we have it handled now.
       fileLoaderRule.exclude = /\.svg$/i
 
+      // Tree shake Sentry debug code
+      // ref. https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/tree-shaking/#tree-shaking-with-nextjs
+      config.plugins.push(
+        new webpack.DefinePlugin({
+          __SENTRY_DEBUG__: false,
+          __RRWEB_EXCLUDE_IFRAME__: true,
+          __RRWEB_EXCLUDE_SHADOW_DOM__: true,
+          __SENTRY_EXCLUDE_REPLAY_WORKER__: true,
+        })
+      )
+
       return config
     },
     i18n,
     trailingSlash: true,
     images: {
       deviceSizes: [640, 750, 828, 1080, 1200, 1504, 1920],
     },
+    env: {
+      NEXT_PUBLIC_CONTEXT: process.env.CONTEXT,
+    },
+    experimental: {
+      instrumentationHook: true,
+    },
   }
 
   if (phase !== PHASE_DEVELOPMENT_SERVER) {
@@ -88,5 +110,15 @@ module.exports = (phase, { defaultConfig }) => {
     }
   }
 
-  return nextConfig
+  return withBundleAnalyzer(
+    withSentryConfig(nextConfig, {
+      // TODO: temp config, update this to the correct org & project
+      org: "ethereumorg-ow",
+      project: "javascript-nextjs",
+      authToken: process.env.SENTRY_AUTH_TOKEN,
+      release: `${process.env.BUILD_ID}_${process.env.REVIEW_ID}`,
+      disableLogger: true,
+      silent: true,
+    })
+  )
 }

package.json

@@ -34,6 +34,7 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "^3.8.0",
+    "@next/bundle-analyzer": "^14.2.5",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.1",
@@ -42,6 +43,7 @@
     "@radix-ui/react-radio-group": "^1.2.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-visually-hidden": "^1.1.0",
+    "@sentry/nextjs": "^8.19.0",
     "@socialgouv/matomo-next": "^1.8.0",
     "chart.js": "^4.4.2",
     "chartjs-plugin-datalabels": "^2.2.0",

sentry.client.config.ts

@@ -0,0 +1,10 @@
+import * as Sentry from "@sentry/nextjs"
+
+const dsn = process.env.NEXT_PUBLIC_SENTRY_DSN
+
+Sentry.init({
+  dsn,
+  enabled: process.env.NODE_ENV === "production",
+  environment: process.env.NEXT_PUBLIC_CONTEXT,
+  tracesSampleRate: 1.0,
+})