.

dev-packages/e2e-tests/test-applications/nextjs-15/app/page-with-prefetch/page.tsx → dev-packages/e2e-tests/test-applications/nextjs-13/app/page-with-prefetch/page.tsx

@@ -4,5 +4,9 @@ export const dynamic = 'force-dynamic';
 
 export default async function Page() {
   await new Promise(resolve => setTimeout(resolve, 500));
-  return <Link href="/prefetchable-page">prefetchable page</Link>;
+  return (
+    <Link href="/prefetchable-page" id="prefetch-link">
+      prefetchable page
+    </Link>
+  );
 }

dev-packages/e2e-tests/test-applications/nextjs-13/app/prefetchable-page/loading.tsx

@@ -0,0 +1,11 @@
+export default function Page() {
+  return <p>loading</p>;
+}
+
+export async function generateMetadata() {
+  const res = (await fetch('http://example.com/')).text();
+
+  return {
+    title: res,
+  };
+}

dev-packages/e2e-tests/test-applications/nextjs-13/app/prefetchable-page/page.tsx

@@ -0,0 +1,15 @@
+export const dynamic = 'force-dynamic';
+
+export default async function Page() {
+  await new Promise(resolve => setTimeout(resolve, 100));
+  await (await fetch('http://example.com/', { cache: 'no-cache' })).text();
+  return <p>hello</p>;
+}
+
+export async function generateMetadata() {
+  const res = (await fetch('http://example.com/')).text();
+
+  return {
+    title: res,
+  };
+}

dev-packages/e2e-tests/test-applications/nextjs-13/tests/isomorphic/prefetch-tracing.test.ts

@@ -0,0 +1,14 @@
+import { expect, test } from '@playwright/test';
+import { waitForTransaction } from '@sentry-internal/test-utils';
+
+test('Should capture transactions with `http.server.prefetch` op for prefetch traces', async ({ page }) => {
+  const serverPrefetchTransactionPromise = waitForTransaction('nextjs-13', async transactionEvent => {
+    console.log('t', transactionEvent.transaction);
+    return transactionEvent?.transaction === 'GET /prefetchable-page';
+  });
+
+  await page.goto(`/page-with-prefetch`);
+
+  const serverPrefetchTransaction = await serverPrefetchTransactionPromise;
+  expect(serverPrefetchTransaction.contexts?.trace?.op).toBe('http.server.prefetch');
+});

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/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

packages/nextjs/src/common/wrapServerComponentWithSentry.ts

@@ -49,11 +49,6 @@ export function wrapServerComponentWithSentry<F extends (...args: any[]) => any>
 
         // We mark the root span as an app router span so we can allow-list it in our span processor that would normally filter out all Next.js transactions/spans
         rootSpan.setAttribute('sentry.rsc', true);
-
-        if (headersDict?.['Next-Router-Prefetch']) {
-          // We mark the root span as a prefetch request
-          rootSpan.setAttribute('sentry.next.prefetch', true);
-        }
       }
 
       isolationScope.setSDKProcessingMetadata({

packages/node/src/integrations/http.ts

@@ -165,6 +165,10 @@ export const instrumentHttp = Object.assign(
 
         isolationScope.setTransactionName(bestEffortTransactionName);
 
+        if (isKnownPrefetchRequest(req)) {
+          span.setAttribute('sentry.http.prefetch', true);
+        }
+
         _httpOptions.instrumentation?.requestHook?.(span, req);
       },
       responseHook: (span, res) => {
@@ -275,3 +279,11 @@ function getBreadcrumbData(request: ClientRequest): Partial<SanitizedRequestData
 function _isClientRequest(req: ClientRequest | HTTPModuleRequestIncomingMessage): req is ClientRequest {
   return 'outputData' in req && 'outputSize' in req && !('client' in req) && !('statusCode' in req);
 }
+
+/**
+ * Detects if an incoming request is a prefetch request.
+ */
+function isKnownPrefetchRequest(req: HTTPModuleRequestIncomingMessage): boolean {
+  // Currently only handles Next.js prefetch requests but may check other frameworks in the future.
+  return !!req.headers['next-router-prefetch'];
+}

packages/opentelemetry/src/utils/parseSpanDescription.ts

@@ -133,6 +133,11 @@ export function descriptionForHttpMethod(
       break;
   }
 
+  // Spans for HTTP requests we have determined to be prefetch requests will have a `.prefetch` postfix in the op
+  if (attributes['sentry.http.prefetch']) {
+    opParts.push('prefetch');
+  }
+
   const { urlPath, url, query, fragment, hasRoute } = getSanitizedUrl(attributes, kind);
 
   if (!urlPath) {