whoop whoop

Author: chargome

packages/nextjs/src/client/routing/appRouterRoutingInstrumentation.ts

@@ -7,6 +7,7 @@ import {
   SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,
 } from '@sentry/core';
 import { startBrowserTracingNavigationSpan, startBrowserTracingPageLoadSpan, WINDOW } from '@sentry/react';
+import { maybeParameterizeRoute } from './parameterization';
 
 export const INCOMPLETE_APP_ROUTER_INSTRUMENTATION_TRANSACTION_NAME = 'incomplete-app-router-transaction';
 
@@ -34,15 +35,16 @@ const currentRouterPatchingNavigationSpanRef: NavigationSpanRef = { current: und
 
 /** Instruments the Next.js app router for pageloads. */
 export function appRouterInstrumentPageLoad(client: Client): void {
+  const parameterizedPathname = maybeParameterizeRoute(WINDOW.location.pathname);
   const origin = browserPerformanceTimeOrigin();
   startBrowserTracingPageLoadSpan(client, {
-    name: WINDOW.location.pathname,
+    name: parameterizedPathname ?? WINDOW.location.pathname,
     // pageload should always start at timeOrigin (and needs to be in s, not ms)
     startTime: origin ? origin / 1000 : undefined,
     attributes: {
       [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
       [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.nextjs.app_router_instrumentation',
-      [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+      [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: parameterizedPathname ? 'route' : 'url',
     },
   });
 }
@@ -85,7 +87,8 @@ const GLOBAL_OBJ_WITH_NEXT_ROUTER = GLOBAL_OBJ as typeof GLOBAL_OBJ & {
 /** Instruments the Next.js app router for navigation. */
 export function appRouterInstrumentNavigation(client: Client): void {
   routerTransitionHandler = (href, navigationType) => {
-    const pathname = new URL(href, WINDOW.location.href).pathname;
+    const parameterizedPathname = maybeParameterizeRoute(href);
+    const pathname = parameterizedPathname ?? new URL(href, WINDOW.location.href).pathname;
 
     if (navigationRoutingMode === 'router-patch') {
       navigationRoutingMode = 'transition-start-hook';
@@ -104,23 +107,27 @@ export function appRouterInstrumentNavigation(client: Client): void {
         attributes: {
           [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
           [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.nextjs.app_router_instrumentation',
-          [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+          [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: parameterizedPathname ? 'route' : 'url',
           'navigation.type': `router.${navigationType}`,
         },
       });
     }
   };
 
   WINDOW.addEventListener('popstate', () => {
+    const parameterizedPathname = maybeParameterizeRoute(WINDOW.location.pathname);
     if (currentRouterPatchingNavigationSpanRef.current?.isRecording()) {
-      currentRouterPatchingNavigationSpanRef.current.updateName(WINDOW.location.pathname);
-      currentRouterPatchingNavigationSpanRef.current.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'url');
+      currentRouterPatchingNavigationSpanRef.current.updateName(parameterizedPathname ?? WINDOW.location.pathname);
+      currentRouterPatchingNavigationSpanRef.current.setAttribute(
+        SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,
+        parameterizedPathname ? 'route' : 'url',
+      );
     } else {
       currentRouterPatchingNavigationSpanRef.current = startBrowserTracingNavigationSpan(client, {
-        name: WINDOW.location.pathname,
+        name: parameterizedPathname ?? WINDOW.location.pathname,
         attributes: {
           [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.nextjs.app_router_instrumentation',
-          [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+          [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: parameterizedPathname ? 'route' : 'url',
           'navigation.type': 'browser.popstate',
         },
       });
@@ -209,9 +216,14 @@ function patchRouter(client: Client, router: NextRouter, currentNavigationSpanRe
             transactionAttributes['navigation.type'] = 'router.forward';
           }
 
+          const parameterizedPathname = maybeParameterizeRoute(transactionName);
+
           currentNavigationSpanRef.current = startBrowserTracingNavigationSpan(client, {
-            name: transactionName,
-            attributes: transactionAttributes,
+            name: parameterizedPathname ?? transactionName,
+            attributes: {
+              ...transactionAttributes,
+              [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: parameterizedPathname ? 'route' : 'url',
+            },
           });
 
           return target.apply(thisArg, argArray);

packages/nextjs/src/client/routing/parameterization.ts

@@ -0,0 +1,38 @@
+import { GLOBAL_OBJ } from '@sentry/core';
+import type { RouteManifest } from '../../config/manifest/types';
+
+const globalWithInjectedManifest = GLOBAL_OBJ as typeof GLOBAL_OBJ & {
+  _sentryRouteManifest: RouteManifest | undefined;
+};
+
+export const maybeParameterizeRoute = (route: string): string | undefined => {
+  const manifest = globalWithInjectedManifest._sentryRouteManifest;
+
+  if (!manifest) {
+    return undefined;
+  }
+
+  // Static path: no parameterization needed
+  if (manifest.staticRoutes.some(r => r.path === route)) {
+    return undefined;
+  }
+
+  // Dynamic path: find the route pattern that matches the concrete route
+  for (const dynamicRoute of manifest.dynamicRoutes) {
+    if (dynamicRoute.regex) {
+      try {
+        // eslint-disable-next-line @sentry-internal/sdk/no-regexp-constructor -- regex patterns are from build-time route manifest, not user input
+        const regex = new RegExp(dynamicRoute.regex);
+        if (regex.test(route)) {
+          return dynamicRoute.path;
+        }
+      } catch (error) {
+        // Just skip this route in case of invalid regex
+        continue;
+      }
+    }
+  }
+
+  // We should never end up here
+  return undefined;
+};