TH-1465, HH-481, LIIKUNTA-780 : migrate apps to Next.js instrumentation and align Sentry v10 config

Dockerfile

@@ -84,6 +84,7 @@ FROM ${BUILDER_FROM_IMAGE} AS builder
 ARG PROJECT
 ARG CMS_ORIGIN
 ARG SKIP_BUILD_STATIC_GENERATION
+ARG NEXT_DISABLE_SOURCEMAPS
 ARG FEDERATION_ROUTER_ENDPOINT
 ARG LINKEDEVENTS_EVENT_ENDPOINT
 ARG NEXT_PUBLIC_APP_ORIGIN
@@ -97,11 +98,15 @@ ARG NEXT_PUBLIC_ASKEM_API_KEY_EN
 ARG NEXT_PUBLIC_ASKEM_API_KEY_SV
 ARG NEXT_PUBLIC_ASKEM_ENABLED
 ARG NEXT_PUBLIC_ALLOW_UNAUTHORIZED_REQUESTS
+ARG NEXT_PUBLIC_SENTRY_PROJECT
 ARG NEXT_PUBLIC_SENTRY_ENVIRONMENT
+ARG NEXT_PUBLIC_SENTRY_RELEASE
 ARG NEXT_PUBLIC_SENTRY_DSN
-ARG NEXT_PUBLIC_SENTRY_TRACE_SAMPLE_RATE
-ARG NEXT_PUBLIC_SENTRY_REPLAY_SESSION_SAMPLE_RATE
-ARG NEXT_PUBLIC_SENTRY_REPLAY_ON_ERROR_SAMPLE_RATE
+ARG NEXT_PUBLIC_SENTRY_TRACES_SAMPLE_RATE
+ARG NEXT_PUBLIC_SENTRY_REPLAYS_SESSION_SAMPLE_RATE
+ARG NEXT_PUBLIC_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE
+ARG SENTRY_ORG
+ARG SENTRY_PROJECT
 ARG SENTRY_AUTH_TOKEN
 ARG NEXT_PUBLIC_DEBUG
 ARG NEXTJS_DISABLE_SENTRY

DockerfileCache

@@ -97,11 +97,14 @@ ARG NEXT_PUBLIC_ASKEM_API_KEY_EN
 ARG NEXT_PUBLIC_ASKEM_API_KEY_SV
 ARG NEXT_PUBLIC_ASKEM_ENABLED
 ARG NEXT_PUBLIC_ALLOW_UNAUTHORIZED_REQUESTS
+ARG NEXT_PUBLIC_SENTRY_PROJECT
 ARG NEXT_PUBLIC_SENTRY_ENVIRONMENT
 ARG NEXT_PUBLIC_SENTRY_DSN
-ARG NEXT_PUBLIC_SENTRY_TRACE_SAMPLE_RATE
-ARG NEXT_PUBLIC_SENTRY_REPLAY_SESSION_SAMPLE_RATE
-ARG NEXT_PUBLIC_SENTRY_REPLAY_ON_ERROR_SAMPLE_RATE
+ARG NEXT_PUBLIC_SENTRY_TRACES_SAMPLE_RATE
+ARG NEXT_PUBLIC_SENTRY_REPLAYS_SESSION_SAMPLE_RATE
+ARG NEXT_PUBLIC_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE
+ARG SENTRY_ORG
+ARG SENTRY_PROJECT
 ARG SENTRY_AUTH_TOKEN
 ARG NEXT_PUBLIC_DEBUG
 ARG NEXTJS_DISABLE_SENTRY

apps/events-helsinki/.env.local.example

@@ -5,12 +5,16 @@ NEXT_PUBLIC_APP_ORIGIN="http://localhost:3000"
 NEXT_PUBLIC_IMAGE_PROXY_URL="https://images.weserv.nl/?w=1024&url="
 NEXT_PUBLIC_DEBUG="true"
 NEXT_PUBLIC_DEFAULT_ISR_REVALIDATE_SECONDS=0
+SENTRY_ORG=city-of-helsinki
+SENTRY_PROJECT=tapahtumat-ui
 SENTRY_AUTH_TOKEN=
+NEXT_PUBLIC_SENTRY_PROJECT=tapahtumat-ui
 NEXT_PUBLIC_SENTRY_DSN=
-NEXT_PUBLIC_SENTRY_ENVIRONMENT="develop"
-NEXT_PUBLIC_SENTRY_TRACE_SAMPLE_RATE="1.0"
-NEXT_PUBLIC_SENTRY_REPLAY_SESSION_SAMPLE_RATE="1.0"
-NEXT_PUBLIC_SENTRY_REPLAY_ON_ERROR_SAMPLE_RATE="1.0"
+NEXT_PUBLIC_SENTRY_ENVIRONMENT="local"
+NEXT_PUBLIC_SENTRY_RELEASE=
+NEXT_PUBLIC_SENTRY_TRACES_SAMPLE_RATE="1.0"
+NEXT_PUBLIC_SENTRY_REPLAYS_SESSION_SAMPLE_RATE="1.0"
+NEXT_PUBLIC_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE="1.0"
 NEXT_PUBLIC_CMS_HEADER_MENU_NAME_FI="Events Helsinki Header FI"
 NEXT_PUBLIC_CMS_HEADER_MENU_NAME_EN="Events Helsinki Header EN"
 NEXT_PUBLIC_CMS_HEADER_MENU_NAME_SV="Events Helsinki Header SV"

apps/events-helsinki/.gitignore

@@ -41,4 +41,6 @@ report
 
 .vscode/
 
-certificates
+certificates
+# Sentry Config File
+.env.sentry-build-plugin

apps/events-helsinki/next.config.mjs

@@ -1,3 +1,4 @@
+import { withSentryConfig } from '@sentry/nextjs';
 import packageJson from './package.json' with { type: 'json' };
 import i18nRoutes from './i18nRoutes.config.mjs';
 import redirectCampaignRoutes from './redirectCampaignRoutes.config.mjs';
@@ -28,11 +29,43 @@ const nonCampaignRedirects = Object.entries(redirectNonCampaignRoutes).flatMap(
     }))
 );
 
-export default nextBaseConfig({
-  packageJson,
-  i18nRoutes,
-  i18n: nextConfig.i18n,
-  async redirects() {
-    return [...campaignRedirects, ...nonCampaignRedirects];
-  },
-});
+export default withSentryConfig(
+  nextBaseConfig({
+    packageJson,
+    i18nRoutes,
+    i18n: nextConfig.i18n,
+    async redirects() {
+      return [...campaignRedirects, ...nonCampaignRedirects];
+    },
+  }),
+  {
+    // Suppresses source map uploading logs during build
+    silent: false,
+
+    // For all available options, see:
+    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+
+    // Upload a larger set of source maps for prettier stack traces (increases build time)
+    widenClientFileUpload: true,
+
+    // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
+    // This can increase your server load as well as your hosting bill.
+    // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
+    // side errors will fail.
+    tunnelRoute: '/monitoring',
+
+    webpack: {
+      // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
+      // See the following for more information:
+      // https://docs.sentry.io/product/crons/
+      // https://vercel.com/docs/cron-jobs
+      automaticVercelMonitors: true,
+
+      // Tree-shaking options for reducing bundle size
+      treeshake: {
+        // Automatically tree-shake Sentry logger statements to reduce bundle size
+        removeDebugLogging: true,
+      },
+    },
+  }
+);

apps/events-helsinki/package.json

@@ -50,9 +50,10 @@
     "@city-of-helsinki/react-helsinki-headless-cms": "3.0.1",
     "@events-helsinki/common-i18n": "workspace:^",
     "@events-helsinki/components": "workspace:^",
-    "@sentry/browser": "9.38.0",
-    "@sentry/nextjs": "9.38.0",
-    "@sentry/react": "9.38.0",
+    "@sentry/browser": "^10.52.0",
+    "@sentry/core": "^10.52.0",
+    "@sentry/nextjs": "^10.52.0",
+    "@sentry/react": "^10.52.0",
     "@svgr/webpack": "8.1.0",
     "@types/jsdom": "21.1.7",
     "@types/lodash": "^4.17.20",

apps/events-helsinki/sentry.edge.config.ts

@@ -1,30 +1,26 @@
-// This file configures the initialization of Sentry on the server.
-// The config you add here will be used whenever the server handles a request.
-// https://docs.sentry.io/platforms/javascript/guides/nextjs/
-
+import {
+  beforeSend,
+  beforeSendTransaction,
+} from '@events-helsinki/components/sentry/utils';
 import * as Sentry from '@sentry/nextjs';
 
-Sentry.init({
-  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
-  environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT,
-  // Adjust this value in production, or use tracesSampler for greater control
-  // @see https://develop.sentry.dev/sdk/performance/
-  // To turn it off, remove the line
-  // @see https://github.com/getsentry/sentry-javascript/discussions/4503#discussioncomment-2143116
-  tracesSampleRate: parseFloat(
-    process.env.NEXT_PUBLIC_SENTRY_TRACE_SAMPLE_RATE ?? '0.1'
-  ),
-  // ...
-  // Note: if you want to override the automatic release value, do not set a
-  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
-  // that it will also get attached to your source maps
-  beforeSend: async (event, hint) => {
-    if (process.env.NODE_ENV === 'development') {
-      // eslint-disable-next-line no-console
-      console.log('Sentry event', event);
-      // eslint-disable-next-line no-console
-      console.log('Sentry hint', hint);
-    }
-    return event;
-  },
-});
+if (process.env.NEXT_PUBLIC_SENTRY_DSN) {
+  Sentry.init({
+    dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+    environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT,
+    release: process.env.NEXT_PUBLIC_SENTRY_RELEASE,
+    // Adjust this value in production, or use tracesSampler for greater control
+    // @see https://develop.sentry.dev/sdk/performance/
+    // To turn it off, remove the line
+    // @see https://github.com/getsentry/sentry-javascript/discussions/4503#discussioncomment-2143116
+    tracesSampleRate: Number.parseFloat(
+      process.env.NEXT_PUBLIC_SENTRY_TRACES_SAMPLE_RATE || '0'
+    ),
+    normalizeDepth: 3,
+    integrations: [Sentry.extraErrorDataIntegration({ depth: 3 })],
+    beforeSend,
+    beforeSendTransaction,
+    // Setting this option to true will print useful information to the console while you're setting up Sentry.
+    debug: false,
+  });
+}

apps/events-helsinki/sentry.server.config.ts

@@ -1,30 +1,26 @@
-// This file configures the initialization of Sentry on the server.
-// The config you add here will be used whenever the server handles a request.
-// https://docs.sentry.io/platforms/javascript/guides/nextjs/
-
+import {
+  beforeSend,
+  beforeSendTransaction,
+} from '@events-helsinki/components/sentry/utils';
 import * as Sentry from '@sentry/nextjs';
 
-Sentry.init({
-  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
-  environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT,
-  // Adjust this value in production, or use tracesSampler for greater control
-  // @see https://develop.sentry.dev/sdk/performance/
-  // To turn it off, remove the line
-  // @see https://github.com/getsentry/sentry-javascript/discussions/4503#discussioncomment-2143116
-  tracesSampleRate: parseFloat(
-    process.env.NEXT_PUBLIC_SENTRY_TRACE_SAMPLE_RATE ?? '0.1'
-  ),
-  // ...
-  // Note: if you want to override the automatic release value, do not set a
-  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
-  // that it will also get attached to your source maps
-  beforeSend: async (event, hint) => {
-    if (process.env.NODE_ENV === 'development') {
-      // eslint-disable-next-line no-console
-      console.log('Sentry event', event);
-      // eslint-disable-next-line no-console
-      console.log('Sentry hint', hint);
-    }
-    return event;
-  },
-});
+if (process.env.NEXT_PUBLIC_SENTRY_DSN) {
+  Sentry.init({
+    dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+    environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT,
+    release: process.env.NEXT_PUBLIC_SENTRY_RELEASE,
+    // Adjust this value in production, or use tracesSampler for greater control
+    // @see https://develop.sentry.dev/sdk/performance/
+    // To turn it off, remove the line
+    // @see https://github.com/getsentry/sentry-javascript/discussions/4503#discussioncomment-2143116
+    tracesSampleRate: Number.parseFloat(
+      process.env.NEXT_PUBLIC_SENTRY_TRACES_SAMPLE_RATE || '0'
+    ),
+    normalizeDepth: 3,
+    integrations: [Sentry.extraErrorDataIntegration({ depth: 3 })],
+    beforeSend,
+    beforeSendTransaction,
+    // Setting this option to true will print useful information to the console while you're setting up Sentry.
+    debug: false,
+  });
+}

apps/events-helsinki/sonar-project.properties

@@ -22,4 +22,6 @@ sonar.coverage.exclusions= \
   src/pages/**/*.tsx, \
   src/pages/api/healthz.ts, \
   src/pages/api/readiness.ts, \
-  src/lib/**
+  src/lib/**, \
+  src/instrumentation.ts, \
+  src/instrumentation-client.ts

apps/events-helsinki/src/instrumentation-client.ts

@@ -0,0 +1,56 @@
+// This file configures the initialization of Sentry on the client.
+// The added config here will be used whenever a users loads a page in their browser.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import {
+  beforeSend,
+  beforeSendTransaction,
+} from '@events-helsinki/components/sentry/utils';
+import type { IntegrationFn } from '@sentry/core';
+import { thirdPartyErrorFilterIntegration } from '@sentry/core';
+import * as Sentry from '@sentry/nextjs';
+import {
+  captureRouterTransitionStart,
+  replayIntegration,
+} from '@sentry/nextjs';
+
+if (process.env.NEXT_PUBLIC_SENTRY_DSN) {
+  Sentry.init({
+    beforeSend,
+    beforeSendTransaction,
+    normalizeDepth: 3,
+    integrations: [
+      replayIntegration(),
+      Sentry.extraErrorDataIntegration({ depth: 3 }),
+      thirdPartyErrorFilterIntegration({
+        filterKeys: process.env.NEXT_PUBLIC_SENTRY_PROJECT
+          ? [process.env.NEXT_PUBLIC_SENTRY_PROJECT]
+          : [],
+        behaviour: 'drop-error-if-contains-third-party-frames',
+      }) as IntegrationFn,
+    ],
+    dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+    environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT,
+    release: process.env.NEXT_PUBLIC_SENTRY_RELEASE,
+    ignoreErrors: [
+      'ResizeObserver loop completed with undelivered notifications',
+      'ResizeObserver loop limit exceeded',
+    ],
+    tracesSampleRate: Number.parseFloat(
+      process.env.NEXT_PUBLIC_SENTRY_TRACES_SAMPLE_RATE || '0'
+    ),
+    tracePropagationTargets: process.env
+      .NEXT_PUBLIC_SENTRY_TRACE_PROPAGATION_TARGETS
+      ? process.env.NEXT_PUBLIC_SENTRY_TRACE_PROPAGATION_TARGETS.split(',')
+      : [],
+    replaysSessionSampleRate: Number.parseFloat(
+      process.env.NEXT_PUBLIC_SENTRY_REPLAYS_SESSION_SAMPLE_RATE || '0'
+    ),
+    replaysOnErrorSampleRate: Number.parseFloat(
+      process.env.NEXT_PUBLIC_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE || '0'
+    ),
+    debug: false,
+  });
+}
+
+export const onRouterTransitionStart = captureRouterTransitionStart;

apps/events-helsinki/src/instrumentation.ts

@@ -0,0 +1,13 @@
+import * as Sentry from '@sentry/nextjs';
+
+export async function register() {
+  if (process.env.NEXT_RUNTIME === 'nodejs') {
+    await import('../sentry.server.config');
+  }
+
+  if (process.env.NEXT_RUNTIME === 'edge') {
+    await import('../sentry.edge.config');
+  }
+}
+
+export const onRequestError = Sentry.captureRequestError;

apps/events-helsinki/vitest.config.ts

@@ -101,6 +101,8 @@ export default defineConfig({
         'src/i18n.ts', // Excludes i18n file
         'src/logger.ts', // Excludes logger file
         'src/middleware.ts', // Excludes middleware file
+        'src/instrumentation.ts', // Excludes instrumentation file
+        'src/instrumentation-client.ts', // Excludes instrumentation client file
         'src/index.tsx', // Excludes root index file
         'src/**/*.d.ts', // Excludes all declaration files
         'src/**/*.test.ts', // Excludes all .test.ts files