ref(nextjs): Make build-time value injection turbopack compatible

Author: Luca Forstner

packages/nextjs/src/client/index.ts

@@ -2,7 +2,6 @@ import { addEventProcessor, applySdkMetadata } from '@sentry/core';
 import type { BrowserOptions } from '@sentry/react';
 import { getDefaultIntegrations as getReactDefaultIntegrations, init as reactInit } from '@sentry/react';
 import type { Client, EventProcessor, Integration } from '@sentry/types';
-import { GLOBAL_OBJ } from '@sentry/utils';
 
 import { devErrorSymbolicationEventProcessor } from '../common/devErrorSymbolicationEventProcessor';
 import { getVercelEnv } from '../common/getVercelEnv';
@@ -15,10 +14,6 @@ export * from '@sentry/react';
 
 export { captureUnderscoreErrorException } from '../common/pages-router-instrumentation/_error';
 
-const globalWithInjectedValues = GLOBAL_OBJ as typeof GLOBAL_OBJ & {
-  __rewriteFramesAssetPrefixPath__: string;
-};
-
 // Treeshakable guard to remove all code related to tracing
 declare const __SENTRY_TRACING__: boolean;
 
@@ -64,7 +59,7 @@ function getDefaultIntegrations(options: BrowserOptions): Integration[] {
 
   // This value is injected at build time, based on the output directory specified in the build config. Though a default
   // is set there, we set it here as well, just in case something has gone wrong with the injection.
-  const assetPrefixPath = globalWithInjectedValues.__rewriteFramesAssetPrefixPath__ || '';
+  const assetPrefixPath = process.env.__sentryRewriteFramesAssetPrefixPath || '';
   customDefaultIntegrations.push(nextjsClientStackFrameNormalizationIntegration({ assetPrefixPath }));
 
   return customDefaultIntegrations;

packages/nextjs/src/client/tunnelRoute.ts

@@ -1,17 +1,13 @@
 import type { BrowserOptions } from '@sentry/react';
-import { GLOBAL_OBJ, dsnFromString, logger } from '@sentry/utils';
+import { dsnFromString, logger } from '@sentry/utils';
 
 import { DEBUG_BUILD } from '../common/debug-build';
 
-const globalWithInjectedValues = GLOBAL_OBJ as typeof GLOBAL_OBJ & {
-  __sentryRewritesTunnelPath__?: string;
-};
-
 /**
  * Applies the `tunnel` option to the Next.js SDK options based on `withSentryConfig`'s `tunnelRoute` option.
  */
 export function applyTunnelRouteOption(options: BrowserOptions): void {
-  const tunnelRouteOption = globalWithInjectedValues.__sentryRewritesTunnelPath__;
+  const tunnelRouteOption = process.env.__sentryRewritesTunnelPath;
   if (tunnelRouteOption && options.dsn) {
     const dsnComponents = dsnFromString(options.dsn);
     if (!dsnComponents) {

packages/nextjs/src/common/devErrorSymbolicationEventProcessor.ts

@@ -1,6 +1,5 @@
 import { suppressTracing } from '@sentry/core';
 import type { Event, EventHint } from '@sentry/types';
-import { GLOBAL_OBJ } from '@sentry/utils';
 import type { StackFrame } from 'stacktrace-parser';
 import * as stackTraceParser from 'stacktrace-parser';
 
@@ -10,10 +9,6 @@ type OriginalStackFrameResponse = {
   sourcePackage?: string;
 };
 
-const globalWithInjectedValues = GLOBAL_OBJ as typeof GLOBAL_OBJ & {
-  __sentryBasePath?: string;
-};
-
 async function resolveStackFrame(
   frame: StackFrame,
   error: Error,
@@ -32,7 +27,7 @@ async function resolveStackFrame(
       params.append(key, (frame[key as keyof typeof frame] ?? '').toString());
     });
 
-    let basePath = globalWithInjectedValues.__sentryBasePath ?? '';
+    let basePath = process.env.__sentryBasePath ?? '';
 
     // Prefix the basepath with a slash if it doesn't have one
     if (basePath !== '' && !basePath.match(/^\//)) {

packages/nextjs/src/config/types.ts

@@ -49,6 +49,7 @@ export type NextConfigObject = {
     clientTraceMetadata?: string[];
   };
   productionBrowserSourceMaps?: boolean;
+  env?: Record<string, string>;
 };
 
 export type SentryBuildOptions = {
@@ -550,7 +551,7 @@ export type ModuleRuleUseProperty = {
  * 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;
+  __sentryRewriteFramesDistDir?: string;
   SENTRY_RELEASE?: { id: string };
   SENTRY_RELEASES?: { [key: string]: { id: string } };
 };

packages/nextjs/src/config/webpack.ts

@@ -561,6 +561,8 @@ function setUpModuleRules(newConfig: WebpackConfigObject): WebpackConfigObjectWi
 /**
  * Adds loaders to inject values on the global object based on user configuration.
  */
+// TODO(v9): Remove this loader and replace it with a nextConfig.env (https://web.archive.org/web/20240917153554/https://nextjs.org/docs/app/api-reference/next-config-js/env) or define based (https://github.com/vercel/next.js/discussions/71476) approach.
+// In order to remove this loader though we need to make sure the minimum supported Next.js version includes this PR (https://github.com/vercel/next.js/pull/61194), otherwise the nextConfig.env based approach will not work, as our SDK code is not processed by Next.js.
 function addValueInjectionLoader(
   newConfig: WebpackConfigObjectWithModuleRules,
   userNextConfig: NextConfigObject,
@@ -571,7 +573,7 @@ function addValueInjectionLoader(
 
   const isomorphicValues = {
     // `rewritesTunnel` set by the user in Next.js config
-    __sentryRewritesTunnelPath__:
+    __sentryRewritesTunnelPath:
       userSentryOptions.tunnelRoute !== undefined && userNextConfig.output !== 'export'
         ? `${userNextConfig.basePath ?? ''}${userSentryOptions.tunnelRoute}`
         : undefined,
@@ -588,14 +590,14 @@ function addValueInjectionLoader(
     ...isomorphicValues,
     // Make sure that if we have a windows path, the backslashes are interpreted as such (rather than as escape
     // characters)
-    __rewriteFramesDistDir__: userNextConfig.distDir?.replace(/\\/g, '\\\\') || '.next',
+    __sentryRewriteFramesDistDir: userNextConfig.distDir?.replace(/\\/g, '\\\\') || '.next',
   };
 
   const clientValues = {
     ...isomorphicValues,
     // Get the path part of `assetPrefix`, minus any trailing slash. (We use a placeholder for the origin if
     // `assetPrefix` doesn't include one. Since we only care about the path, it doesn't matter what it is.)
-    __rewriteFramesAssetPrefixPath__: assetPrefix
+    __sentryRewriteFramesAssetPrefixPath: assetPrefix
       ? new URL(assetPrefix, 'http://dogs.are.great').pathname.replace(/\/$/, '')
       : '',
   };

packages/nextjs/src/config/webpackPluginOptions.ts

@@ -11,7 +11,7 @@ export function getWebpackPluginOptions(
   buildContext: BuildContext,
   sentryBuildOptions: SentryBuildOptions,
 ): SentryWebpackPluginOptions {
-  const { buildId, isServer, config: userNextConfig, dir, nextRuntime } = buildContext;
+  const { isServer, config: userNextConfig, dir, nextRuntime } = buildContext;
 
   const prefixInsert = !isServer ? 'Client' : nextRuntime === 'edge' ? 'Edge' : 'Node.js';
 
@@ -93,8 +93,8 @@ export function getWebpackPluginOptions(
       ...sentryBuildOptions.unstable_sentryWebpackPluginOptions?.sourcemaps,
     },
     release: {
-      inject: false, // The webpack plugin's release injection breaks the `app` directory - we inject the release manually with the value injection loader instead.
-      name: sentryBuildOptions.release?.name ?? getSentryRelease(buildId),
+      inject: false, // The webpack plugin's release injection breaks the `app` directory - we inject with nextConfig.env instead
+      name: sentryBuildOptions.release?.name ?? getSentryRelease('TODO'),
       create: sentryBuildOptions.release?.create,
       finalize: sentryBuildOptions.release?.finalize,
       dist: sentryBuildOptions.release?.dist,

packages/nextjs/src/config/withSentryConfig.ts

@@ -2,6 +2,7 @@
 import { isThenable, parseSemver } from '@sentry/utils';
 
 import * as fs from 'fs';
+import { getSentryRelease } from '@sentry/node';
 import { sync as resolveSync } from 'resolve';
 import type {
   ExportedNextConfig as NextConfig,
@@ -73,6 +74,8 @@ function getFinalConfigObject(
     }
   }
 
+  setUpBuildTimeVariables(incomingUserNextConfigObject);
+
   const nextJsVersion = getNextjsVersion();
 
   // Add the `clientTraceMetadata` experimental option based on Next.js version. The option got introduced in Next.js version 15.0.0 (actually 14.3.0-canary.64).
@@ -253,6 +256,37 @@ function setUpTunnelRewriteRules(userNextConfig: NextConfigObject, tunnelPath: s
   };
 }
 
+function setUpBuildTimeVariables(userNextConfig: NextConfigObject, userSentryOptions: SentryBuildOptions): void {
+  const assetPrefix = userNextConfig.assetPrefix || userNextConfig.basePath || '';
+
+  const buildTimeVariables = {
+    // `rewritesTunnel` set by the user in Next.js config
+    __sentryRewritesTunnelPath:
+      userSentryOptions.tunnelRoute !== undefined && userNextConfig.output !== 'export'
+        ? `${userNextConfig.basePath ?? ''}${userSentryOptions.tunnelRoute}`
+        : undefined,
+    SENTRY_RELEASE:
+      process.env.NODE_ENV === 'production'
+        ? undefined
+        : { id: userSentryOptions.release?.name ?? getSentryRelease('TODO') },
+    __sentryBasePath: userNextConfig.basePath,
+    // Make sure that if we have a windows path, the backslashes are interpreted as such (rather than as escape
+    // characters)
+    __sentryRewriteFramesDistDir: userNextConfig.distDir?.replace(/\\/g, '\\\\') || '.next',
+    // Get the path part of `assetPrefix`, minus any trailing slash. (We use a placeholder for the origin if
+    // `assetPrefix` doesn't include one. Since we only care about the path, it doesn't matter what it is.)
+    __sentryRewriteFramesAssetPrefixPath: assetPrefix
+      ? new URL(assetPrefix, 'http://dogs.are.great').pathname.replace(/\/$/, '')
+      : '',
+  };
+
+  if (typeof userNextConfig.env === 'object') {
+    userNextConfig.env = { ...buildTimeVariables, ...userNextConfig.env };
+  } else if (userNextConfig.env === undefined) {
+    userNextConfig.env = buildTimeVariables;
+  }
+}
+
 function getNextjsVersion(): string | undefined {
   const nextjsPackageJsonPath = resolveNextjsPackageJson();
   if (nextjsPackageJsonPath) {

packages/nextjs/src/edge/index.ts

@@ -21,7 +21,7 @@ export { captureUnderscoreErrorException } from '../common/pages-router-instrume
 export type EdgeOptions = VercelEdgeOptions;
 
 const globalWithInjectedValues = GLOBAL_OBJ as typeof GLOBAL_OBJ & {
-  __rewriteFramesDistDir__?: string;
+  __sentryRewriteFramesDistDir?: string;
 };
 
 /** Inits the Sentry NextJS SDK on the Edge Runtime. */
@@ -36,7 +36,7 @@ export function init(options: VercelEdgeOptions = {}): void {
 
   // This value is injected at build time, based on the output directory specified in the build config. Though a default
   // is set there, we set it here as well, just in case something has gone wrong with the injection.
-  const distDirName = globalWithInjectedValues.__rewriteFramesDistDir__;
+  const distDirName = globalWithInjectedValues.__sentryRewriteFramesDistDir;
 
   if (distDirName) {
     customDefaultIntegrations.push(distDirRewriteFramesIntegration({ distDirName }));

packages/nextjs/src/edge/rewriteFramesIntegration.ts

@@ -1,10 +1,6 @@
 import { defineIntegration, rewriteFramesIntegration as originalRewriteFramesIntegration } from '@sentry/core';
 import type { IntegrationFn, StackFrame } from '@sentry/types';
-import { GLOBAL_OBJ, escapeStringForRegex } from '@sentry/utils';
-
-const globalWithInjectedValues = GLOBAL_OBJ as typeof GLOBAL_OBJ & {
-  __rewriteFramesDistDir__?: string;
-};
+import { escapeStringForRegex } from '@sentry/utils';
 
 type StackFrameIteratee = (frame: StackFrame) => StackFrame;
 interface RewriteFramesOptions {
@@ -14,9 +10,8 @@ interface RewriteFramesOptions {
 }
 
 export const customRewriteFramesIntegration = ((options?: RewriteFramesOptions) => {
-  // This value is injected at build time, based on the output directory specified in the build config. Though a default
-  // is set there, we set it here as well, just in case something has gone wrong with the injection.
-  const distDirName = globalWithInjectedValues.__rewriteFramesDistDir__;
+  // This value is injected at build time, based on the output directory specified in the build config.
+  const distDirName = process.env.__sentryRewriteFramesDistDir;
 
   if (distDirName) {
     const distDirAbsPath = distDirName.replace(/(\/|\\)$/, ''); // We strip trailing slashes because "app:///_next" also doesn't have one

packages/nextjs/src/server/index.ts

@@ -42,8 +42,8 @@ export * from '@sentry/node';
 export { captureUnderscoreErrorException } from '../common/pages-router-instrumentation/_error';
 
 const globalWithInjectedValues = GLOBAL_OBJ as typeof GLOBAL_OBJ & {
-  __rewriteFramesDistDir__?: string;
-  __sentryRewritesTunnelPath__?: string;
+  __sentryRewriteFramesDistDir?: string;
+  __sentryRewritesTunnelPath?: string;
 };
 
 /**
@@ -109,7 +109,7 @@ export function init(options: NodeOptions): NodeClient | undefined {
 
   // This value is injected at build time, based on the output directory specified in the build config. Though a default
   // is set there, we set it here as well, just in case something has gone wrong with the injection.
-  const distDirName = globalWithInjectedValues.__rewriteFramesDistDir__;
+  const distDirName = globalWithInjectedValues.__sentryRewriteFramesDistDir;
   if (distDirName) {
     customDefaultIntegrations.push(distDirRewriteFramesIntegration({ distDirName }));
   }
@@ -212,8 +212,8 @@ export function init(options: NodeOptions): NodeClient | undefined {
 
           // Filter out transactions for requests to the tunnel route
           if (
-            globalWithInjectedValues.__sentryRewritesTunnelPath__ &&
-            event.transaction === `POST ${globalWithInjectedValues.__sentryRewritesTunnelPath__}`
+            globalWithInjectedValues.__sentryRewritesTunnelPath &&
+            event.transaction === `POST ${globalWithInjectedValues.__sentryRewritesTunnelPath}`
           ) {
             return null;
           }