feat(nextjs): Add browser SDK to app directory browser bundle (#6812)

Author: Luca Forstner

packages/nextjs/src/config/webpack.ts

@@ -500,12 +500,12 @@ function shouldAddSentryToEntryPoint(
   excludeServerRoutes: Array<string | RegExp> = [],
   isDev: boolean,
 ): boolean {
-  if (entryPointName === 'middleware') {
-    return true;
-  }
-
   // On the server side, by default we inject the `Sentry.init()` code into every page (with a few exceptions).
   if (isServer) {
+    if (entryPointName === 'middleware') {
+      return true;
+    }
+
     const entryPointRoute = entryPointName.replace(/^pages/, '');
 
     // User-specified pages to skip. (Note: For ease of use, `excludeServerRoutes` is specified in terms of routes,
@@ -527,23 +527,18 @@ function shouldAddSentryToEntryPoint(
       // versions.)
       entryPointRoute === '/_app' ||
       entryPointRoute === '/_document' ||
-      // Newer versions of nextjs are starting to introduce things outside the `pages/` folder (middleware, an `app/`
-      // directory, etc), but until those features are stable and we know how we want to support them, the safest bet is
-      // not to inject anywhere but inside `pages/`.
       !entryPointName.startsWith('pages/')
     ) {
       return false;
     }
 
     // We want to inject Sentry into all other pages
     return true;
-  }
-
-  // On the client side, we only want to inject into `_app`, because that guarantees there'll be only one copy of the
-  // SDK in the eventual bundle. Since `_app` is the (effectively) the root component for every nextjs app, inclusing
-  // Sentry there means it will be available for every front end page.
-  else {
-    return entryPointName === 'pages/_app';
+  } else {
+    return (
+      entryPointName === 'pages/_app' || // entrypoint for `/pages` pages
+      entryPointName === 'main-app' // entrypoint for `/app` pages
+    );
   }
 }
 

packages/nextjs/test/integration/.gitignore

@@ -34,3 +34,6 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# Generated by Next.js 13
+.vscode

packages/nextjs/test/integration/app/clientcomponent/layout.tsx

@@ -0,0 +1,3 @@
+export default function ({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}

packages/nextjs/test/integration/app/clientcomponent/page.tsx

@@ -0,0 +1,5 @@
+'use client';
+
+export default function () {
+  return <p>I am a client component!</p>;
+}

packages/nextjs/test/integration/app/servercomponent/layout.tsx

@@ -0,0 +1,3 @@
+export default function ({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}

packages/nextjs/test/integration/app/servercomponent/page.tsx

@@ -0,0 +1,3 @@
+export default async function () {
+  return <p>I am a server component!</p>;
+}

packages/nextjs/test/integration/next12.config.template

@@ -0,0 +1,26 @@
+const { withSentryConfig } = require('@sentry/nextjs');
+
+// NOTE: This will be used by integration tests to distinguish between Webpack 4 and Webpack 5
+const moduleExports = {
+  webpack5: %RUN_WEBPACK_5%,
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  pageExtensions: ['jsx', 'js', 'tsx', 'ts', 'page.tsx'],
+  sentry: {
+    // Suppress the warning message from `handleSourcemapHidingOptionWarning` in `src/config/webpack.ts`
+    // TODO (v8): This can come out in v8, because this option will get a default value
+    hideSourceMaps: false,
+    excludeServerRoutes: [
+      '/api/excludedEndpoints/excludedWithString',
+      /\/api\/excludedEndpoints\/excludedWithRegExp/,
+    ],
+  },
+};
+
+const SentryWebpackPluginOptions = {
+  dryRun: true,
+  silent: true,
+};
+
+module.exports = withSentryConfig(moduleExports, SentryWebpackPluginOptions);

packages/nextjs/test/integration/next13.config.template

@@ -0,0 +1,29 @@
+const { withSentryConfig } = require('@sentry/nextjs');
+
+// NOTE: This will be used by integration tests to distinguish between Webpack 4 and Webpack 5
+const moduleExports = {
+  webpack5: %RUN_WEBPACK_5%,
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  experimental: {
+    appDir: Number(process.env.NODE_MAJOR) >= 16, // experimental.appDir requires Node v16.8.0 or later.
+  },
+  pageExtensions: ['jsx', 'js', 'tsx', 'ts', 'page.tsx'],
+  sentry: {
+    // Suppress the warning message from `handleSourcemapHidingOptionWarning` in `src/config/webpack.ts`
+    // TODO (v8): This can come out in v8, because this option will get a default value
+    hideSourceMaps: false,
+    excludeServerRoutes: [
+      '/api/excludedEndpoints/excludedWithString',
+      /\/api\/excludedEndpoints\/excludedWithRegExp/,
+    ],
+  },
+};
+
+const SentryWebpackPluginOptions = {
+  dryRun: true,
+  silent: true,
+};
+
+module.exports = withSentryConfig(moduleExports, SentryWebpackPluginOptions);

packages/nextjs/test/integration/pages/api/broken/index.ts

@@ -1,8 +1,7 @@
-import { withSentry } from '@sentry/nextjs';
 import { NextApiRequest, NextApiResponse } from 'next';
 
 const handler = async (_req: NextApiRequest, res: NextApiResponse): Promise<void> => {
   res.status(500).json({ statusCode: 500, message: 'Something went wrong' });
 };
 
-export default withSentry(handler);
+export default handler;

packages/nextjs/test/integration/pages/api/error/index.ts

@@ -1,8 +1,7 @@
-import { withSentry } from '@sentry/nextjs';
 import { NextApiRequest, NextApiResponse } from 'next';
 
 const handler = async (_req: NextApiRequest, _res: NextApiResponse): Promise<void> => {
   throw new Error('API Error');
 };
 
-export default withSentry(handler);
+export default handler;