From 3ef313981efe575b2ba642e8f1bc8ee9f1e8b063 Mon Sep 17 00:00:00 2001 From: Charly Gomez Date: Wed, 9 Jul 2025 12:35:58 +0200 Subject: [PATCH 1/3] use value injection on instrument-client --- packages/nextjs/src/config/webpack.ts | 2 +- packages/nextjs/test/config/loaders.test.ts | 2 +- .../test/config/valueInjectionLoader.test.ts | 64 +++++++++++++++++++ 3 files changed, 66 insertions(+), 2 deletions(-) diff --git a/packages/nextjs/src/config/webpack.ts b/packages/nextjs/src/config/webpack.ts index bcfbbd2e151f..e0faf2bd285d 100644 --- a/packages/nextjs/src/config/webpack.ts +++ b/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'), diff --git a/packages/nextjs/test/config/loaders.test.ts b/packages/nextjs/test/config/loaders.test.ts index 50d98a5cc440..1b290796acb3 100644 --- a/packages/nextjs/test/config/loaders.test.ts +++ b/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$/), diff --git a/packages/nextjs/test/config/valueInjectionLoader.test.ts b/packages/nextjs/test/config/valueInjectionLoader.test.ts index d75d73071234..c7992055f475 100644 --- a/packages/nextjs/test/config/valueInjectionLoader.test.ts +++ b/packages/nextjs/test/config/valueInjectionLoader.test.ts @@ -35,6 +35,70 @@ describe('valueInjectionLoader', () => { expect(result).toMatch(';globalThis["foo"] = "bar";'); }); + it('should work with instrumentation-client.js files', () => { + const instrumentationLoaderThis = { + ...loaderThis, + resourcePath: './instrumentation-client.js', + }; + + const userCode = ` + import * as Sentry from '@sentry/nextjs'; + Sentry.init(); + `; + + const result = valueInjectionLoader.call(instrumentationLoaderThis, userCode); + + expect(result).toMatch(';globalThis["foo"] = "bar";'); + }); + + it('should work with instrumentation-client.ts files', () => { + const instrumentationLoaderThis = { + ...loaderThis, + resourcePath: './instrumentation-client.ts', + }; + + const userCode = ` + import * as Sentry from '@sentry/nextjs'; + Sentry.init(); + `; + + const result = valueInjectionLoader.call(instrumentationLoaderThis, userCode); + + expect(result).toMatch(';globalThis["foo"] = "bar";'); + }); + + it('should work with src/instrumentation-client.js files', () => { + const instrumentationLoaderThis = { + ...loaderThis, + resourcePath: './src/instrumentation-client.js', + }; + + const userCode = ` + import * as Sentry from '@sentry/nextjs'; + Sentry.init(); + `; + + const result = valueInjectionLoader.call(instrumentationLoaderThis, userCode); + + expect(result).toMatch(';globalThis["foo"] = "bar";'); + }); + + it('should work with src/instrumentation-client.ts files', () => { + const instrumentationLoaderThis = { + ...loaderThis, + resourcePath: './src/instrumentation-client.ts', + }; + + const userCode = ` + import * as Sentry from '@sentry/nextjs'; + Sentry.init(); + `; + + const result = valueInjectionLoader.call(instrumentationLoaderThis, userCode); + + expect(result).toMatch(';globalThis["foo"] = "bar";'); + }); + it('should correctly insert values with directive', () => { const userCode = ` "use client" From 4527d8d5741b24f3fc26c2e657a3101402747c4f Mon Sep 17 00:00:00 2001 From: Charly Gomez Date: Wed, 9 Jul 2025 16:43:45 +0200 Subject: [PATCH 2/3] update tests --- .../valueInjectionLoader.test.ts.snap | 82 +++++++++++++++++++ .../test/config/valueInjectionLoader.test.ts | 17 ++-- 2 files changed, 93 insertions(+), 6 deletions(-) diff --git a/packages/nextjs/test/config/__snapshots__/valueInjectionLoader.test.ts.snap b/packages/nextjs/test/config/__snapshots__/valueInjectionLoader.test.ts.snap index 9e65a8b72384..8853a6c160b0 100644 --- a/packages/nextjs/test/config/__snapshots__/valueInjectionLoader.test.ts.snap +++ b/packages/nextjs/test/config/__snapshots__/valueInjectionLoader.test.ts.snap @@ -7,6 +7,13 @@ 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'); @@ -14,6 +21,18 @@ exports[`valueInjectionLoader > should correctly insert values with a misplaced + 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(); + " +`; diff --git a/packages/nextjs/test/config/valueInjectionLoader.test.ts b/packages/nextjs/test/config/valueInjectionLoader.test.ts index c7992055f475..0820fa1428bf 100644 --- a/packages/nextjs/test/config/valueInjectionLoader.test.ts +++ b/packages/nextjs/test/config/valueInjectionLoader.test.ts @@ -8,11 +8,6 @@ const defaultLoaderThis = { async: () => undefined, cacheable: () => undefined, callback: () => undefined, -}; - -const loaderThis = { - ...defaultLoaderThis, - resourcePath: './client.config.ts', getOptions() { return { values: { @@ -20,9 +15,19 @@ const loaderThis = { }, }; }, +}; + +const clientConfigLoaderThis = { + ...defaultLoaderThis, + resourcePath: './sentry.client.config.ts', +} satisfies LoaderThis; + +const instrumentationLoaderThis = { + ...defaultLoaderThis, + resourcePath: './instrumentation-client.js', } satisfies LoaderThis; -describe('valueInjectionLoader', () => { +describe.each([[clientConfigLoaderThis], [instrumentationLoaderThis]])('valueInjectionLoader', loaderThis => { it('should correctly insert values for basic config', () => { const userCode = ` import * as Sentry from '@sentry/nextjs'; From 89707c81698fd0e2e36bc4630ee2da58a55b7b0f Mon Sep 17 00:00:00 2001 From: Charly Gomez Date: Wed, 9 Jul 2025 16:44:30 +0200 Subject: [PATCH 3/3] . --- .../test/config/valueInjectionLoader.test.ts | 64 ------------------- 1 file changed, 64 deletions(-) diff --git a/packages/nextjs/test/config/valueInjectionLoader.test.ts b/packages/nextjs/test/config/valueInjectionLoader.test.ts index 0820fa1428bf..57b40b006baa 100644 --- a/packages/nextjs/test/config/valueInjectionLoader.test.ts +++ b/packages/nextjs/test/config/valueInjectionLoader.test.ts @@ -40,70 +40,6 @@ describe.each([[clientConfigLoaderThis], [instrumentationLoaderThis]])('valueInj expect(result).toMatch(';globalThis["foo"] = "bar";'); }); - it('should work with instrumentation-client.js files', () => { - const instrumentationLoaderThis = { - ...loaderThis, - resourcePath: './instrumentation-client.js', - }; - - const userCode = ` - import * as Sentry from '@sentry/nextjs'; - Sentry.init(); - `; - - const result = valueInjectionLoader.call(instrumentationLoaderThis, userCode); - - expect(result).toMatch(';globalThis["foo"] = "bar";'); - }); - - it('should work with instrumentation-client.ts files', () => { - const instrumentationLoaderThis = { - ...loaderThis, - resourcePath: './instrumentation-client.ts', - }; - - const userCode = ` - import * as Sentry from '@sentry/nextjs'; - Sentry.init(); - `; - - const result = valueInjectionLoader.call(instrumentationLoaderThis, userCode); - - expect(result).toMatch(';globalThis["foo"] = "bar";'); - }); - - it('should work with src/instrumentation-client.js files', () => { - const instrumentationLoaderThis = { - ...loaderThis, - resourcePath: './src/instrumentation-client.js', - }; - - const userCode = ` - import * as Sentry from '@sentry/nextjs'; - Sentry.init(); - `; - - const result = valueInjectionLoader.call(instrumentationLoaderThis, userCode); - - expect(result).toMatch(';globalThis["foo"] = "bar";'); - }); - - it('should work with src/instrumentation-client.ts files', () => { - const instrumentationLoaderThis = { - ...loaderThis, - resourcePath: './src/instrumentation-client.ts', - }; - - const userCode = ` - import * as Sentry from '@sentry/nextjs'; - Sentry.init(); - `; - - const result = valueInjectionLoader.call(instrumentationLoaderThis, userCode); - - expect(result).toMatch(';globalThis["foo"] = "bar";'); - }); - it('should correctly insert values with directive', () => { const userCode = ` "use client"