fix(nextjs): Use value injection loader on instrumentation-client.ts|js (#16855)

Author: chargome

packages/nextjs/src/config/webpack.ts

@@ -744,7 +744,7 @@ function addValueInjectionLoader(
     });
   } else {
     newConfig.module.rules.push({
-      test: /sentry\.client\.config\.(jsx?|tsx?)/,
+      test: /(?:sentry\.client\.config\.(jsx?|tsx?)|(?:src[\\/])?instrumentation-client\.(js|ts))$/,
       use: [
         {
           loader: path.resolve(__dirname, 'loaders/valueInjectionLoader.js'),

packages/nextjs/test/config/__snapshots__/valueInjectionLoader.test.ts.snap

@@ -7,13 +7,32 @@ exports[`valueInjectionLoader > should correctly insert values for basic config
     "
 `;
 
+exports[`valueInjectionLoader > should correctly insert values for basic config 2`] = `
+"
+      ;globalThis["foo"] = "bar";import * as Sentry from '@sentry/nextjs';
+      Sentry.init();
+    "
+`;
+
 exports[`valueInjectionLoader > should correctly insert values with a misplaced directive 1`] = `
 "
       ;globalThis["foo"] = "bar";console.log('This will render the directive useless');
       "use client";
 
 
 
+      import * as Sentry from '@sentry/nextjs';
+      Sentry.init();
+    "
+`;
+
+exports[`valueInjectionLoader > should correctly insert values with a misplaced directive 2`] = `
+"
+      ;globalThis["foo"] = "bar";console.log('This will render the directive useless');
+      "use client";
+
+
+
       import * as Sentry from '@sentry/nextjs';
       Sentry.init();
     "
@@ -27,6 +46,14 @@ exports[`valueInjectionLoader > should correctly insert values with directive 1`
     "
 `;
 
+exports[`valueInjectionLoader > should correctly insert values with directive 2`] = `
+"
+      "use client";globalThis["foo"] = "bar";
+      import * as Sentry from '@sentry/nextjs';
+      Sentry.init();
+    "
+`;
+
 exports[`valueInjectionLoader > should correctly insert values with directive and block comments 1`] = `
 "
       /* test */
@@ -36,6 +63,15 @@ exports[`valueInjectionLoader > should correctly insert values with directive an
     "
 `;
 
+exports[`valueInjectionLoader > should correctly insert values with directive and block comments 2`] = `
+"
+      /* test */
+      "use client";;globalThis["foo"] = "bar";
+      import * as Sentry from '@sentry/nextjs';
+      Sentry.init();
+    "
+`;
+
 exports[`valueInjectionLoader > should correctly insert values with directive and inline comments 1`] = `
 "
       // test
@@ -45,6 +81,15 @@ exports[`valueInjectionLoader > should correctly insert values with directive an
     "
 `;
 
+exports[`valueInjectionLoader > should correctly insert values with directive and inline comments 2`] = `
+"
+      // test
+      "use client";;globalThis["foo"] = "bar";
+      import * as Sentry from '@sentry/nextjs';
+      Sentry.init();
+    "
+`;
+
 exports[`valueInjectionLoader > should correctly insert values with directive and multiline block comments 1`] = `
 "
       /*
@@ -56,6 +101,17 @@ exports[`valueInjectionLoader > should correctly insert values with directive an
     "
 `;
 
+exports[`valueInjectionLoader > should correctly insert values with directive and multiline block comments 2`] = `
+"
+      /*
+        test
+      */
+      "use client";;globalThis["foo"] = "bar";
+      import * as Sentry from '@sentry/nextjs';
+      Sentry.init();
+    "
+`;
+
 exports[`valueInjectionLoader > should correctly insert values with directive and multiline block comments and a bunch of whitespace 1`] = `
 "
       /*
@@ -65,6 +121,24 @@ exports[`valueInjectionLoader > should correctly insert values with directive an
 
 
 
+      "use client";;globalThis["foo"] = "bar";
+
+
+
+      import * as Sentry from '@sentry/nextjs';
+      Sentry.init();
+    "
+`;
+
+exports[`valueInjectionLoader > should correctly insert values with directive and multiline block comments and a bunch of whitespace 2`] = `
+"
+      /*
+        test
+      */
+
+
+
+
       "use client";;globalThis["foo"] = "bar";
 
 
@@ -81,3 +155,11 @@ exports[`valueInjectionLoader > should correctly insert values with directive an
       Sentry.init();
     "
 `;
+
+exports[`valueInjectionLoader > should correctly insert values with directive and semicolon 2`] = `
+"
+      "use client";;globalThis["foo"] = "bar";
+      import * as Sentry from '@sentry/nextjs';
+      Sentry.init();
+    "
+`;

packages/nextjs/test/config/loaders.test.ts

@@ -240,7 +240,7 @@ describe('webpack loaders', () => {
       });
 
       expect(finalWebpackConfig.module.rules).toContainEqual({
-        test: /sentry\.client\.config\.(jsx?|tsx?)/,
+        test: /(?:sentry\.client\.config\.(jsx?|tsx?)|(?:src[\\/])?instrumentation-client\.(js|ts))$/,
         use: [
           {
             loader: expect.stringMatching(/valueInjectionLoader\.js$/),

packages/nextjs/test/config/valueInjectionLoader.test.ts

@@ -8,21 +8,26 @@ const defaultLoaderThis = {
   async: () => undefined,
   cacheable: () => undefined,
   callback: () => undefined,
-};
-
-const loaderThis = {
-  ...defaultLoaderThis,
-  resourcePath: './client.config.ts',
   getOptions() {
     return {
       values: {
         foo: 'bar',
       },
     };
   },
+};
+
+const clientConfigLoaderThis = {
+  ...defaultLoaderThis,
+  resourcePath: './sentry.client.config.ts',
+} satisfies LoaderThis<ValueInjectionLoaderOptions>;
+
+const instrumentationLoaderThis = {
+  ...defaultLoaderThis,
+  resourcePath: './instrumentation-client.js',
 } satisfies LoaderThis<ValueInjectionLoaderOptions>;
 
-describe('valueInjectionLoader', () => {
+describe.each([[clientConfigLoaderThis], [instrumentationLoaderThis]])('valueInjectionLoader', loaderThis => {
   it('should correctly insert values for basic config', () => {
     const userCode = `
       import * as Sentry from '@sentry/nextjs';