From f7c033ae2cadb40e157266d5d9b1a591ee6342d3 Mon Sep 17 00:00:00 2001
From: Luca Forstner <luca.forstner@sentry.io>
Date: Tue, 10 Sep 2024 17:20:18 +0200
Subject: [PATCH] feat(nextjs): Give app router prefetch requests a
 `http.server.prefetch` op (#13600)

Ref (not complete fix)
https://github.com/getsentry/sentry-javascript/issues/13596

This gives Next.js prefetch requests a `http.server.prefetch` op, when a
`Next-Router-Prefetch: 1` header is present.

In some situations Next.js doesn't seem to attach the header for
prefetch requests. Seems like it is only attached when the current route
is a dynamic route.
---
 dev-packages/e2e-tests/package.json                  |  2 +-
 packages/node/src/integrations/http.ts               | 12 ++++++++++++
 .../opentelemetry/src/utils/parseSpanDescription.ts  |  5 +++++
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/dev-packages/e2e-tests/package.json b/dev-packages/e2e-tests/package.json
index 966dab87a6bc..0a375d118749 100644
--- a/dev-packages/e2e-tests/package.json
+++ b/dev-packages/e2e-tests/package.json
@@ -14,7 +14,7 @@
     "test:prepare": "ts-node prepare.ts",
     "test:validate": "run-s test:validate-configuration test:validate-test-app-setups",
     "clean": "rimraf tmp node_modules pnpm-lock.yaml && yarn clean:test-applications",
-    "clean:test-applications": "rimraf test-applications/**/{node_modules,dist,build,.next,.sveltekit,pnpm-lock.yaml} .last-run.json && pnpm store prune"
+    "clean:test-applications": "rimraf --glob test-applications/**/{node_modules,dist,build,.next,.sveltekit,pnpm-lock.yaml} .last-run.json && pnpm store prune"
   },
   "devDependencies": {
     "@types/glob": "8.0.0",
diff --git a/packages/node/src/integrations/http.ts b/packages/node/src/integrations/http.ts
index 0d5b2d4814d1..d9e5e671b702 100644
--- a/packages/node/src/integrations/http.ts
+++ b/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'] === '1';
+}
diff --git a/packages/opentelemetry/src/utils/parseSpanDescription.ts b/packages/opentelemetry/src/utils/parseSpanDescription.ts
index 615dc794ec23..ec0d63803ec5 100644
--- a/packages/opentelemetry/src/utils/parseSpanDescription.ts
+++ b/packages/opentelemetry/src/utils/parseSpanDescription.ts
@@ -136,6 +136,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) {