fix(core): Make plugin inject ES5-friendly code (#770)

* fix(webpack): make plugin inject ES5-friendly code

Sentry webpack plugin injects code that includes `let` that breaks in ES5-only environments.
`let` is substituted for `var` wrapped in an IIFE in order to keep the same scope for the declared variable.

* add test for release and build info, minimal snippet format change

* changelog credits

---------

Co-authored-by: Lukas Stracke <[email protected]>

Author: grushetsky

CHANGELOG.md

@@ -4,6 +4,10 @@
 
 - "You know what they say ‘Fool me once, strike one, but fool me twice… strike three.’" — Michael Scott
 
+- fix(core): Make plugin inject ES5-friendly code ([#770](https://github.com/getsentry/sentry-javascript-bundler-plugins/pull/770))
+
+Work in this release was contributed by @grushetsky. Thank you for your contribution!
+
 ## 4.0.0
 
 ### Breaking Changes

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

@@ -456,7 +456,7 @@ export function createComponentNameAnnotateHooks(ignoredComponents?: string[]):
 }
 
 export function getDebugIdSnippet(debugId: string): string {
-  return `;{try{let e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{},n=(new e.Error).stack;n&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[n]="${debugId}",e._sentryDebugIdIdentifier="sentry-dbid-${debugId}")}catch(e){}};`;
+  return `;{try{(function(){var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{},n=(new e.Error).stack;n&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[n]="${debugId}",e._sentryDebugIdIdentifier="sentry-dbid-${debugId}");})();}catch(e){}};`;
 }
 
 export type { Logger } from "./logger";

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

@@ -314,8 +314,8 @@ export function generateGlobalInjectorCode({
 }): string {
   // The code below is mostly ternary operators because it saves bundle size.
   // The checks are to support as many environments as possible. (Node.js, Browser, webworkers, etc.)
-  let code = `{
-    let _global =
+  let code = `(function(){
+    var _global =
       typeof window !== 'undefined' ?
         window :
         typeof global !== 'undefined' ?
@@ -332,10 +332,10 @@ export function generateGlobalInjectorCode({
     const buildInfo = getBuildInformation();
 
     code += `
-      _global.SENTRY_BUILD_INFO=${JSON.stringify(buildInfo)};`;
+    _global.SENTRY_BUILD_INFO=${JSON.stringify(buildInfo)};`;
   }
 
-  code += "}";
+  code += "})();";
 
   return code;
 }
@@ -345,8 +345,8 @@ export function generateModuleMetadataInjectorCode(metadata: any): string {
   // The code below is mostly ternary operators because it saves bundle size.
   // The checks are to support as many environments as possible. (Node.js, Browser, webworkers, etc.)
   // We are merging the metadata objects in case modules are bundled twice with the plugin
-  return `{
-  let _sentryModuleMetadataGlobal =
+  return `(function(){
+  var _sentryModuleMetadataGlobal =
     typeof window !== "undefined"
       ? window
       : typeof global !== "undefined"
@@ -366,7 +366,7 @@ export function generateModuleMetadataInjectorCode(metadata: any): string {
       _sentryModuleMetadataGlobal._sentryModuleMetadata[new _sentryModuleMetadataGlobal.Error().stack],
       ${JSON.stringify(metadata)}
     );
-}`;
+})();`;
 }
 
 export function getBuildInformation(): {

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

@@ -4,7 +4,7 @@ describe("getDebugIdSnippet", () => {
   it("returns the debugId injection snippet for a passed debugId", () => {
     const snippet = getDebugIdSnippet("1234");
     expect(snippet).toMatchInlineSnapshot(
-      `";{try{let e=\\"undefined\\"!=typeof window?window:\\"undefined\\"!=typeof global?global:\\"undefined\\"!=typeof globalThis?globalThis:\\"undefined\\"!=typeof self?self:{},n=(new e.Error).stack;n&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[n]=\\"1234\\",e._sentryDebugIdIdentifier=\\"sentry-dbid-1234\\")}catch(e){}};"`
+      `";{try{(function(){var e=\\"undefined\\"!=typeof window?window:\\"undefined\\"!=typeof global?global:\\"undefined\\"!=typeof globalThis?globalThis:\\"undefined\\"!=typeof self?self:{},n=(new e.Error).stack;n&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[n]=\\"1234\\",e._sentryDebugIdIdentifier=\\"sentry-dbid-1234\\");})();}catch(e){}};"`
     );
   });
 });

packages/bundler-plugin-core/test/utils.test.ts

@@ -1,11 +1,15 @@
 import {
+  generateGlobalInjectorCode,
   generateModuleMetadataInjectorCode,
   getDependencies,
   getPackageJson,
   parseMajorVersion,
   replaceBooleanFlagsInCode,
   stringToUUID,
 } from "../src/utils";
+
+import fs from "fs";
+
 import path from "node:path";
 
 type PackageJson = Record<string, unknown>;
@@ -216,12 +220,73 @@ if (false && true) {
   });
 });
 
+describe("generateGlobalInjectorCode", () => {
+  it("generates code with release", () => {
+    const generatedCode = generateGlobalInjectorCode({
+      release: "1.2.3",
+      injectBuildInformation: false,
+    });
+
+    expect(generatedCode).toMatchInlineSnapshot(`
+      "(function(){
+          var _global =
+            typeof window !== 'undefined' ?
+              window :
+              typeof global !== 'undefined' ?
+                global :
+                typeof globalThis !== 'undefined' ?
+                  globalThis :
+                  typeof self !== 'undefined' ?
+                    self :
+                    {};
+
+          _global.SENTRY_RELEASE={id:\\"1.2.3\\"};})();"
+    `);
+  });
+
+  it("generates code with release and build information", () => {
+    jest.spyOn(fs, "readFileSync").mockReturnValueOnce(
+      JSON.stringify({
+        name: "test-app",
+        dependencies: {
+          myDep: "^2.1.4",
+        },
+        devDependencies: {
+          rollup: "^3.1.4",
+        },
+      })
+    );
+
+    const generatedCode = generateGlobalInjectorCode({
+      release: "1.2.3",
+      injectBuildInformation: true,
+    });
+
+    expect(generatedCode).toMatchInlineSnapshot(`
+      "(function(){
+          var _global =
+            typeof window !== 'undefined' ?
+              window :
+              typeof global !== 'undefined' ?
+                global :
+                typeof globalThis !== 'undefined' ?
+                  globalThis :
+                  typeof self !== 'undefined' ?
+                    self :
+                    {};
+
+          _global.SENTRY_RELEASE={id:\\"1.2.3\\"};
+          _global.SENTRY_BUILD_INFO={\\"deps\\":[\\"myDep\\",\\"rollup\\"],\\"depsVersions\\":{\\"rollup\\":3},\\"nodeVersion\\":18};})();"
+    `);
+  });
+});
+
 describe("generateModuleMetadataInjectorCode", () => {
   it("generates code with empty metadata object", () => {
     const generatedCode = generateModuleMetadataInjectorCode({});
     expect(generatedCode).toMatchInlineSnapshot(`
-      "{
-        let _sentryModuleMetadataGlobal =
+      "(function(){
+        var _sentryModuleMetadataGlobal =
           typeof window !== \\"undefined\\"
             ? window
             : typeof global !== \\"undefined\\"
@@ -241,7 +306,7 @@ describe("generateModuleMetadataInjectorCode", () => {
             _sentryModuleMetadataGlobal._sentryModuleMetadata[new _sentryModuleMetadataGlobal.Error().stack],
             {}
           );
-      }"
+      })();"
     `);
   });
 
@@ -255,8 +320,8 @@ describe("generateModuleMetadataInjectorCode", () => {
       },
     });
     expect(generatedCode).toMatchInlineSnapshot(`
-      "{
-        let _sentryModuleMetadataGlobal =
+      "(function(){
+        var _sentryModuleMetadataGlobal =
           typeof window !== \\"undefined\\"
             ? window
             : typeof global !== \\"undefined\\"
@@ -276,7 +341,7 @@ describe("generateModuleMetadataInjectorCode", () => {
             _sentryModuleMetadataGlobal._sentryModuleMetadata[new _sentryModuleMetadataGlobal.Error().stack],
             {\\"file1.js\\":{\\"foo\\":\\"bar\\"},\\"file2.js\\":{\\"bar\\":\\"baz\\"}}
           );
-      }"
+      })();"
     `);
   });
 });