feat(webpack): Generate deterministic debug IDs (#321)

Author: Luca Forstner

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

@@ -398,4 +398,6 @@ export function getDebugIdSnippet(debugId: string): string {
   return `;!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]="${debugId}",e._sentryDebugIdIdentifier="sentry-dbid-${debugId}")}catch(e){}}();`;
 }
 
+export { stringToUUID } from "./utils";
+
 export type { Options } from "./types";

packages/integration-tests/fixtures/deterministic-debug-ids/build-rollup.ts

@@ -0,0 +1,19 @@
+import { sentryRollupPlugin } from "@sentry/rollup-plugin";
+import * as path from "path";
+import * as rollup from "rollup";
+import pluginOptions from "./plugin-options";
+
+void rollup
+  .rollup({
+    input: {
+      index: path.join(__dirname, "input", "index.js"),
+    },
+    plugins: [sentryRollupPlugin(pluginOptions)],
+  })
+  .then((bundle) =>
+    bundle.write({
+      dir: path.join(__dirname, "out", "rollup"),
+      format: "cjs",
+      exports: "named",
+    })
+  );

packages/integration-tests/fixtures/deterministic-debug-ids/build-vite.ts

@@ -0,0 +1,21 @@
+import { sentryVitePlugin } from "@sentry/vite-plugin";
+import * as path from "path";
+import * as vite from "vite";
+import pluginOptions from "./plugin-options";
+
+void vite.build({
+  clearScreen: false,
+  build: {
+    outDir: path.join(__dirname, "out", "vite"),
+    rollupOptions: {
+      input: {
+        index: path.join(__dirname, "input", "index.js"),
+      },
+      output: {
+        format: "cjs",
+        entryFileNames: "[name].js",
+      },
+    },
+  },
+  plugins: [sentryVitePlugin(pluginOptions)],
+});

packages/integration-tests/fixtures/deterministic-debug-ids/build-webpack4.ts

@@ -0,0 +1,25 @@
+import { sentryWebpackPlugin } from "@sentry/webpack-plugin";
+import * as path from "path";
+import { default as webpack4 } from "webpack4";
+import pluginOptions from "./plugin-options";
+
+webpack4(
+  {
+    mode: "production",
+    entry: {
+      index: path.join(__dirname, "input", "index.js"),
+    },
+    cache: false,
+    output: {
+      path: path.join(__dirname, "out", "webpack4"),
+      libraryTarget: "commonjs",
+    },
+    target: "node", // needed for webpack 4 so we can access node api
+    plugins: [sentryWebpackPlugin(pluginOptions)],
+  },
+  (err) => {
+    if (err) {
+      throw err;
+    }
+  }
+);

packages/integration-tests/fixtures/deterministic-debug-ids/build-webpack5.ts

@@ -0,0 +1,26 @@
+import { sentryWebpackPlugin } from "@sentry/webpack-plugin";
+import * as path from "path";
+import { webpack as webpack5 } from "webpack5";
+import pluginOptions from "./plugin-options";
+
+webpack5(
+  {
+    cache: false,
+    entry: {
+      index: path.join(__dirname, "input", "index.js"),
+    },
+    output: {
+      path: path.join(__dirname, "out", "webpack5"),
+      library: {
+        type: "commonjs",
+      },
+    },
+    mode: "production",
+    plugins: [sentryWebpackPlugin(pluginOptions)],
+  },
+  (err) => {
+    if (err) {
+      throw err;
+    }
+  }
+);

packages/integration-tests/fixtures/deterministic-debug-ids/deterministic-debug-ids.test.ts

@@ -0,0 +1,82 @@
+/* eslint-disable jest/no-standalone-expect */
+/* eslint-disable jest/expect-expect */
+import childProcess from "child_process";
+import path from "path";
+import fs from "fs/promises";
+
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+const nodejsMajorversion = process.version.split(".")[0]!.slice(1);
+
+function executeAndGetDebugIds(bundlePath: string): string[] {
+  const processOutput = childProcess.execSync(`node ${bundlePath}`, { encoding: "utf-8" });
+  const debugIdMap = JSON.parse(processOutput) as Record<string, string>;
+  return Object.values(debugIdMap);
+}
+
+beforeEach(async () => {
+  await fs.writeFile(
+    path.join(__dirname, "input", "dynamic-variable.js"),
+    `global.dynamicVariable = 1;`
+  );
+});
+
+afterEach(async () => {
+  await fs.unlink(path.join(__dirname, "input", "dynamic-variable.js"));
+});
+
+describe("Same debug IDs for multiple identical builds", () => {
+  const bundlers = ["rollup", "vite", "webpack5"];
+
+  if (parseInt(nodejsMajorversion) < 18) {
+    bundlers.push("webpack4");
+  }
+
+  test.each(bundlers)(
+    "%s",
+    (bundler) => {
+      // build
+      childProcess.execSync(`yarn ts-node ${path.join(__dirname, `build-${bundler}.ts`)}`);
+
+      const debugIds1 = executeAndGetDebugIds(path.join(__dirname, "out", bundler, "index.js"));
+
+      // rebuild
+      childProcess.execSync(`yarn ts-node ${path.join(__dirname, `build-${bundler}.ts`)}`);
+
+      const debugIds2 = executeAndGetDebugIds(path.join(__dirname, "out", bundler, "index.js"));
+
+      expect(debugIds1).toStrictEqual(debugIds2);
+    },
+    20_000
+  );
+});
+
+describe("Different debug IDs for different builds", () => {
+  const bundlers = ["rollup", "vite", "webpack5"];
+
+  if (parseInt(nodejsMajorversion) < 18) {
+    bundlers.push("webpack4");
+  }
+
+  test.each(bundlers)(
+    "%s",
+    async (bundler) => {
+      // build
+      childProcess.execSync(`yarn ts-node ${path.join(__dirname, `build-${bundler}.ts`)}`);
+
+      const debugIds1 = executeAndGetDebugIds(path.join(__dirname, "out", bundler, "index.js"));
+
+      await fs.writeFile(
+        path.join(__dirname, "input", "dynamic-variable.js"),
+        `global.dynamicVariable = 2;`
+      );
+
+      // rebuild
+      childProcess.execSync(`yarn ts-node ${path.join(__dirname, `build-${bundler}.ts`)}`);
+
+      const debugIds2 = executeAndGetDebugIds(path.join(__dirname, "out", bundler, "index.js"));
+
+      expect(debugIds1).not.toEqual(debugIds2);
+    },
+    20_000
+  );
+});

packages/integration-tests/fixtures/deterministic-debug-ids/input/.gitignore

@@ -0,0 +1 @@
+dynamic-variable.js

packages/integration-tests/fixtures/deterministic-debug-ids/input/index.js

@@ -0,0 +1,4 @@
+import "./dynamic-variable";
+
+// eslint-disable-next-line no-console
+console.log(JSON.stringify(global._sentryDebugIds));

packages/integration-tests/fixtures/deterministic-debug-ids/plugin-options.ts

@@ -0,0 +1,4 @@
+export default {
+  telemetry: false,
+  release: { name: "release", create: false },
+};

packages/integration-tests/scripts/run-fixture-setups.ts

@@ -6,5 +6,8 @@ const fixturePaths = fs
   .map((fixtureDir) => path.join(__dirname, "..", "fixtures", fixtureDir));
 
 fixturePaths.forEach((fixturePath) => {
-  require(path.join(fixturePath, "setup.ts"));
+  const setupScriptPath = path.join(fixturePath, "setup.ts");
+  if (fs.existsSync(setupScriptPath)) {
+    require(setupScriptPath);
+  }
 });