feat(nextjs): Mark clientside prefetch request spans with http.request.prefetch: true attribute (#15980)

Adds a `http.request.prefetch: true` attribute to Next.js clientside
requests if they're prefetching other pages.

---------

Co-authored-by: Lukas Stracke <lukas.stracke@sentry.io>

Author: Luca Forstner

dev-packages/e2e-tests/test-applications/nextjs-15/app/prefetching/page.tsx

@@ -0,0 +1,9 @@
+import Link from 'next/link';
+
+export default function Page() {
+  return (
+    <Link id="prefetch-link" href="/prefetching/to-be-prefetched">
+      link
+    </Link>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-15/app/prefetching/to-be-prefetched/page.tsx

@@ -0,0 +1,5 @@
+export const dynamic = 'force-dynamic';
+
+export default function Page() {
+  return <p>Hello</p>;
+}

dev-packages/e2e-tests/test-applications/nextjs-15/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

dev-packages/e2e-tests/test-applications/nextjs-15/package.json

@@ -18,7 +18,7 @@
     "@types/node": "^18.19.1",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.9",
-    "next": "15.0.0-canary.182",
+    "next": "15.3.0-canary.33",
     "react": "beta",
     "react-dom": "beta",
     "typescript": "~5.0.0"

dev-packages/e2e-tests/test-applications/nextjs-15/tests/prefetch-spans.test.ts

@@ -0,0 +1,24 @@
+import { expect, test } from '@playwright/test';
+import { waitForTransaction } from '@sentry-internal/test-utils';
+
+test('Prefetch client spans should have a http.request.prefetch attribute', async ({ page }) => {
+  test.skip(process.env.TEST_ENV === 'development', "Prefetch requests don't have the prefetch header in dev mode");
+
+  const pageloadTransactionPromise = waitForTransaction('nextjs-15', async transactionEvent => {
+    return transactionEvent?.transaction === '/prefetching';
+  });
+
+  await page.goto(`/prefetching`);
+
+  // Make it more likely that nextjs prefetches
+  await page.hover('#prefetch-link');
+
+  expect((await pageloadTransactionPromise).spans).toContainEqual(
+    expect.objectContaining({
+      op: 'http.client',
+      data: expect.objectContaining({
+        'http.request.prefetch': true,
+      }),
+    }),
+  );
+});

packages/nextjs/src/client/browserTracingIntegration.ts

@@ -12,6 +12,16 @@ export function browserTracingIntegration(
     ...options,
     instrumentNavigation: false,
     instrumentPageLoad: false,
+    onRequestSpanStart(...args) {
+      const [span, { headers }] = args;
+
+      // Next.js prefetch requests have a `next-router-prefetch` header
+      if (headers?.get('next-router-prefetch')) {
+        span?.setAttribute('http.request.prefetch', true);
+      }
+
+      return options.onRequestSpanStart?.(...args);
+    },
   });
 
   const { instrumentPageLoad = true, instrumentNavigation = true } = options;