fix(nextjs): Don't drop transactions for server components on navigations

Author: Luca Forstner

dev-packages/e2e-tests/test-applications/nextjs-app-dir/app/layout.tsx

@@ -9,33 +9,49 @@ export default function Layout({ children }: { children: React.ReactNode }) {
           <h1>Layout (/)</h1>
           <ul>
             <li>
-              <Link href="/">/</Link>
+              <Link href="/" prefetch={false}>
+                /
+              </Link>
             </li>
             <li>
-              <Link href="/client-component">/client-component</Link>
+              <Link href="/client-component" prefetch={false}>
+                /client-component
+              </Link>
             </li>
             <li>
-              <Link href="/client-component/parameter/42">/client-component/parameter/42</Link>
+              <Link href="/client-component/parameter/42" prefetch={false}>
+                /client-component/parameter/42
+              </Link>
             </li>
             <li>
-              <Link href="/client-component/parameter/foo/bar/baz">/client-component/parameter/foo/bar/baz</Link>
+              <Link href="/client-component/parameter/foo/bar/baz" prefetch={false}>
+                /client-component/parameter/foo/bar/baz
+              </Link>
             </li>
             <li>
-              <Link href="/server-component">/server-component</Link>
+              <Link href="/server-component" prefetch={false}>
+                /server-component
+              </Link>
             </li>
             <li>
-              <Link href="/server-component/parameter/42">/server-component/parameter/42</Link>
+              <Link href="/server-component/parameter/42" prefetch={false}>
+                /server-component/parameter/42
+              </Link>
             </li>
             <li>
               <Link href="/server-component/parameter/foo/bar/baz" prefetch={false}>
                 /server-component/parameter/foo/bar/baz
               </Link>
             </li>
             <li>
-              <Link href="/not-found">/not-found</Link>
+              <Link href="/not-found" prefetch={false}>
+                /not-found
+              </Link>
             </li>
             <li>
-              <Link href="/redirect">/redirect</Link>
+              <Link href="/redirect" prefetch={false}>
+                /redirect
+              </Link>
             </li>
           </ul>
           <SpanContextProvider>{children}</SpanContextProvider>

dev-packages/e2e-tests/test-applications/nextjs-app-dir/tests/client-app-routing-instrumentation.test.ts

@@ -38,6 +38,7 @@ test('Creates a navigation transaction for app router routes', async ({ page })
   });
 
   const serverComponentTransactionPromise = waitForTransaction('nextjs-app-dir', async transactionEvent => {
+    console.log('t', transactionEvent.transaction, transactionEvent.contexts?.trace);
     return (
       // It seems to differ between Next.js versions whether the route is parameterized or not
       (transactionEvent?.transaction === 'GET /server-component/parameter/foo/bar/baz' ||

packages/nextjs/src/server/index.ts

@@ -238,6 +238,7 @@ export function init(options: NodeOptions): NodeClient | undefined {
 
           // Filter transactions that we explicitly want to drop.
           if (event.contexts?.trace?.data?.[TRANSACTION_ATTR_SHOULD_DROP_TRANSACTION]) {
+            console.log('Dropping transaction:', event.transaction, event.contexts.trace);
             return null;
           }
 
@@ -307,12 +308,6 @@ export function init(options: NodeOptions): NodeClient | undefined {
           if (typeof method === 'string' && typeof route === 'string') {
             event.transaction = `${method} ${route.replace(/\/route$/, '')}`;
             event.contexts.trace.data[SEMANTIC_ATTRIBUTE_SENTRY_SOURCE] = 'route';
-          } else {
-            // If we cannot hoist the route (or rather parameterize the transaction) for BaseServer.handleRequest spans,
-            // we drop it because the chance that it is a low-quality transaction we don't want is pretty high.
-            // This is important in the case of edge-runtime where Next.js will also create unnecessary Node.js root
-            // spans, that are not parameterized.
-            return null;
           }
         }