feat(nextjs): Inject manifest into client for turbopack builds (#16902)

Author: chargome

packages/nextjs/src/config/turbopack/constructTurbopackConfig.ts

@@ -0,0 +1,78 @@
+import { logger } from '@sentry/core';
+import * as chalk from 'chalk';
+import * as path from 'path';
+import type { RouteManifest } from '../manifest/types';
+import type { NextConfigObject, TurbopackOptions, TurbopackRuleConfigItemOrShortcut } from '../types';
+
+/**
+ * Construct a Turbopack config object from a Next.js config object and a Turbopack options object.
+ *
+ * @param userNextConfig - The Next.js config object.
+ * @param turbopackOptions - The Turbopack options object.
+ * @returns The Turbopack config object.
+ */
+export function constructTurbopackConfig({
+  userNextConfig,
+  routeManifest,
+}: {
+  userNextConfig: NextConfigObject;
+  routeManifest?: RouteManifest;
+}): TurbopackOptions {
+  const newConfig: TurbopackOptions = {
+    ...userNextConfig.turbopack,
+  };
+
+  if (routeManifest) {
+    newConfig.rules = safelyAddTurbopackRule(newConfig.rules, {
+      matcher: '**/instrumentation-client.*',
+      rule: {
+        loaders: [
+          {
+            loader: path.resolve(__dirname, '..', 'loaders', 'valueInjectionLoader.js'),
+            options: {
+              values: {
+                _sentryRouteManifest: JSON.stringify(routeManifest),
+              },
+            },
+          },
+        ],
+      },
+    });
+  }
+
+  return newConfig;
+}
+
+/**
+ * Safely add a Turbopack rule to the existing rules.
+ *
+ * @param existingRules - The existing rules.
+ * @param matcher - The matcher for the rule.
+ * @param rule - The rule to add.
+ * @returns The updated rules object.
+ */
+export function safelyAddTurbopackRule(
+  existingRules: TurbopackOptions['rules'],
+  { matcher, rule }: { matcher: string; rule: TurbopackRuleConfigItemOrShortcut },
+): TurbopackOptions['rules'] {
+  if (!existingRules) {
+    return {
+      [matcher]: rule,
+    };
+  }
+
+  // If the rule already exists, we don't want to mess with it.
+  if (existingRules[matcher]) {
+    logger.info(
+      `${chalk.cyan(
+        'info',
+      )} - Turbopack rule already exists for ${matcher}. Please remove it from your Next.js config in order for Sentry to work properly.`,
+    );
+    return existingRules;
+  }
+
+  return {
+    ...existingRules,
+    [matcher]: rule,
+  };
+}

packages/nextjs/src/config/turbopack/index.ts

@@ -0,0 +1 @@
+export * from './constructTurbopackConfig';

packages/nextjs/src/config/types.ts

@@ -51,6 +51,7 @@ export type NextConfigObject = {
   // https://nextjs.org/docs/pages/api-reference/next-config-js/env
   env?: Record<string, string>;
   serverExternalPackages?: string[]; // next >= v15.0.0
+  turbopack?: TurbopackOptions;
 };
 
 export type SentryBuildOptions = {
@@ -607,3 +608,38 @@ export type EnhancedGlobal = typeof GLOBAL_OBJ & {
   SENTRY_RELEASE?: { id: string };
   SENTRY_RELEASES?: { [key: string]: { id: string } };
 };
+
+type JSONValue = string | number | boolean | JSONValue[] | { [k: string]: JSONValue };
+
+type TurbopackLoaderItem =
+  | string
+  | {
+      loader: string;
+      // At the moment, Turbopack options must be JSON-serializable, so restrict values.
+      options: Record<string, JSONValue>;
+    };
+
+type TurbopackRuleCondition = {
+  path: string | RegExp;
+};
+
+export type TurbopackRuleConfigItemOrShortcut = TurbopackLoaderItem[] | TurbopackRuleConfigItem;
+
+type TurbopackRuleConfigItemOptions = {
+  loaders: TurbopackLoaderItem[];
+  as?: string;
+};
+
+type TurbopackRuleConfigItem =
+  | TurbopackRuleConfigItemOptions
+  | { [condition: string]: TurbopackRuleConfigItem }
+  | false;
+
+export interface TurbopackOptions {
+  resolveAlias?: Record<string, string | string[] | Record<string, string | string[]>>;
+  resolveExtensions?: string[];
+  rules?: Record<string, TurbopackRuleConfigItemOrShortcut>;
+  conditions?: Record<string, TurbopackRuleCondition>;
+  moduleIds?: 'named' | 'deterministic';
+  root?: string;
+}

packages/nextjs/src/config/withSentryConfig.ts

@@ -7,6 +7,7 @@ import * as fs from 'fs';
 import * as path from 'path';
 import { createRouteManifest } from './manifest/createRouteManifest';
 import type { RouteManifest } from './manifest/types';
+import { constructTurbopackConfig } from './turbopack';
 import type {
   ExportedNextConfig as NextConfig,
   NextConfigFunction,
@@ -251,6 +252,8 @@ function getFinalConfigObject(
   }
 
   let nextMajor: number | undefined;
+  const isTurbopack = process.env.TURBOPACK;
+  let isTurbopackSupported = false;
   if (nextJsVersion) {
     const { major, minor, patch, prerelease } = parseSemver(nextJsVersion);
     nextMajor = major;
@@ -262,6 +265,7 @@ function getFinalConfigObject(
         (major === 15 && minor > 3) ||
         (major === 15 && minor === 3 && patch === 0 && prerelease === undefined) ||
         (major === 15 && minor === 3 && patch > 0));
+    isTurbopackSupported = isSupportedVersion;
     const isSupportedCanary =
       major !== undefined &&
       minor !== undefined &&
@@ -274,7 +278,7 @@ function getFinalConfigObject(
       parseInt(prerelease.split('.')[1] || '', 10) >= 28;
     const supportsClientInstrumentation = isSupportedCanary || isSupportedVersion;
 
-    if (!supportsClientInstrumentation && process.env.TURBOPACK) {
+    if (!supportsClientInstrumentation && isTurbopack) {
       if (process.env.NODE_ENV === 'development') {
         // eslint-disable-next-line no-console
         console.warn(
@@ -307,12 +311,17 @@ function getFinalConfigObject(
             ],
           },
         }),
-    webpack: constructWebpackConfigFunction(
-      incomingUserNextConfigObject,
-      userSentryOptions,
-      releaseName,
-      routeManifest,
-    ),
+    webpack: !isTurbopack
+      ? constructWebpackConfigFunction(incomingUserNextConfigObject, userSentryOptions, releaseName, routeManifest)
+      : undefined,
+    ...(isTurbopackSupported && isTurbopack
+      ? {
+          turbopack: constructTurbopackConfig({
+            userNextConfig: incomingUserNextConfigObject,
+            routeManifest,
+          }),
+        }
+      : {}),
   };
 }