Migrating to @sentry/nextjs (removing @sentry/browser and @sentry/node)

.env

@@ -40,3 +40,8 @@ NEXT_PUBLIC_LOCIZE_PROJECT_ID=658fc999-dfa8-4307-b9d7-b4870ad5b968
 # Used to send analytics usage
 # Tip: The value being used below is valid, so that you can run the demo locally without having to create your own Amplitude account, but you cannot access the data
 NEXT_PUBLIC_AMPLITUDE_API_KEY=5ea02d86a6840c165fcc01377131fa13
+
+# Tells webpack how to bundle the code for sentry.server.config.js.
+# See https://github.com/getsentry/sentry-docs/issues/3721#issuecomment-858987529
+# Will be injected automatically by "@sentry/nextjs" into ".env.local"
+SENTRY_SERVER_INIT_PATH=.next/server/sentry/initServerSDK.js

.env.local.example

@@ -47,6 +47,12 @@ LOCIZE_API_KEY=
 # Example (fake value): https://[email protected]/1234567
 SENTRY_DSN=
 
+# Sentry authentication token, can be found under "Settings => Account => API => Auth Tokens" at https://sentry.io/settings/account/api/auth-tokens/
+# Used to send soure maps to Sentry
+# See https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#environment-variables
+# Requires project:releases and org:read - See https://github.com/getsentry/sentry-webpack-plugin#options
+SENTRY_AUTH_TOKEN=
+
 # Github "personal access token", can be generated at "Settings > Developer settings > Personal access tokens" at https://github.com/settings/tokens
 # Used by "Workflow Dispatch" GitHub Actions
 # Needs the following scopes:

.storybook/webpack.config.js

@@ -30,9 +30,5 @@ module.exports = async ({
     console: true,
   };
 
-  // XXX See https://github.com/vercel/next.js/blob/canary/examples/with-sentry-simple/next.config.js
-  // Because StoryBook only compiles for client and has no server runtime, we must replace backend-related libs like @sentry/node to their browser counterpart
-  config.resolve.alias['@sentry/node'] = '@sentry/browser';
-
   return config;
 };

next.config.js

@@ -3,6 +3,7 @@ const nextSourceMaps = require('@zeit/next-source-maps');
 const createNextPluginPreval = require('next-plugin-preval/config');
 const packageJson = require('./package');
 const i18nConfig = require('./src/modules/core/i18n/i18nConfig');
+const { withSentryConfig } = require('@sentry/nextjs');
 
 const withNextPluginPreval = createNextPluginPreval();
 const withSourceMaps = nextSourceMaps();
@@ -17,6 +18,22 @@ const publicBasePaths = ['robots', 'static', 'favicon.ico']; // All items (folde
 const noRedirectBasePaths = [...supportedLocales, ...publicBasePaths, ...noRedirectBlacklistedPaths]; // Will disable url rewrite for those items (should contain all supported languages and all public base paths)
 const date = new Date();
 const GIT_COMMIT_SHA_SHORT = typeof process.env.GIT_COMMIT_SHA === 'string' && process.env.GIT_COMMIT_SHA.substring(0, 8);
+const sentryWebpackPluginOptions = {
+  // 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.
+
+  // XXX The error "Error: Cannot find module '/.next/server/sentry/initServerSDK.js'" in the console is a false-positive error
+  //  See https://github.com/getsentry/sentry-docs/issues/3721
+
+  debug: process.env.NODE_ENV === 'development', // You'll need to configure "debug" in sentry.x.config.js files as well
+  dryRun: process.env.NODE_ENV === 'development', // Don't upload source maps during dev (doesn't work anyway)
+  silent: true, // Suppresses all logs, because "[Sentry Webpack Plugin]" logs are too noisy
+};
 
 console.debug(`Building Next with NODE_ENV="${process.env.NODE_ENV}" NEXT_PUBLIC_APP_STAGE="${process.env.NEXT_PUBLIC_APP_STAGE}" for NEXT_PUBLIC_CUSTOMER_REF="${process.env.NEXT_PUBLIC_CUSTOMER_REF}" using GIT_COMMIT_SHA=${process.env.GIT_COMMIT_SHA} and GIT_COMMIT_REF=${process.env.GIT_COMMIT_REF}`);
 
@@ -33,14 +50,22 @@ console.debug(`Release version resolved from tags: "${APP_RELEASE_TAG}" (matchin
  * The below config applies to the whole application.
  * next.config.js gets used by the Next.js server and build phases, and it's not included in the browser build.
  *
+ * The Sentry doc states:
+ *  "Make sure adding "withSentryConfig" is the last code to run before exporting, to  ensure that your source maps include changes from all other Webpack plugins."
+ * XXX DO NOT follow that guideline blindly! "withNextPluginPreval" must be the last code to run when exporting.
+ *  See https://github.com/getsentry/sentry-docs/issues/3723
+ *  See https://github.com/ricokahler/next-plugin-preval/issues/42
+ *
  * XXX Not all configuration options are listed below, we only kept those of most interest.
  *  You'll need to dive into Next.js own documentation to find out about what's not included.
  *  Basically, we focused on options that seemed important for a SSG/SSR app running on serverless mode (Vercel).
  *  Also, we included some options by are not using them, this is mostly to help make you aware of those options, in case you'd need them.
  *
  * @see https://nextjs.org/docs/api-reference/next.config.js/introduction
+ * @see https://docs.sentry.io/platforms/javascript/guides/nextjs/
+ * @see https://github.com/getsentry/sentry-webpack-plugin#options
  */
-module.exports = withNextPluginPreval(withBundleAnalyzer(withSourceMaps({
+module.exports = withNextPluginPreval(withSentryConfig(withBundleAnalyzer(withSourceMaps({
   // basepath: '', // If you want Next.js to cover only a subsection of the domain. See https://nextjs.org/docs/api-reference/next.config.js/basepath
   // target: 'serverless', // Automatically enabled on Vercel, you may need to manually opt-in if you're not using Vercel. See https://nextjs.org/docs/api-reference/next.config.js/build-target#serverless-target
   // trailingSlash: false, // By default Next.js will redirect urls with trailing slashes to their counterpart without a trailing slash. See https://nextjs.org/docs/api-reference/next.config.js/trailing-slash
@@ -59,7 +84,7 @@ module.exports = withNextPluginPreval(withBundleAnalyzer(withSourceMaps({
   reactStrictMode: true,
 
   /**
-   * Environment variables added to JS bundle
+   * Environment variables added to JS bundle.
    *
    * XXX All env variables defined in ".env*" files that aren't public (those that don't start with "NEXT_PUBLIC_") MUST manually be made available at build time below.
    *  They're necessary on Vercel for runtime execution (SSR, SSG with revalidate, everything that happens server-side will need those).
@@ -71,11 +96,13 @@ module.exports = withNextPluginPreval(withBundleAnalyzer(withSourceMaps({
    * @see https://nextjs.org/docs/api-reference/next.config.js/environment-variables
    */
   env: {
+    // Most sensitive env variables
     GITHUB_DISPATCH_TOKEN: process.env.GITHUB_DISPATCH_TOKEN,
     AIRTABLE_API_KEY: process.env.AIRTABLE_API_KEY,
     AIRTABLE_BASE_ID: process.env.AIRTABLE_BASE_ID,
     LOCIZE_API_KEY: process.env.LOCIZE_API_KEY,
     SENTRY_DSN: process.env.SENTRY_DSN,
+    NEXT_PUBLIC_SENTRY_DSN: process.env.SENTRY_DSN, // Sentry DSN must be provided to the browser for error reporting to work there
 
     // Vercel env variables - See https://vercel.com/docs/environment-variables#system-environment-variables
     VERCEL: process.env.VERCEL,
@@ -340,32 +367,14 @@ module.exports = withNextPluginPreval(withBundleAnalyzer(withSourceMaps({
         // Those variables are considered public because they are available at build time and at run time (they'll be replaced during initial build, by their value)
         plugin.definitions['process.env.NEXT_PUBLIC_APP_BUILD_ID'] = JSON.stringify(buildId);
         plugin.definitions['process.env.NEXT_PUBLIC_APP_VERSION_RELEASE'] = JSON.stringify(APP_VERSION_RELEASE);
+        plugin.definitions['process.env.SENTRY_RELEASE'] = JSON.stringify(APP_VERSION_RELEASE); // Necessary to forward it automatically to source maps
       }
     });
 
     if (isServer) { // Trick to only log once
       console.debug(`[webpack] Building release "${APP_VERSION_RELEASE}" using NODE_ENV="${process.env.NODE_ENV}" ${process.env.IS_SERVER_INITIAL_BUILD ? 'with IS_SERVER_INITIAL_BUILD="1"' : ''}`);
     }
 
-    // XXX See https://github.com/vercel/next.js/blob/canary/examples/with-sentry-simple/next.config.js
-    // In `pages/_app.js`, Sentry is imported from @sentry/node. While
-    // @sentry/browser will run in a Node.js environment, @sentry/node will use
-    // Node.js-only APIs to catch even more unhandled exceptions.
-    //
-    // This works well when Next.js is SSRing your page on a server with
-    // Node.js, but it is not what we want when your client-side bundle is being
-    // executed by a browser.
-    //
-    // Luckily, Next.js will call this webpack function twice, once for the
-    // server and once for the client. Read more:
-    // https://nextjs.org/docs#customizing-webpack-config
-    //
-    // So ask Webpack to replace @sentry/node imports with @sentry/browser when
-    // building the browser's bundle
-    if (!isServer) {
-      config.resolve.alias['@sentry/node'] = '@sentry/browser';
-    }
-
     return config;
   },
 
@@ -399,4 +408,4 @@ module.exports = withNextPluginPreval(withBundleAnalyzer(withSourceMaps({
   // },
 
   poweredByHeader: false, // See https://nextjs.org/docs/api-reference/next.config.js/disabling-x-powered-by
-})));
+})), sentryWebpackPluginOptions));

package.json

@@ -116,8 +116,7 @@
     "@fortawesome/free-regular-svg-icons": "5.15.3",
     "@fortawesome/free-solid-svg-icons": "5.15.3",
     "@fortawesome/react-fontawesome": "0.1.14",
-    "@sentry/browser": "6.7.2",
-    "@sentry/node": "6.7.2",
+    "@sentry/nextjs": "6.7.2",
     "@types/lodash.isequal": "4.5.5",
     "@unly/simple-logger": "1.0.0",
     "@unly/universal-language-detector": "2.0.3",

process.env.d.ts

@@ -31,6 +31,8 @@ declare global {
       NEXT_PUBLIC_LOCIZE_PROJECT_ID: string;
       NEXT_PUBLIC_NRN_PRESET: string;
       SENTRY_DSN: string;
+      NEXT_PUBLIC_SENTRY_DSN: string; // Public version of SENTRY_DSN made available to the browser (value is identical to SENTRY_DSN)
+      SENTRY_RELEASE: string;
 
       // Git env variables
       GIT_COMMIT_SHA_SHORT: string;

sentry.client.config.js

@@ -0,0 +1,5 @@
+// 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/
+
+import './src/modules/core/sentry/init';

sentry.properties

@@ -0,0 +1,4 @@
+defaults.url=https://sentry.io/
+defaults.org=unly
+defaults.project=next-right-now
+cli.executable=../../../.npm/_npx/a8388072043b4cbc/node_modules/@sentry/cli/bin/sentry-cli

sentry.server.config.js

@@ -0,0 +1,5 @@
+// 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 './src/modules/core/sentry/init';

src/app/components/BrowserPageBootstrap.tsx

@@ -35,7 +35,7 @@ import {
   AmplitudeProvider,
 } from '@amplitude/react-amplitude';
 import { useTheme } from '@emotion/react';
-import * as Sentry from '@sentry/node';
+import * as Sentry from '@sentry/nextjs';
 import { AmplitudeClient } from 'amplitude-js';
 import React from 'react';
 import { useTranslation } from 'react-i18next';

src/app/components/MultiversalAppBootstrap.tsx

@@ -28,7 +28,7 @@ import { NotFound404PageName } from '@/pages/404';
 import ErrorPage from '@/pages/_error';
 import { NO_AUTO_PREVIEW_MODE_KEY } from '@/pages/api/preview';
 import { ThemeProvider } from '@emotion/react';
-import * as Sentry from '@sentry/node';
+import * as Sentry from '@sentry/nextjs';
 import { isBrowser } from '@unly/utils';
 import { i18n } from 'i18next';
 import isEmpty from 'lodash.isempty';
@@ -301,11 +301,13 @@ const MultiversalAppBootstrap: React.FunctionComponent<Props> = (props): JSX.Ele
         });
       }
     } else {
-      // XXX Opinionated: Record an exception in Sentry for 404, if you don't want this then uncomment the below code
-      const err = new Error(`Page not found (404) for "${router?.asPath}"`);
+      if (!process.env.IS_SERVER_INITIAL_BUILD) { // Avoids capturing false-positive 404 pages when building the 404 page
+        // XXX Opinionated: Record an exception in Sentry for 404, if you don't want this then uncomment the below code
+        const err = new Error(`Page not found (404) for "${router?.asPath}"`);
 
-      logger.warn(err);
-      Sentry.captureException(err);
+        logger.warn(err);
+        Sentry.captureException(err);
+      }
     }
 
     const i18nextInstance: i18n = i18nextLocize(lang, i18nTranslations); // Apply i18next configuration with Locize backend

src/app/components/ServerPageBootstrap.tsx

@@ -3,7 +3,7 @@ import { OnlyServerPageProps } from '@/layouts/core/types/OnlyServerPageProps';
 import { createLogger } from '@/modules/core/logging/logger';
 import { configureSentryUserMetadata } from '@/modules/core/sentry/universal';
 import { userSessionContext } from '@/modules/core/userSession/userSessionContext';
-import * as Sentry from '@sentry/node';
+import * as Sentry from '@sentry/nextjs';
 import React from 'react';
 import { MultiversalAppBootstrapPageProps } from '../types/MultiversalAppBootstrapPageProps';
 import { MultiversalAppBootstrapProps } from '../types/MultiversalAppBootstrapProps';

src/common/components/dataDisplay/Markdown.tsx

@@ -3,7 +3,7 @@ import { Markdown as MarkdownType } from '@/modules/core/data/types/Markdown';
 import I18nBtnChangeLocale from '@/modules/core/i18n/components/I18nBtnChangeLocale';
 import I18nLink from '@/modules/core/i18n/components/I18nLink';
 import { createLogger } from '@/modules/core/logging/logger';
-import * as Sentry from '@sentry/node';
+import * as Sentry from '@sentry/nextjs';
 import classnames from 'classnames';
 import deepmerge from 'deepmerge';
 import MarkdownToJSXLib, { MarkdownToJSX } from 'markdown-to-jsx';

src/common/utils/mobile.ts

@@ -1,5 +1,5 @@
 import { createLogger } from '@/modules/core/logging/logger';
-import * as Sentry from '@sentry/node';
+import * as Sentry from '@sentry/nextjs';
 import { isBrowser } from '@unly/utils';
 
 const fileLabel = 'common/utils/mobile';

src/layouts/core/components/CoreLayout.tsx

@@ -12,7 +12,7 @@ import {
   css,
   SerializedStyles,
 } from '@emotion/react';
-import * as Sentry from '@sentry/node';
+import * as Sentry from '@sentry/nextjs';
 import classnames from 'classnames';
 import {
   NextRouter,

src/layouts/demo/components/DemoLayout.tsx

@@ -8,7 +8,7 @@ import {
   Amplitude,
   LogOnMount,
 } from '@amplitude/react-amplitude';
-import * as Sentry from '@sentry/node';
+import * as Sentry from '@sentry/nextjs';
 import classnames from 'classnames';
 import {
   NextRouter,

src/layouts/quickPreview/components/QuickPreviewLayout.tsx

@@ -7,7 +7,7 @@ import {
   LogOnMount,
 } from '@amplitude/react-amplitude';
 import { css } from '@emotion/react';
-import * as Sentry from '@sentry/node';
+import * as Sentry from '@sentry/nextjs';
 import React from 'react';
 import { Container } from 'reactstrap';
 import QuickPreviewBanner from './QuickPreviewBanner';

src/modules/core/airtable/applyRecordFallback.ts

@@ -1,4 +1,4 @@
-import * as Sentry from '@sentry/node';
+import * as Sentry from '@sentry/nextjs';
 import map from 'lodash.map';
 import { AirtableRecord } from '../data/types/AirtableRecord';
 import { GenericObject } from '../data/types/GenericObject';

src/modules/core/airtable/fetchAirtableTable.ts

@@ -1,5 +1,5 @@
 import { createLogger } from '@/modules/core/logging/logger';
-import * as Sentry from '@sentry/node';
+import * as Sentry from '@sentry/nextjs';
 import deepmerge from 'deepmerge';
 import map from 'lodash.map';
 import size from 'lodash.size';

src/modules/core/airtable/sanitizeRawAirtableDS.ts

@@ -1,4 +1,4 @@
-import * as Sentry from '@sentry/node';
+import * as Sentry from '@sentry/nextjs';
 import cloneDeep from 'lodash.clonedeep';
 import filter from 'lodash.filter';
 import find from 'lodash.find';

src/modules/core/amplitude/amplitudeBrowserClient.ts

@@ -11,7 +11,7 @@ import {
   getClientNetworkConnectionType,
   getClientNetworkInformationSpeed,
 } from '@/modules/core/networkInformation/networkInformation';
-import * as Sentry from '@sentry/node';
+import * as Sentry from '@sentry/nextjs';
 import { isBrowser } from '@unly/utils';
 import {
   AmplitudeClient,

src/modules/core/amplitude/amplitudeServerClient.ts

@@ -5,7 +5,7 @@ import { init } from '@amplitude/node';
 import { Event } from '@amplitude/types';
 import { LogLevel } from '@amplitude/types/dist/src/logger';
 import { Response } from '@amplitude/types/dist/src/response';
-import * as Sentry from '@sentry/node';
+import * as Sentry from '@sentry/nextjs';
 import { Context } from '@sentry/types';
 import startsWith from 'lodash.startswith';
 import { v1 as uuid } from 'uuid'; // XXX Use v1 for uniqueness - See https://www.sohamkamani.com/blog/2016/10/05/uuid1-vs-uuid4/

src/modules/core/cookiesManager/UniversalCookiesManager.ts

@@ -1,4 +1,4 @@
-import * as Sentry from '@sentry/node';
+import * as Sentry from '@sentry/nextjs';
 import { COOKIE_LOOKUP_KEY_LANG } from '@unly/universal-language-detector/lib';
 import { isBrowser } from '@unly/utils';
 import ServerCookies, {

src/modules/core/css/css.ts

@@ -1,5 +1,5 @@
 import { createLogger } from '@/modules/core/logging/logger';
-import * as Sentry from '@sentry/node';
+import * as Sentry from '@sentry/nextjs';
 import { getPropertyName } from 'css-to-react-native';
 import isPlainObject from 'lodash.isplainobject';
 import map from 'lodash.map';

src/modules/core/data/record.ts

@@ -1,5 +1,5 @@
 import { createLogger } from '@/modules/core/logging/logger';
-import * as Sentry from '@sentry/node';
+import * as Sentry from '@sentry/nextjs';
 import cloneDeep from 'lodash.clonedeep';
 import find from 'lodash.find';
 import get from 'lodash.get';

src/modules/core/errorHandling/DefaultErrorLayout.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import * as Sentry from '@sentry/node';
+import * as Sentry from '@sentry/nextjs';
 import * as React from 'react';
 import { Button } from 'reactstrap';
 import { GenericObject } from '../data/types/GenericObject';
@@ -48,7 +48,7 @@ const DefaultErrorLayout: React.FunctionComponent<Props> = (props): JSX.Element
         <Button
           color={'primary'}
           onClick={(): void =>
-            // @ts-ignore XXX showReportDialog is not recognised by TS (due to the webpack trick that replaces @sentry/node), but it works just fine
+            // @ts-ignore Works fine even though TS is warning, see https://github.com/getsentry/sentry-docs/issues/3720
             Sentry.showReportDialog({ eventId: errorEventId })
           }
         >

src/modules/core/githubActions/dispatchWorkflow.ts

@@ -1,6 +1,6 @@
 import { createLogger } from '@/modules/core/logging/logger';
 import { ALERT_TYPES } from '@/modules/core/sentry/config';
-import * as Sentry from '@sentry/node';
+import * as Sentry from '@sentry/nextjs';
 import { WorkflowsAPIResponse } from './types/WorkflowsAPIResponse';
 
 const fileLabel = 'modules/core/githubActions/dispatchWorkflow';

src/modules/core/githubActions/dispatchWorkflowByPath.ts

@@ -4,7 +4,7 @@ import {
   GITHUB_REPO_NAME,
 } from '@/app/constants';
 import { createLogger } from '@/modules/core/logging/logger';
-import * as Sentry from '@sentry/node';
+import * as Sentry from '@sentry/nextjs';
 import dispatchWorkflow from './dispatchWorkflow';
 import { WorkflowsAPIResponse } from './types/WorkflowsAPIResponse';
 

src/modules/core/i18n/i18n.ts

@@ -1,7 +1,7 @@
 import { Cookies } from '@/modules/core/cookiesManager/types/Cookies';
 import { GenericObject } from '@/modules/core/data/types/GenericObject';
 import { createLogger } from '@/modules/core/logging/logger';
-import * as Sentry from '@sentry/node';
+import * as Sentry from '@sentry/nextjs';
 import universalLanguageDetect from '@unly/universal-language-detector';
 import { ERROR_LEVELS } from '@unly/universal-language-detector/lib/utils/error';
 import { IncomingMessage } from 'http';

src/modules/core/i18n/i18nextLocize.ts

@@ -1,5 +1,5 @@
 import { createLogger } from '@/modules/core/logging/logger';
-import * as Sentry from '@sentry/node';
+import * as Sentry from '@sentry/nextjs';
 import { isBrowser } from '@unly/utils';
 import deepmerge from 'deepmerge';
 import i18next, { i18n } from 'i18next';

src/modules/core/js/url.ts

@@ -1,4 +1,4 @@
-import * as Sentry from '@sentry/node';
+import * as Sentry from '@sentry/nextjs';
 import { isBrowser } from '@unly/utils';
 import StringifySafe from 'json-stringify-safe';
 import startsWith from 'lodash.startswith';