feat(webpack): Add debug ID injection to the webpack plugin (#198)

Author: Luca Forstner

packages/bundler-plugin-core/package.json

@@ -42,7 +42,8 @@
     "find-up": "5.0.0",
     "glob": "9.3.2",
     "magic-string": "0.27.0",
-    "unplugin": "1.0.1"
+    "unplugin": "1.0.1",
+    "webpack-sources": "3.2.3"
   },
   "devDependencies": {
     "@babel/core": "7.18.5",

packages/bundler-plugin-core/src/debug-id.ts

@@ -9,9 +9,9 @@ import { stringToUUID } from "./utils";
 const DEBUG_ID_INJECTOR_SNIPPET =
   ';!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},n=(new Error).stack;n&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[n]="__SENTRY_DEBUG_ID__",e._sentryDebugIdIdentifier="sentry-dbid-__SENTRY_DEBUG_ID__")}catch(e){}}();';
 
-export function injectDebugIdSnippetIntoChunk(code: string) {
+export function injectDebugIdSnippetIntoChunk(code: string, filename?: string) {
   const debugId = stringToUUID(code); // generate a deterministic debug ID
-  const ms = new MagicString(code);
+  const ms = new MagicString(code, { filename });
 
   const codeToInject = DEBUG_ID_INJECTOR_SNIPPET.replace(/__SENTRY_DEBUG_ID__/g, debugId);
 

packages/bundler-plugin-core/src/index.ts

@@ -30,6 +30,8 @@ import util from "util";
 import { getDependencies, getPackageJson, parseMajorVersion } from "./utils";
 import { glob } from "glob";
 import { injectDebugIdSnippetIntoChunk, prepareBundleForDebugIdUpload } from "./debug-id";
+import { SourceMapSource } from "webpack-sources";
+import type { sources } from "webpack";
 
 const ALLOWED_TRANSFORMATION_FILE_ENDINGS = [".js", ".ts", ".jsx", ".tsx", ".mjs"];
 
@@ -389,6 +391,68 @@ const unplugin = createUnplugin<Options>((options, unpluginMetaContext) => {
         }
       },
     },
+    webpack(compiler) {
+      if (options._experiments?.debugIdUpload) {
+        // Cache inspired by https://github.com/webpack/webpack/pull/15454
+        const cache = new WeakMap<sources.Source, sources.Source>();
+
+        compiler.hooks.compilation.tap("sentry-plugin", (compilation) => {
+          compilation.hooks.optimizeChunkAssets.tap("sentry-plugin", (chunks) => {
+            chunks.forEach((chunk) => {
+              const fileNames = chunk.files;
+              fileNames.forEach((fileName) => {
+                const source = compilation.assets[fileName];
+
+                if (!source) {
+                  logger.warn(
+                    "Unable to access compilation assets. If you see this warning, it is likely a bug in the Sentry webpack plugin. Feel free to open an issue at https://github.com/getsentry/sentry-javascript-bundler-plugins with reproduction steps."
+                  );
+                  return;
+                }
+
+                compilation.updateAsset(fileName, (oldSource) => {
+                  const cached = cache.get(oldSource);
+                  if (cached) {
+                    return cached;
+                  }
+
+                  const originalCode = source.source().toString();
+
+                  // The source map type is very annoying :(
+                  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
+                  const originalSourceMap = source.map() as any;
+
+                  const { code: newCode, map: newSourceMap } = injectDebugIdSnippetIntoChunk(
+                    originalCode,
+                    fileName
+                  );
+
+                  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+                  newSourceMap.sources = originalSourceMap.sources as string[];
+
+                  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+                  newSourceMap.sourcesContent = originalSourceMap.sourcesContent as string[];
+
+                  const newSource = new SourceMapSource(
+                    newCode,
+                    fileName,
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+                    originalSourceMap,
+                    originalCode,
+                    newSourceMap,
+                    false
+                  ) as sources.Source;
+
+                  cache.set(oldSource, newSource);
+
+                  return newSource;
+                });
+              });
+            });
+          });
+        });
+      }
+    },
   };
 });
 

packages/bundler-plugin-core/src/types.ts

@@ -228,7 +228,7 @@ export type Options = Omit<IncludeEntry, "paths"> & {
     /**
      * Configuration for debug ID upload.
      *
-     * Note: Currently only functional for Vite and Rollup.
+     * Note: Currently only functional for Vite, Webpack and Rollup.
      */
     debugIdUpload?: {
       /**

yarn.lock

@@ -11752,6 +11752,11 @@ webidl-conversions@^6.1.0:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-6.1.0.tgz#9111b4d7ea80acd40f5270d666621afa78b69514"
   integrity sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==
 
+[email protected], webpack-sources@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
+  integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
+
 webpack-sources@^1.4.0, webpack-sources@^1.4.1:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
@@ -11760,11 +11765,6 @@ webpack-sources@^1.4.0, webpack-sources@^1.4.1:
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-webpack-sources@^3.2.3:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
-  integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
-
 webpack-virtual-modules@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.5.0.tgz#362f14738a56dae107937ab98ea7062e8bdd3b6c"