ref(nextjs): Use loader for rather than webpack plugin for injecting release (#6404)

This replicates the release-injection functionality provided by the webpack plugin using the prefix loader instead, in hopes of fixing #5734, wherein the release value is somehow getting stuck on an old value. (My theory is that the file injected by the webpack plugin to inject the release is getting cached. This therefore switches to injecting the code setting the release using a loader, so that it's in the same file as, and just before, the `Sentry.init()` call.)

Author: lobsterkatie

packages/nextjs/rollup.npm.config.js

@@ -22,6 +22,7 @@ export default [
       entrypoints: [
         'src/config/templates/serverRewriteFramesPrefixLoaderTemplate.ts',
         'src/config/templates/clientRewriteFramesPrefixLoaderTemplate.ts',
+        'src/config/templates/releasePrefixLoaderTemplate.ts',
         'src/config/templates/pageProxyLoaderTemplate.ts',
         'src/config/templates/apiProxyLoaderTemplate.ts',
       ],

packages/nextjs/src/config/templates/releasePrefixLoaderTemplate.ts

@@ -0,0 +1,16 @@
+/* eslint-disable no-constant-condition */
+
+import { GLOBAL_OBJ } from '@sentry/utils';
+
+import { EnhancedGlobal } from '../types';
+
+const globalObj = GLOBAL_OBJ as EnhancedGlobal;
+
+globalObj.SENTRY_RELEASE = { id: '__RELEASE__' };
+
+// Enable module federation support (see https://github.com/getsentry/sentry-webpack-plugin/pull/307)
+if ('__PROJECT__') {
+  const key = '__ORG__' ? '__PROJECT__@__ORG__' : '__PROJECT__';
+  globalObj.SENTRY_RELEASES = globalObj.SENTRY_RELEASES || {};
+  globalObj.SENTRY_RELEASES[key] = { id: '__RELEASE__' };
+}

packages/nextjs/src/config/types.ts

@@ -1,3 +1,4 @@
+import { GLOBAL_OBJ } from '@sentry/utils';
 import { SentryCliPluginOptions } from '@sentry/webpack-plugin';
 import { WebpackPluginInstance } from 'webpack';
 
@@ -155,3 +156,12 @@ export type ModuleRuleUseProperty = {
   loader?: string;
   options?: Record<string, unknown>;
 };
+
+/**
+ * Global with values we add when we inject code into people's pages, for use at runtime.
+ */
+export type EnhancedGlobal = typeof GLOBAL_OBJ & {
+  __rewriteFramesDistDir__?: string;
+  SENTRY_RELEASE?: { id: string };
+  SENTRY_RELEASES?: { [key: string]: { id: string } };
+};

packages/nextjs/src/config/webpack.ts

@@ -69,6 +69,12 @@ export function constructWebpackConfigFunction(
     buildContext: BuildContext,
   ): WebpackConfigObject {
     const { isServer, dev: isDev, dir: projectDir } = buildContext;
+    const webpackPluginOptions = getWebpackPluginOptions(
+      buildContext,
+      userSentryWebpackPluginOptions,
+      userSentryOptions,
+    );
+
     let rawNewConfig = { ...incomingConfig };
 
     // if user has custom webpack config (which always takes the form of a function), run it so we have actual values to
@@ -84,6 +90,24 @@ export function constructWebpackConfigFunction(
     // Add a loader which will inject code that sets global values for use by `RewriteFrames`
     addRewriteFramesLoader(newConfig, isServer ? 'server' : 'client', userNextConfig);
 
+    newConfig.module.rules.push({
+      test: /sentry\.(server|client)\.config\.(jsx?|tsx?)/,
+      use: [
+        {
+          // Inject the release value the same way the webpack plugin does.
+          loader: path.resolve(__dirname, 'loaders/prefixLoader.js'),
+          options: {
+            templatePrefix: 'release',
+            replacements: [
+              ['__RELEASE__', webpackPluginOptions.release || process.env.SENTRY_RELEASE],
+              ['__ORG__', webpackPluginOptions.org || process.env.SENTRY_ORG],
+              ['__PROJECT__', webpackPluginOptions.project || process.env.SENTRY_PROJECT || ''],
+            ],
+          },
+        },
+      ],
+    });
+
     if (isServer) {
       if (userSentryOptions.autoInstrumentServerFunctions !== false) {
         const pagesDir = newConfig.resolve?.alias?.['private-next-pages'] as string;
@@ -194,11 +218,7 @@ export function constructWebpackConfigFunction(
       }
 
       newConfig.plugins = newConfig.plugins || [];
-      newConfig.plugins.push(
-        new SentryWebpackPlugin(
-          getWebpackPluginOptions(buildContext, userSentryWebpackPluginOptions, userSentryOptions),
-        ),
-      );
+      newConfig.plugins.push(new SentryWebpackPlugin(webpackPluginOptions));
     }
 
     return newConfig;
@@ -527,8 +547,9 @@ export function getWebpackPluginOptions(
     configFile: hasSentryProperties ? 'sentry.properties' : undefined,
     stripPrefix: ['webpack://_N_E/'],
     urlPrefix,
-    entries: (entryPointName: string) =>
-      shouldAddSentryToEntryPoint(entryPointName, isServer, userSentryOptions.excludeServerRoutes, isDev),
+    // We don't want to inject the release using the webpack plugin because we're instead doing it via the prefix loader
+    // combined with the release prefix loader template.
+    entries: [],
     release: getSentryRelease(buildId),
     dryRun: isDev,
   });

packages/nextjs/test/config/loaders.test.ts

@@ -7,6 +7,7 @@ import {
   exportedNextConfig,
   serverBuildContext,
   serverWebpackConfig,
+  userSentryWebpackPluginConfig,
 } from './fixtures';
 import { materializeFinalWebpackConfig } from './testUtils';
 
@@ -57,6 +58,32 @@ describe('webpack loaders', () => {
         ],
       });
     });
+
+    it('adds release prefix loader to server config', async () => {
+      const finalWebpackConfig = await materializeFinalWebpackConfig({
+        exportedNextConfig,
+        incomingWebpackConfig: serverWebpackConfig,
+        incomingWebpackBuildContext: serverBuildContext,
+        userSentryWebpackPluginConfig: userSentryWebpackPluginConfig,
+      });
+
+      expect(finalWebpackConfig.module.rules).toContainEqual({
+        test: /sentry\.(server|client)\.config\.(jsx?|tsx?)/,
+        use: [
+          {
+            loader: expect.stringEndingWith('prefixLoader.js'),
+            options: {
+              templatePrefix: 'release',
+              replacements: [
+                ['__RELEASE__', 'doGsaREgReaT'],
+                ['__ORG__', 'squirrelChasers'],
+                ['__PROJECT__', 'simulator'],
+              ],
+            },
+          },
+        ],
+      });
+    });
   });
 
   describe('client loaders', () => {
@@ -77,6 +104,32 @@ describe('webpack loaders', () => {
         ],
       });
     });
+
+    it('adds release prefix loader to client config', async () => {
+      const finalWebpackConfig = await materializeFinalWebpackConfig({
+        exportedNextConfig,
+        incomingWebpackConfig: clientWebpackConfig,
+        incomingWebpackBuildContext: clientBuildContext,
+        userSentryWebpackPluginConfig: userSentryWebpackPluginConfig,
+      });
+
+      expect(finalWebpackConfig.module.rules).toContainEqual({
+        test: /sentry\.(server|client)\.config\.(jsx?|tsx?)/,
+        use: [
+          {
+            loader: expect.stringEndingWith('prefixLoader.js'),
+            options: {
+              templatePrefix: 'release',
+              replacements: [
+                ['__RELEASE__', 'doGsaREgReaT'],
+                ['__ORG__', 'squirrelChasers'],
+                ['__PROJECT__', 'simulator'],
+              ],
+            },
+          },
+        ],
+      });
+    });
   });
 });
 

packages/nextjs/test/config/webpack/sentryWebpackPlugin.test.ts

@@ -36,7 +36,7 @@ describe('Sentry webpack plugin config', () => {
         authToken: 'dogsarebadatkeepingsecrets', // picked up from env
         stripPrefix: ['webpack://_N_E/'], // default
         urlPrefix: '~/_next', // default
-        entries: expect.any(Function), // default, tested separately elsewhere
+        entries: [], // default, tested separately elsewhere
         release: 'doGsaREgReaT', // picked up from env
         dryRun: false, // based on buildContext.dev being false
       }),