fix(bundler-plugins): Inject into Webpack child compilers

Co-Authored-By: OpenAI Codex <codex@openai.com>

Author: Andarist

packages/bundler-plugins/src/webpack/webpack-code-injection.ts

@@ -0,0 +1,111 @@
+import { randomUUID } from 'node:crypto';
+import { getDebugIdSnippet, stringToUUID } from '../core/index';
+import type { CodeInjection } from '../core/index';
+import { getCodeInjectionPosition } from '../core/get-code-injection-position';
+
+type WebpackSource = {
+  source: () => string | Uint8Array;
+};
+
+type WebpackReplaceSource = WebpackSource & {
+  insert: (position: number, value: string) => void;
+};
+
+type WebpackCompilation = {
+  chunks: Iterable<{
+    files: Iterable<string>;
+    hash?: string;
+    contentHash?: { javascript?: string };
+  }>;
+  hooks: {
+    processAssets: {
+      tap: (
+        options: { name: string; stage: number },
+        callback: (assets: Record<string, WebpackSource>) => void,
+      ) => void;
+    };
+  };
+  updateAsset: (name: string, source: WebpackSource) => void;
+};
+
+export type WebpackCodeInjectionCompiler = {
+  hooks: {
+    compilation: {
+      tap: (name: string, callback: (compilation: WebpackCompilation) => void) => void;
+    };
+  };
+  webpack?: {
+    Compilation?: { PROCESS_ASSETS_STAGE_ADDITIONS: number };
+    sources?: { ReplaceSource: new (source: WebpackSource) => WebpackReplaceSource };
+  };
+};
+
+type WebpackApi = {
+  Compilation?: { PROCESS_ASSETS_STAGE_ADDITIONS: number };
+  sources?: { ReplaceSource: new (source: WebpackSource) => WebpackReplaceSource };
+};
+
+const WEBPACK_JAVASCRIPT_ASSET_REGEX = /\.(?:js|ts|jsx|tsx|mjs|cjs|mts|cts)(?:\?[^?]*)?(?:#[^#]*)?$/;
+
+export function addCodeInjection(
+  compiler: WebpackCodeInjectionCompiler,
+  webpackApi: WebpackApi,
+  staticInjectionCode: CodeInjection,
+  sourcemapsEnabled: boolean,
+  logger: { warn: (message: string) => void },
+): void {
+  if (staticInjectionCode.isEmpty() && !sourcemapsEnabled) {
+    return;
+  }
+
+  const ReplaceSource = compiler.webpack?.sources?.ReplaceSource || webpackApi.sources?.ReplaceSource;
+  const processAssetsStage =
+    compiler.webpack?.Compilation?.PROCESS_ASSETS_STAGE_ADDITIONS ??
+    webpackApi.Compilation?.PROCESS_ASSETS_STAGE_ADDITIONS;
+
+  if (!ReplaceSource || processAssetsStage === undefined) {
+    logger.warn(
+      'Webpack sources are not available. Skipping code injection. This usually means webpack is not properly configured.',
+    );
+    return;
+  }
+
+  compiler.hooks.compilation.tap('sentry-webpack-plugin-injection', compilation => {
+    compilation.hooks.processAssets.tap(
+      {
+        name: 'sentry-webpack-plugin-injection',
+        stage: processAssetsStage,
+      },
+      assets => {
+        for (const chunk of compilation.chunks) {
+          for (const assetName of chunk.files) {
+            if (!WEBPACK_JAVASCRIPT_ASSET_REGEX.test(assetName)) {
+              continue;
+            }
+
+            const source = assets[assetName];
+            if (!source) {
+              continue;
+            }
+
+            const sourceContents = source.source();
+            const codeString =
+              typeof sourceContents === 'string' ? sourceContents : Buffer.from(sourceContents).toString();
+            const codeToInject = staticInjectionCode.clone();
+            if (sourcemapsEnabled) {
+              const hash = chunk.contentHash?.javascript ?? chunk.hash;
+              codeToInject.append(getDebugIdSnippet(hash ? stringToUUID(hash) : randomUUID()));
+            }
+
+            const injectionPosition = getCodeInjectionPosition(codeString);
+            const injection =
+              injectionPosition === codeString.length ? `\n${codeToInject.code()}` : `${codeToInject.code()}\n`;
+            const updatedSource = new ReplaceSource(source);
+            updatedSource.insert(injectionPosition, injection);
+            compilation.updateAsset(assetName, updatedSource);
+          }
+        }
+      },
+    );
+  });
+}

packages/bundler-plugins/src/webpack/webpack4and5.ts

@@ -3,19 +3,17 @@ import {
   createSentryBuildPluginManager,
   generateReleaseInjectorCode,
   generateModuleMetadataInjectorCode,
-  stringToUUID,
   createComponentNameAnnotateHooks,
   CodeInjection,
-  getDebugIdSnippet,
   createDebugIdUploadFunction,
   isJsFile,
   stampDebugId,
 } from '../core/index';
-import { getCodeInjectionPosition } from '../core/get-code-injection-position';
+import { addCodeInjection } from './webpack-code-injection';
+import type { WebpackCodeInjectionCompiler } from './webpack-code-injection';
 import * as path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { createRequire } from 'node:module';
-import { randomUUID } from 'node:crypto';
 
 const _req = createRequire(import.meta.url);
 
@@ -54,37 +52,13 @@ type WebpackSources = {
   RawSource?: WebpackRawSource;
 };
 
-type WebpackModule = {
-  resource?: string;
-};
-
-type WebpackLoaderCallback = (err: Error | null, content?: string, sourceMap?: unknown) => void;
-
-type WebpackLoaderContext = {
-  callback: WebpackLoaderCallback;
-};
-
 type WebpackCompilationContext = {
   chunks: Iterable<{
     files: Iterable<string>;
     hash?: string;
     contentHash?: { javascript?: string };
   }>;
-  compiler: {
-    webpack?: {
-      NormalModule?: {
-        getCompilationHooks: (compilation: WebpackCompilationContext) => {
-          loader: {
-            tap: (name: string, callback: (loaderContext: WebpackLoaderContext, module: WebpackModule) => void) => void;
-          };
-        };
-      };
-    };
-  };
   hooks: {
-    normalModuleLoader?: {
-      tap: (name: string, callback: (loaderContext: WebpackLoaderContext, module: WebpackModule) => void) => void;
-    };
     processAssets: {
       tap: (
         options: { name: string; stage: number },
@@ -113,13 +87,9 @@ type WebpackRawSource = {
   new (source: string): WebpackSource;
 };
 
-type WebpackReplaceSource = WebpackSource & {
-  insert: (position: number, value: string) => void;
-};
-
-const WEBPACK_JAVASCRIPT_ASSET_REGEX = /\.(?:js|ts|jsx|tsx|mjs|cjs|mts|cts)(?:\?[^?]*)?(?:#[^#]*)?$/;
+type WebpackReplaceSource = WebpackSource & { insert: (position: number, value: string) => void };
 
-type WebpackCompiler = {
+type WebpackCompiler = WebpackCodeInjectionCompiler & {
   options: {
     plugins?: unknown[];
     mode?: string;
@@ -282,59 +252,13 @@ export function sentryWebpackPluginFactory({
         const DefinePlugin = compiler?.webpack?.DefinePlugin || UnsafeDefinePlugin;
 
         // Injecting through BannerPlugin would place executable code before directive prologues.
-        if (!staticInjectionCode.isEmpty() || sourcemapsEnabled) {
-          const ReplaceSource = compiler.webpack?.sources?.ReplaceSource || unsafeSources?.ReplaceSource;
-          const processAssetsStage =
-            compiler.webpack?.Compilation?.PROCESS_ASSETS_STAGE_ADDITIONS ??
-            UnsafeCompilation?.PROCESS_ASSETS_STAGE_ADDITIONS;
-
-          if (!ReplaceSource || processAssetsStage === undefined) {
-            logger.warn(
-              'Webpack sources are not available. Skipping code injection. This usually means webpack is not properly configured.',
-            );
-          } else {
-            compiler.hooks.thisCompilation.tap('sentry-webpack-plugin-injection', compilation => {
-              compilation.hooks.processAssets.tap(
-                {
-                  name: 'sentry-webpack-plugin-injection',
-                  stage: processAssetsStage,
-                },
-                assets => {
-                  for (const chunk of compilation.chunks) {
-                    for (const assetName of chunk.files) {
-                      if (!WEBPACK_JAVASCRIPT_ASSET_REGEX.test(assetName)) {
-                        continue;
-                      }
-
-                      const source = assets[assetName];
-                      if (!source) {
-                        continue;
-                      }
-
-                      const sourceContents = source.source();
-                      const codeString =
-                        typeof sourceContents === 'string' ? sourceContents : Buffer.from(sourceContents).toString();
-                      const codeToInject = staticInjectionCode.clone();
-                      if (sourcemapsEnabled) {
-                        const hash = chunk.contentHash?.javascript ?? chunk.hash;
-                        codeToInject.append(getDebugIdSnippet(hash ? stringToUUID(hash) : randomUUID()));
-                      }
-
-                      const injectionPosition = getCodeInjectionPosition(codeString);
-                      const injection =
-                        injectionPosition === codeString.length
-                          ? `\n${codeToInject.code()}`
-                          : `${codeToInject.code()}\n`;
-                      const updatedSource = new ReplaceSource(source);
-                      updatedSource.insert(injectionPosition, injection);
-                      compilation.updateAsset(assetName, updatedSource);
-                    }
-                  }
-                },
-              );
-            });
-          }
-        }
+        addCodeInjection(
+          compiler,
+          { Compilation: UnsafeCompilation, sources: unsafeSources },
+          staticInjectionCode,
+          sourcemapsEnabled,
+          logger,
+        );
 
         // The upload routine (which stamps debug IDs into temp copies of the artifacts) is skipped
         // with `disable-upload`, so the emitted artifacts get stamped in the asset pipeline instead.

packages/bundler-plugins/test/webpack/webpack4and5.test.ts

@@ -24,7 +24,7 @@ function runWebpackSourceInjection(
       sources: { ReplaceSource: webpack.sources.ReplaceSource },
     },
     hooks: {
-      thisCompilation: {
+      compilation: {
         tap: (_name: string, callback: (compilation: unknown) => void) => {
           compilationCallback = callback;
         },