feat(nextjs): Register a route provider from the build-time route manifest

The App Router already resolves URLs to parameterized routes via the manifest it
injects at build time, so the provider is a thin wrapper over it.

Author: logaretm

packages/nextjs/src/client/browserTracingIntegration.ts

@@ -1,5 +1,7 @@
 import type { Integration } from '@sentry/core';
+import { createUrlRouteProvider, setRouteProvider } from '@sentry/core/browser';
 import { browserTracingIntegration as originalBrowserTracingIntegration, isBotUserAgent } from '@sentry/react';
+import { maybeParameterizeRoute, stripTrailingSlash, withBasePath } from './routing/parameterization';
 import { nextRouterInstrumentNavigation, nextRouterInstrumentPageLoad } from './routing/nextRoutingInstrumentation';
 
 /**
@@ -28,6 +30,17 @@ export function browserTracingIntegration(
 
   return {
     ...browserTracingIntegrationInstance,
+    setup(client) {
+      // Registered here rather than in `afterAllSetup` so it is in place before the pageload span is
+      // named. The build-time route manifest is already on the global object at this point, so nothing
+      // has to wait for the router itself.
+      setRouteProvider(
+        createUrlRouteProvider(url => maybeParameterizeRoute(stripTrailingSlash(withBasePath(url.pathname)))),
+        client,
+      );
+
+      browserTracingIntegrationInstance.setup?.(client);
+    },
     afterAllSetup(client) {
       if (isBotUserAgent()) {
         return;

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

@@ -14,17 +14,9 @@ import {
   WINDOW,
   getAbsoluteUrl,
 } from '@sentry/react';
-import { maybeParameterizeRoute } from './parameterization';
+import { maybeParameterizeRoute, stripTrailingSlash } from './parameterization';
 import { URL_FULL, URL_PATH, URL_TEMPLATE } from '@sentry/conventions/attributes';
 
-/**
- * Strips trailing slash from a pathname, unless it's the root path.
- * This normalizes paths like '/about/' to '/about' to handle Next.js `trailingSlash: true` config.
- */
-function stripTrailingSlash(pathname: string): string {
-  return pathname.length > 1 && pathname.endsWith('/') ? pathname.slice(0, -1) : pathname;
-}
-
 function setNavigationSpanUrlAttributes(span: Span, urlPath: string, urlOrPath: string): void {
   span.setAttributes({
     [URL_PATH]: urlPath,

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

@@ -12,6 +12,30 @@ let cachedManifestString: string | undefined = undefined;
 const compiledRegexCache: Map<string, RegExp> = new Map();
 const routeResultCache: Map<string, string | undefined> = new Map();
 
+const globalWithInjectedBasePath = GLOBAL_OBJ as typeof GLOBAL_OBJ & {
+  _sentryBasePath: string | undefined;
+};
+
+/**
+ * Strips trailing slash from a pathname, unless it's the root path.
+ * This normalizes paths like '/about/' to '/about' to handle Next.js `trailingSlash: true` config.
+ */
+export function stripTrailingSlash(pathname: string): string {
+  return pathname.length > 1 && pathname.endsWith('/') ? pathname.slice(0, -1) : pathname;
+}
+
+/**
+ * Prefixes a pathname with the configured `basePath` when it is missing.
+ *
+ * The build-time manifest is generated with `basePath` baked into every route, so a pathname that
+ * lacks it matches nothing.
+ */
+export function withBasePath(pathname: string): string {
+  const basePath = process.env._sentryBasePath ?? globalWithInjectedBasePath._sentryBasePath;
+
+  return basePath && !pathname.startsWith(basePath) ? `${basePath}${pathname}` : pathname;
+}
+
 /**
  * Calculate the specificity score for a route path.
  * Lower scores indicate more specific routes.