fix(nextjs): Inject client config into _app instead of main (#7009)

getsentry · Feb 1, 2023 · a111905 · a111905
1 parent fd4db0d
commit a111905
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/packages/nextjs/src/config/webpack.ts b/packages/nextjs/src/config/webpack.ts
@@ -473,8 +473,13 @@ function shouldAddSentryToEntryPoint(
     return entryPointName.startsWith('pages/');
   } else if (runtime === 'browser') {
     return (
-      entryPointName === 'main' || // entrypoint for `/pages` pages
-      entryPointName === 'main-app' // entrypoint for `/app` pages
+      // entrypoint for `/pages` pages - this is included on all clientside pages
+      // It's important that we inject the SDK into this file and not into 'main' because in 'main'
+      // some important Next.js code (like the setup code for getCongig()) is located and some users
+      // may need this code inside their Sentry configs
+      entryPointName === 'pages/_app' ||
+      // entrypoint for `/app` pages
+      entryPointName === 'main-app'
     );
   } else {
     // User-specified pages to skip. (Note: For ease of use, `excludeServerRoutes` is specified in terms of routes,

diff --git a/packages/nextjs/test/config/webpack/constructWebpackConfig.test.ts b/packages/nextjs/test/config/webpack/constructWebpackConfig.test.ts
@@ -139,7 +139,7 @@ describe('constructWebpackConfigFunction()', () => {
       );
     });
 
-    it('injects user config file into `_app` in server bundle but not in client bundle', async () => {
+    it('injects user config file into `_app` in server bundle and in the client bundle', async () => {
       const finalServerWebpackConfig = await materializeFinalWebpackConfig({
         exportedNextConfig,
         incomingWebpackConfig: serverWebpackConfig,
@@ -158,7 +158,7 @@ describe('constructWebpackConfigFunction()', () => {
       );
       expect(finalClientWebpackConfig.entry).toEqual(
         expect.objectContaining({
-          'pages/_app': expect.not.arrayContaining([clientConfigFilePath]),
+          'pages/_app': expect.arrayContaining([clientConfigFilePath]),
         }),
       );
     });
@@ -233,9 +233,9 @@ describe('constructWebpackConfigFunction()', () => {
       });
 
       expect(finalWebpackConfig.entry).toEqual({
-        main: ['./sentry.client.config.js', './src/index.ts'],
+        main: './src/index.ts',
         // only _app has config file injected
-        'pages/_app': 'next-client-pages-loader?page=%2F_app',
+        'pages/_app': ['./sentry.client.config.js', 'next-client-pages-loader?page=%2F_app'],
         'pages/_error': 'next-client-pages-loader?page=%2F_error',
         'pages/sniffTour': ['./node_modules/smellOVision/index.js', 'private-next-pages/sniffTour.js'],
         'pages/simulator/leaderboard': {