Update sentry integ to official sentry/nextjs

.changeset/strong-crabs-shake.md

@@ -0,0 +1,5 @@
+---
+"web-app": minor
+---
+
+Updated to use @sentry/nextjs rather than @sentry/\*. Added monitoring routes.

.github/workflows/ci-e2e-web-app.yml

@@ -113,12 +113,11 @@ jobs:
         env:
           PRISMA_DATABASE_URL: postgresql://postgres:postgres@localhost:5432/webapp-e2e?schema=public
           # Don't need to lint / typecheck for e2e, they're done in another workflow
-          NEXTJS_IGNORE_ESLINT: 1
-          NEXTJS_IGNORE_TYPECHECK: 1
-          NEXT_DISABLE_SOURCEMAPS: 1
-          NEXT_TELEMETRY_DISABLED: 1
-          NEXT_DISABLE_SENTRY: 0
-          NEXT_SENTRY_DRY_RUN: 1
+          NEXTJS_IGNORE_ESLINT: true
+          NEXTJS_IGNORE_TYPECHECK: true
+          NEXT_DISABLE_SOURCEMAPS: true
+          NEXT_TELEMETRY_DISABLED: true
+          NEXTJS_SENTRY_UPLOAD_DRY_RUN: true
 
       - name: Install Playwright
         run: npx playwright install --with-deps chromium webkit

.github/workflows/ci-web-app.yml

@@ -109,17 +109,15 @@ jobs:
           yarn build
         env:
           # Speed up build: they are linted in a previous step
-          NEXTJS_IGNORE_ESLINT: 1
+          NEXTJS_IGNORE_ESLINT: true
           # Speed up build: they are typechecked in a previous step
-          NEXTJS_IGNORE_TYPECHECK: 1
+          NEXTJS_IGNORE_TYPECHECK: true
           # Speed up build: don't run if not needed, enable if it becomes needed
-          NEXT_DISABLE_SOURCEMAPS: 1
+          NEXT_DISABLE_SOURCEMAPS: true
           # Don't send telemetry for ci
-          NEXT_TELEMETRY_DISABLED: 1
+          NEXT_TELEMETRY_DISABLED: true
           # Fully disable sentry registration here (no overhead in build time)
-          NEXT_DISABLE_SENTRY: 1
-          # Disable sentry source map upload (when not needed)
-          NEXT_SENTRY_DRY_RUN: 1
+          NEXTJS_SENTRY_UPLOAD_DRY_RUN: true
 
       - name: Check bundle size
         working-directory: apps/web-app

.yarnrc.yml

@@ -20,6 +20,11 @@ packageExtensions:
   'next-secure-headers@*':
     peerDependencies:
       react: ^17.0.0
+  # link https://github.com/getsentry/sentry-javascript/pull/4634
+  '@sentry/nextjs@*':
+    peerDependenciesMeta:
+      webpack:
+        optional: true
 
 # Allows limiting download of native binaries to specified platforms (ie: swc, esbuild...)
 # @link https://yarnpkg.com/configuration/yarnrc#supportedArchitectures

apps/blog-app/package.json

@@ -30,11 +30,11 @@
     "clean": "rimraf --no-glob ./.next ./out ./coverage ./tsconfig.tsbuildinfo ./.eslintcache && jest --clear-cache",
     "dev": "next",
     "build": "next build",
-    "build-no-checks": "NEXTJS_IGNORE_TYPECHECK=1 NEXTJS_IGNORE_ESLINT=1 next build",
+    "build-no-checks": "cross-env NEXTJS_IGNORE_TYPECHECK=1 NEXTJS_IGNORE_ESLINT=1 next build",
     "vercel-build": "yarn share-static-hardlink && next build",
     "export": "next export",
     "start": "next start",
-    "bundle-analyze": "cross-env ANALYZE=true yarn build",
+    "bundle-analyze": "cross-env ANALYZE=true NEXTJS_IGNORE_TYPECHECK=1 NEXTJS_IGNORE_ESLINT=1 yarn build",
     "?share-static-symlink": "echo 'Use this command to link assets, locales... from shared static folder'",
     "share-static-symlink": "rimraf ./public/shared-assets && symlink-dir ../../static/assets ./public/shared-assets",
     "?share-static-hardlink": "echo 'Use this command to link assets, locales... from shared static folder'",

apps/web-app/.env

@@ -7,5 +7,13 @@
 # @see https://www.prisma.io/docs/concepts/components/prisma-client/deployment#recommended-connection-limit
 PRISMA_DATABASE_URL=postgresql://nextjs:!ChangeMe!@localhost:5432/maindb?schema=public
 
+
+# Sentry related
+# Sourcemap upload to sentry is disabled by default
+NEXTJS_SENTRY_UPLOAD_DRY_RUN=true
+SENTRY_AUTH_TOKEN=<your internal integration token>
+SENTRY_ORG=sebastien-vanvelthem
+SENTRY_PROJECT=monorepo-web-app
 NEXT_PUBLIC_SENTRY_RELEASE=
 NEXT_PUBLIC_SENTRY_DSN=
+

apps/web-app/.gitignore

@@ -29,3 +29,6 @@ yarn-error.log*
 .env.local
 .env.*.local
 
+
+# Sentry
+.sentryclirc

apps/web-app/.size-limit.js

@@ -15,8 +15,8 @@ const limitCfg = {
   defaultSize: '120kb',
   pages: {
     // Customize specific page limits if needed
-    '/_app': '120kb',
-    '/_error': '105kb',
+    '/_app': '160kb',
+    '/_error': '80kb',
     '/404': '100kb',
     '/': '105kb',
     '/demo': '105kb',

apps/web-app/e2e/pages/_monitor/sentry.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Sentry monitor pages', () => {
+  test.describe('Client-side rendered', () => {
+    test('should have a title containing error', async ({ page }) => {
+      await page.goto('/_monitor/sentry/csr-page');
+      await expect(page).toHaveTitle(/error/i);
+    });
+  });
+
+  test.describe('Server-side rendered', () => {
+    test('should have a title containing error', async ({ page }) => {
+      await page.goto('/_monitor/sentry/ssr-page');
+      await expect(page).toHaveTitle(/error/i);
+    });
+  });
+});

apps/web-app/e2e/pages/api/_monitor/sentry.spec.ts

@@ -0,0 +1,7 @@
+import { test, expect } from '@playwright/test';
+
+test('should return a status of 500', async ({ request }) => {
+  const resp = await request.get('/api/_monitor/sentry');
+  const status = resp.status();
+  expect(status).toEqual(500);
+});

apps/web-app/next.config.js

@@ -1,10 +1,11 @@
 // @ts-check
 
+// https://nextjs.org/docs/api-reference/next.config.js/introduction
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+const { withSentryConfig } = require('@sentry/nextjs');
 const pc = require('picocolors');
-
-const { i18n } = require('./next-i18next.config');
-
 const packageJson = require('./package.json');
+const { i18n } = require('./next-i18next.config');
 
 const trueEnv = ['true', '1', 'yes'];
 
@@ -18,6 +19,10 @@ const NEXTJS_IGNORE_TYPECHECK = trueEnv.includes(
   process.env?.NEXTJS_IGNORE_TYPECHECK ?? 'false'
 );
 
+const NEXTJS_SENTRY_UPLOAD_DRY_RUN = trueEnv.includes(
+  process.env?.NEXTJS_SENTRY_UPLOAD_DRY_RUN ?? 'false'
+);
+
 /**
  * A way to allow CI optimization when the build done there is not used
  * to deliver an image or deploy the files.
@@ -96,7 +101,7 @@ const nextConfig = {
   },
 
   // @link https://nextjs.org/docs/advanced-features/compiler#minification
-  swcMinify: true,
+  swcMinify: false,
 
   experimental: {
     // React 18
@@ -161,11 +166,6 @@ const nextConfig = {
    */
 
   webpack: (config, { isServer }) => {
-    if (!isServer) {
-      // Swap sentry/node by sentry/browser
-      config.resolve.alias['@sentry/node'] = '@sentry/browser';
-    }
-
     if (isServer) {
       // Till undici 4 haven't landed in prisma, we need this for docker/alpine
       // @see https://github.com/prisma/prisma/issues/6925#issuecomment-905935585
@@ -223,6 +223,18 @@ if (tmModules.length > 0) {
   config = nextConfig;
 }
 
+config = withSentryConfig(config, {
+  // Additional config options for the Sentry Webpack plugin. Keep in mind that
+  // the following options are set automatically, and overriding them is not
+  // recommended:
+  //   release, url, org, project, authToken, configFile, stripPrefix,
+  //   urlPrefix, include, ignore
+  // For all available options, see:
+  // https://github.com/getsentry/sentry-webpack-plugin#options.
+  // silent: isProd, // Suppresses all logs
+  dryRun: NEXTJS_SENTRY_UPLOAD_DRY_RUN,
+});
+
 if (process.env.ANALYZE === 'true') {
   // @ts-ignore
   const withBundleAnalyzer = require('@next/bundle-analyzer')({

apps/web-app/package.json

@@ -30,10 +30,10 @@
     "clean": "rimraf --no-glob ./.next ./out ./coverage ./tsconfig.tsbuildinfo ./.eslintcache && jest --clear-cache",
     "dev": "next",
     "build": "next build",
-    "build-no-checks": "NEXTJS_IGNORE_TYPECHECK=1 NEXTJS_IGNORE_ESLINT=1 next build",
+    "build-no-checks": "cross-env NEXTJS_IGNORE_TYPECHECK=1 NEXTJS_IGNORE_ESLINT=1 NEXTJS_SENTRY_UPLOAD_DRY_RUN=1 next build",
     "vercel-build": "yarn share-static-hardlink && next build",
     "start": "next start",
-    "bundle-analyze": "cross-env ANALYZE=true yarn build",
+    "bundle-analyze": "cross-env ANALYZE=true NEXTJS_IGNORE_TYPECHECK=1 NEXTJS_IGNORE_ESLINT=1 NEXTJS_SENTRY_UPLOAD_DRY_RUN=1 yarn build",
     "?share-static-symlink": "echo 'Use this command to link assets, locales... from shared static folder'",
     "share-static-symlink": "rimraf ./public/shared-assets && symlink-dir ../../static/assets ./public/shared-assets",
     "?share-static-hardlink": "echo 'Use this command to link assets, locales... from shared static folder'",
@@ -117,8 +117,8 @@
     "@headlessui/react": "1.5.0",
     "@mui/icons-material": "5.5.1",
     "@mui/material": "5.5.1",
-    "@sentry/browser": "6.18.2",
-    "@sentry/node": "6.18.2",
+    "@sentry/nextjs": "6.18.2",
+    "@sentry/react": "6.18.2",
     "@soluble/cache-ioredis": "0.8.6",
     "@tsed/exceptions": "6.106.0",
     "@your-org/core-lib": "workspace:^",

apps/web-app/sentry.client.config.ts

@@ -0,0 +1,39 @@
+// This file configures the initialization of Sentry on the browser.
+// The config you add here will be used whenever a page is visited.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+// Bundle size optimization
+//  - To avoid bundling @sentry/tracing (17Kb), it's possible to
+//    import '@sentry/react' rather than '@sentry/nextjs'.
+//
+// import { init as sentryInit } from '@sentry/nextjs';
+import { init as sentryInit } from '@sentry/react';
+
+sentryInit({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+  // 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: 1.0,
+
+  // ...
+  // 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') {
+      console.log('Sentry event', event);
+      console.log('Sentry hint', hint);
+    }
+    return event;
+  },
+  ignoreErrors: [
+    /**
+     * @link https://github.com/WICG/ResizeObserver/issues/38#issuecomment-422126006,
+     * @link https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded/50387233#50387233
+     */
+    'ResizeObserver loop limit exceeded',
+  ],
+});

apps/web-app/sentry.server.config.ts

@@ -0,0 +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 { init as sentryInit } from '@sentry/nextjs';
+
+sentryInit({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+  // 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: 1.0,
+  // ...
+  // 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') {
+      console.log('Sentry event', event);
+      console.log('Sentry hint', hint);
+    }
+    return event;
+  },
+});

apps/web-app/src/features/error/error.config.ts

@@ -0,0 +1,11 @@
+import type { I18nActiveNamespaces } from '@/core/i18n/i18n-namespaces.type';
+
+export type ErrorConfig = {
+  // Define installed namespaces in the type here
+  // to allow full typechecking of your translation keys.
+  i18nNamespaces: Readonly<I18nActiveNamespaces<'system'>>;
+};
+
+export const errorConfig: ErrorConfig = {
+  i18nNamespaces: ['system'],
+} as const;

apps/web-app/src/features/error/pages/error.page.tsx

@@ -0,0 +1,28 @@
+import Head from 'next/head';
+import type { FC } from 'react';
+
+type Props = {
+  statusCode?: number | null;
+  error?: Error;
+  message?: string;
+  sentryErrorId?: string;
+  children?: never;
+};
+
+export const ErrorPage: FC<Props> = (props) => {
+  const { error, sentryErrorId, message, statusCode } = props;
+
+  return (
+    <>
+      <Head>
+        <title>Error {statusCode}</title>
+      </Head>
+      <div id="nextjs-error-page">
+        <h1>Error {statusCode}</h1>
+        <p>{message}</p>
+        <p>Sentry id: {sentryErrorId}</p>
+        <p>Error: {error?.message}</p>
+      </div>
+    </>
+  );
+};

apps/web-app/src/pages/_app.tsx

@@ -1,10 +1,7 @@
 import type { EmotionCache } from '@emotion/react';
-import * as Sentry from '@sentry/browser';
-import { isNonEmptyString } from '@your-org/core-lib';
 import { appWithTranslation } from 'next-i18next';
 import type { AppProps as NextAppProps } from 'next/app';
 import Head from 'next/head';
-import { sentryBrowserInitConfig } from '@/config/sentry.config';
 import { AppProviders } from '../app-providers';
 
 /**
@@ -29,13 +26,6 @@ export type AppProps = NextAppProps & {
   emotionCache?: EmotionCache;
 };
 
-if (
-  process.env.NEXT_PUBLIC_SENTRY_DSN &&
-  isNonEmptyString(process.env.NEXT_PUBLIC_SENTRY_DSN)
-) {
-  Sentry.init(sentryBrowserInitConfig);
-}
-
 /**
  * @link https://nextjs.org/docs/advanced-features/custom-app
  */