fix(bundler-plugins): Preserve directive prologues during bundle injection (#24221)

Bundler plugins inject Sentry code into generated bundles. In some
outputs the injection could be placed before directive prologues such as
`"use strict"`, causing JavaScript to stop recognizing them as
directives.

I found this issue to affect some production cases - I don't have access
to their sources so I can't fully say how the original code was authored
and what exactly made it lose the strict mode, but the generated output
looked like this:
```js
try{!function(){var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?
  globalThis:"undefined"!=typeof self?self:{},t=(new e.Error).stack;t&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[t]="612bd636-5fcc-473a-bdd0-20460245872c",e._sentryDebugIdIdentifier="sentry-dbid-612bd636-5fcc-473a-bdd0-
  20460245872c")}()}catch(e){}"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[120],{67232:function(e,t,n){var r,l=n(41498),a=n(90413),o={usingClientEntryPoint:!1,Events:null,Dispatcher:{current:null}};function i(e){var
  t="https://react.dev/errors/"+e;if(1<arguments.length){t+="?args[]="+encodeURIComponent(arguments[1]);
```

Given the sentry code was injected before the strict mode directive,
that changed the meaning of `arguments[1]` at this position in the app
code:
```js
function aW(e, t) {
  if (null !== (t = null !== (t = t.updateQueue) ? t.lastEffect : null)) {
    var n = (t = t.next);
    do {
      if ((n.tag & e) === e) {
        var r = n.create,
          l = n.inst;
        /* arguments[1] no longer refer to the original argument */
        r = r();

        l.destroy = r;
      }
      n = n.next;
    } while (n !== t);
  }
}
```

That's because in the sloppy mode the assignment to `t` before the
`arguments[1]` reference changes the `arguments` content too 🫠 . You can
test it out using this isolated sample:
```js
function test(foo) {
  foo = 2;
  console.log(arguments[0]); // 2
}

test(1);

function testStrict(foo) {
  "use strict";
  foo = 2;
  console.log(arguments[0]); // 1
}

testStrict(1);
```

This PR:
- adds a bunch of tests for edge cases and for source mapping behavior
(the latter was already working OK but didn't quite have the coverage)
- replaces simple regex with a more spec-compliant tiny scanner so the
proper injection point can be found
- in Webpack `BannePlugin` can only prepend/append text, as far as I
know, it can't just inject into an arbitrary position. So it was
replaced with a compilation hook and ReplaceSource plugin. That allows
for a fine-grained control at the asset level
- in the case of Rollup, this PR only slightly changes the insertion
point calculation - but it doesn't replace the overall mechanism/hooks
used
- esbuild has not required any fixes because `inject` API handles this
for us


---

AI disclosure: I have steered it a bunch myself and I understand each
line of code added. I ensured (using my own judgement) that all of this
matches the project's style and goal but ofc I have much less context on
that than the maintainers here. That said, I can address any PR feedback
thrown my way.

---------

Co-authored-by: OpenAI Codex <codex@openai.com>
Co-authored-by: Tim Fish <tim@timfish.uk>

Author: 3 people

dev-packages/bundler-plugin-integration-tests/fixtures/esbuild/cjs-directives.config.js

@@ -0,0 +1,55 @@
+import * as esbuild from "esbuild";
+import { sentryEsbuildPlugin } from "@sentry/bundler-plugins/esbuild";
+
+await esbuild.build({
+  entryPoints: {
+    sloppy: "./src/sloppy-mode.cjs",
+  },
+  bundle: true,
+  outdir: "./out/cjs-directives/without-plugin",
+  outExtension: { ".js": ".cjs" },
+  minify: false,
+  format: "cjs",
+  tsconfigRaw: { compilerOptions: { alwaysStrict: false } },
+});
+
+await esbuild.build({
+  entryPoints: {
+    strict: "./src/strict-mode.cjs",
+    sloppy: "./src/sloppy-mode.cjs",
+  },
+  bundle: true,
+  outdir: "./out/cjs-directives/static-injection",
+  outExtension: { ".js": ".cjs" },
+  minify: false,
+  format: "cjs",
+  tsconfigRaw: { compilerOptions: { alwaysStrict: false } },
+  plugins: [
+    sentryEsbuildPlugin({
+      telemetry: false,
+      release: { name: "strict-mode-release", create: false },
+      sourcemaps: { disable: true },
+    }),
+  ],
+});
+
+await esbuild.build({
+  entryPoints: {
+    strict: "./src/strict-mode.cjs",
+    sloppy: "./src/sloppy-mode.cjs",
+  },
+  bundle: true,
+  outdir: "./out/cjs-directives/debug-id-injection",
+  outExtension: { ".js": ".cjs" },
+  minify: false,
+  format: "cjs",
+  sourcemap: true,
+  tsconfigRaw: { compilerOptions: { alwaysStrict: false } },
+  plugins: [
+    sentryEsbuildPlugin({
+      telemetry: false,
+      release: { inject: false },
+      sourcemaps: { disable: "disable-upload" },
+    }),
+  ],
+});

dev-packages/bundler-plugin-integration-tests/fixtures/esbuild/cjs-directives.test.ts

@@ -0,0 +1,32 @@
+import { expect } from "vitest";
+import { test } from "./utils";
+
+test(import.meta.url, ({ runBundler, runFileInNode }) => {
+  runBundler();
+
+  expect(JSON.parse(runFileInNode("without-plugin/sloppy.cjs"))).toEqual({
+    sloppyModePreserved: true,
+    releaseInjected: false,
+    debugIdInjected: false,
+  });
+  expect(JSON.parse(runFileInNode("static-injection/strict.cjs"))).toEqual({
+    strictModePreserved: true,
+    releaseInjected: true,
+    debugIdInjected: false,
+  });
+  expect(JSON.parse(runFileInNode("static-injection/sloppy.cjs"))).toEqual({
+    sloppyModePreserved: true,
+    releaseInjected: true,
+    debugIdInjected: false,
+  });
+  expect(JSON.parse(runFileInNode("debug-id-injection/strict.cjs"))).toEqual({
+    strictModePreserved: true,
+    releaseInjected: false,
+    debugIdInjected: true,
+  });
+  expect(JSON.parse(runFileInNode("debug-id-injection/sloppy.cjs"))).toEqual({
+    sloppyModePreserved: true,
+    releaseInjected: false,
+    debugIdInjected: true,
+  });
+});

dev-packages/bundler-plugin-integration-tests/fixtures/esbuild/src/sloppy-mode.cjs

@@ -0,0 +1,12 @@
+globalThis.sloppyModePreserved =
+  (function () {
+    return this;
+  })() === globalThis;
+
+console.log(
+  JSON.stringify({
+    sloppyModePreserved: globalThis.sloppyModePreserved,
+    releaseInjected: globalThis.SENTRY_RELEASE?.id === "strict-mode-release",
+    debugIdInjected: Object.keys(globalThis._sentryDebugIds || {}).length === 1,
+  })
+);

dev-packages/bundler-plugin-integration-tests/fixtures/esbuild/src/strict-mode.cjs

@@ -0,0 +1,14 @@
+"use strict";
+
+globalThis.strictModePreserved =
+  (function () {
+    return this;
+  })() === undefined;
+
+console.log(
+  JSON.stringify({
+    strictModePreserved: globalThis.strictModePreserved,
+    releaseInjected: globalThis.SENTRY_RELEASE?.id === "strict-mode-release",
+    debugIdInjected: Object.keys(globalThis._sentryDebugIds || {}).length === 1,
+  })
+);

dev-packages/bundler-plugin-integration-tests/fixtures/webpack5/after-upload-deletion.test.ts

@@ -5,8 +5,7 @@ test(import.meta.url, ({ runBundler, readOutputFiles, runFileInNode }) => {
   runBundler();
   expect(readOutputFiles()).toMatchInlineSnapshot(`
     {
-      "basic.js": "!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{};e.SENTRY_RELEASE={id:"CURRENT_SHA"};var n=(new e.Error).stack;n&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[n]="00000000-0000-0000-0000-000000000000",e._sentryDebugIdIdentifier="sentry-dbid-00000000-0000-0000-0000-000000000000");}catch(e){}}();
-    /******/ (() => { // webpackBootstrap
+      "basic.js": "/******/ !function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{};e.SENTRY_RELEASE={id:"CURRENT_SHA"};var n=(new e.Error).stack;n&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[n]="00000000-0000-0000-0000-000000000000",e._sentryDebugIdIdentifier="sentry-dbid-00000000-0000-0000-0000-000000000000");}catch(e){}}();(() => { // webpackBootstrap
     /******/ 	"use strict";
     // eslint-disable-next-line no-console
     console.log("hello world");

dev-packages/bundler-plugin-integration-tests/fixtures/webpack5/application-key.test.ts

@@ -5,8 +5,7 @@ test(import.meta.url, ({ runBundler, readOutputFiles }) => {
   runBundler();
   expect(readOutputFiles()).toMatchInlineSnapshot(`
     {
-      "basic.js": "!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{};e.SENTRY_RELEASE={id:"CURRENT_SHA"};e._sentryModuleMetadata=e._sentryModuleMetadata||{},e._sentryModuleMetadata[(new e.Error).stack]=function(e){for(var n=1;n<arguments.length;n++){var a=arguments[n];if(null!=a)for(var t in a)a.hasOwnProperty(t)&&(e[t]=a[t])}return e}({},e._sentryModuleMetadata[(new e.Error).stack],{"_sentryBundlerPluginAppKey:1234567890abcdef":true});var n=(new e.Error).stack;n&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[n]="00000000-0000-0000-0000-000000000000",e._sentryDebugIdIdentifier="sentry-dbid-00000000-0000-0000-0000-000000000000");}catch(e){}}();
-    /******/ (() => { // webpackBootstrap
+      "basic.js": "/******/ !function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{};e.SENTRY_RELEASE={id:"CURRENT_SHA"};e._sentryModuleMetadata=e._sentryModuleMetadata||{},e._sentryModuleMetadata[(new e.Error).stack]=function(e){for(var n=1;n<arguments.length;n++){var a=arguments[n];if(null!=a)for(var t in a)a.hasOwnProperty(t)&&(e[t]=a[t])}return e}({},e._sentryModuleMetadata[(new e.Error).stack],{"_sentryBundlerPluginAppKey:1234567890abcdef":true});var n=(new e.Error).stack;n&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[n]="00000000-0000-0000-0000-000000000000",e._sentryDebugIdIdentifier="sentry-dbid-00000000-0000-0000-0000-000000000000");}catch(e){}}();(() => { // webpackBootstrap
     /******/ 	"use strict";
     // eslint-disable-next-line no-console
     console.log("hello world");

dev-packages/bundler-plugin-integration-tests/fixtures/webpack5/basic-cjs.test.ts

@@ -5,8 +5,7 @@ test(import.meta.url, ({ runBundler, readOutputFiles, runFileInNode }) => {
   runBundler();
   expect(readOutputFiles()).toMatchInlineSnapshot(`
     {
-      "basic.js": "!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{};e.SENTRY_RELEASE={id:"CURRENT_SHA"};var n=(new e.Error).stack;n&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[n]="00000000-0000-0000-0000-000000000000",e._sentryDebugIdIdentifier="sentry-dbid-00000000-0000-0000-0000-000000000000");}catch(e){}}();
-    /******/ (() => { // webpackBootstrap
+      "basic.js": "/******/ !function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{};e.SENTRY_RELEASE={id:"CURRENT_SHA"};var n=(new e.Error).stack;n&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[n]="00000000-0000-0000-0000-000000000000",e._sentryDebugIdIdentifier="sentry-dbid-00000000-0000-0000-0000-000000000000");}catch(e){}}();(() => { // webpackBootstrap
     /******/ 	"use strict";
     // eslint-disable-next-line no-console
     console.log("hello world");

dev-packages/bundler-plugin-integration-tests/fixtures/webpack5/basic-release-disabled.test.ts

@@ -5,8 +5,7 @@ test(import.meta.url, ({ runBundler, readOutputFiles }) => {
   runBundler();
   expect(readOutputFiles()).toMatchInlineSnapshot(`
     {
-      "basic.js": "!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{};var n=(new e.Error).stack;n&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[n]="00000000-0000-0000-0000-000000000000",e._sentryDebugIdIdentifier="sentry-dbid-00000000-0000-0000-0000-000000000000");}catch(e){}}();
-    /******/ (() => { // webpackBootstrap
+      "basic.js": "/******/ !function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{};var n=(new e.Error).stack;n&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[n]="00000000-0000-0000-0000-000000000000",e._sentryDebugIdIdentifier="sentry-dbid-00000000-0000-0000-0000-000000000000");}catch(e){}}();(() => { // webpackBootstrap
     /******/ 	"use strict";
     // eslint-disable-next-line no-console
     console.log("hello world");

dev-packages/bundler-plugin-integration-tests/fixtures/webpack5/basic-sourcemaps.test.ts

@@ -5,16 +5,15 @@ test(import.meta.url, ({ runBundler, readOutputFiles, runFileInNode }) => {
   runBundler();
   expect(readOutputFiles()).toMatchInlineSnapshot(`
     {
-      "basic.js": "!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{};e.SENTRY_RELEASE={id:"CURRENT_SHA"};var n=(new e.Error).stack;n&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[n]="00000000-0000-0000-0000-000000000000",e._sentryDebugIdIdentifier="sentry-dbid-00000000-0000-0000-0000-000000000000");}catch(e){}}();
-    /******/ (() => { // webpackBootstrap
+      "basic.js": "/******/ !function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{};e.SENTRY_RELEASE={id:"CURRENT_SHA"};var n=(new e.Error).stack;n&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[n]="00000000-0000-0000-0000-000000000000",e._sentryDebugIdIdentifier="sentry-dbid-00000000-0000-0000-0000-000000000000");}catch(e){}}();(() => { // webpackBootstrap
     /******/ 	"use strict";
     // eslint-disable-next-line no-console
     console.log("hello world");
 
     /******/ })()
     ;
     //# sourceMappingURL=basic.js.map",
-      "basic.js.map": "{"version":3,"file":"basic.js","mappings":";;;AAAA;AACA","sources":["webpack://webpack5-integration-tests/./src/basic.js"],"sourcesContent":["// eslint-disable-next-line no-console\\nconsole.log(\\"hello world\\");\\n"],"names":[],"sourceRoot":""}",
+      "basic.js.map": "{"version":3,"file":"basic.js","mappings":";;AAAA;AACA","sources":["webpack://webpack5-integration-tests/./src/basic.js"],"sourcesContent":["// eslint-disable-next-line no-console\\nconsole.log(\\"hello world\\");\\n"],"names":[],"sourceRoot":""}",
       "sentry-cli-mock.json": "["release","create","CURRENT_SHA","--project","fake-project"],
     ["release","set-commits","CURRENT_SHA","--auto"],
     ["release","finalize","CURRENT_SHA"],

dev-packages/bundler-plugin-integration-tests/fixtures/webpack5/basic.test.ts

@@ -5,8 +5,7 @@ test(import.meta.url, ({ runBundler, readOutputFiles, runFileInNode }) => {
   runBundler();
   expect(readOutputFiles()).toMatchInlineSnapshot(`
     {
-      "basic.js": "!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{};e.SENTRY_RELEASE={id:"CURRENT_SHA"};var n=(new e.Error).stack;n&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[n]="00000000-0000-0000-0000-000000000000",e._sentryDebugIdIdentifier="sentry-dbid-00000000-0000-0000-0000-000000000000");}catch(e){}}();
-    /******/ (() => { // webpackBootstrap
+      "basic.js": "/******/ !function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{};e.SENTRY_RELEASE={id:"CURRENT_SHA"};var n=(new e.Error).stack;n&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[n]="00000000-0000-0000-0000-000000000000",e._sentryDebugIdIdentifier="sentry-dbid-00000000-0000-0000-0000-000000000000");}catch(e){}}();(() => { // webpackBootstrap
     /******/ 	"use strict";
     // eslint-disable-next-line no-console
     console.log("hello world");