@depup/sentry__react 10.75.2-depup.0 → 11.1.0-depup.0

package/build/esm/reactrouter-compat-utils/instrumentation.js

@@ -1,22 +1,17 @@
 import { WINDOW, browserTracingIntegration, startBrowserTracingPageLoadSpan, startBrowserTracingNavigationSpan } from '@sentry/browser';
-import { SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, SEMANTIC_ATTRIBUTE_SENTRY_OP, SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, debug, addNonEnumerableProperty, spanToJSON, getCurrentScope, getClient } from '@sentry/core';
+import { extendIntegration, PAGELOAD_SPAN_NAME_FALLBACK, SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, hasSpanStreamingEnabled, debug, getClient, addNonEnumerableProperty, spanToJSON, getCurrentScope, NAVIGATION_SPAN_NAME_FALLBACK } from '@sentry/core';
 import * as React from 'react';
 import { DEBUG_BUILD } from '../debug-build.js';
 import { hoistNonReactStatics } from '../hoist-non-react-statics.js';
 import { checkRouteForAsyncHandler } from './lazy-routes.js';
-import { getActiveRootSpan, setNavigationContext, clearNavigationContext, resolveRouteNameAndSource, transactionNameHasWildcard, initializeRouterUtils } from './utils.js';
-import { URL_TEMPLATE } from '@sentry/conventions/attributes';
+import { getActiveRootSpan, setNavigationContext, clearNavigationContext, resolveRouteNameAndSource, transactionNameHasWildcard } from './utils.js';
+import { SENTRY_OP, SENTRY_SEGMENT_NAME_SOURCE, URL_TEMPLATE } from '@sentry/conventions/attributes';
+import { PAGELOAD, NAVIGATION } from '@sentry/conventions/op';
 
-let _useEffect;
-let _useLocation;
-let _useNavigationType;
-let _createRoutesFromChildren;
-let _matchRoutes;
-let _enableAsyncRouteHandlers = false;
-let _lazyRouteTimeout = 3e3;
-let _lazyRouteManifest;
-let _basename = "";
-const CLIENTS_WITH_INSTRUMENT_NAVIGATION = /* @__PURE__ */ new WeakSet();
+const reactRouterConfigByClient = /* @__PURE__ */ new WeakMap();
+function getRouterConfig(client) {
+  return client ? reactRouterConfigByClient.get(client) : void 0;
+}
 const useIsomorphicLayoutEffect = WINDOW?.document ? React.useLayoutEffect : React.useEffect;
 const activeNavigationSpans = /* @__PURE__ */ new WeakMap();
 const allRoutes = /* @__PURE__ */ new Set();
@@ -100,11 +95,11 @@ function resolveDeferredLazyRoutePromise(span) {
     }
   }
 }
-function processResolvedRoutes(resolvedRoutes, parentRoute, currentLocation = null, capturedSpan) {
+function processResolvedRoutes(resolvedRoutes, config, parentRoute, currentLocation = null, capturedSpan) {
   resolvedRoutes.forEach((child) => {
     allRoutes.add(child);
-    if (_enableAsyncRouteHandlers) {
-      checkRouteForAsyncHandler(child, processResolvedRoutes);
+    if (config.enableAsyncRouteHandlers) {
+      checkRouteForAsyncHandler(child, (r, p, l, s) => processResolvedRoutes(r, config, p, l, s));
     }
   });
   if (parentRoute) {
@@ -112,12 +107,12 @@ function processResolvedRoutes(resolvedRoutes, parentRoute, currentLocation = nu
   }
   const targetSpan = capturedSpan ?? getActiveRootSpan();
   if (targetSpan) {
-    const spanJson = spanToJSON(targetSpan);
-    if (spanJson.timestamp) {
+    const { end_timestamp, attributes } = spanToJSON(targetSpan);
+    if (end_timestamp) {
       DEBUG_BUILD && debug.warn("[React Router] Lazy handler resolved after span ended - skipping update");
       return;
     }
-    const spanOp = spanJson.op;
+    const spanOp = attributes[SENTRY_OP];
     let location = currentLocation;
     if (!location && !capturedSpan) {
       if (typeof WINDOW !== "undefined") {
@@ -133,62 +128,65 @@ function processResolvedRoutes(resolvedRoutes, parentRoute, currentLocation = nu
           activeRootSpan: targetSpan,
           location: { pathname: location.pathname },
           routes: Array.from(allRoutes),
-          allRoutes: Array.from(allRoutes)
+          allRoutes: Array.from(allRoutes),
+          config
         });
       } else if (spanOp === "navigation") {
-        updateNavigationSpan(targetSpan, location, Array.from(allRoutes), false, _matchRoutes);
+        updateNavigationSpan(targetSpan, location, Array.from(allRoutes), false, config);
       }
     }
   }
 }
-function updateNavigationSpan(activeRootSpan, location, allRoutes2, forceUpdate = false, matchRoutes) {
-  const spanJson = spanToJSON(activeRootSpan);
-  const currentName = spanJson.description;
+function updateNavigationSpan(activeRootSpan, location, allRoutes2, forceUpdate = false, config) {
+  const { name: currentName, end_timestamp, attributes } = spanToJSON(activeRootSpan);
+  const spanPathname = activeRootSpan?.__sentry_navigation_pathname__;
+  if (spanPathname !== void 0 && spanPathname !== location.pathname) {
+    DEBUG_BUILD && debug.log(
+      `[React Router] Not renaming the navigation span for "${spanPathname}" with the route of "${location.pathname}"`
+    );
+    return;
+  }
   const hasBeenNamed = activeRootSpan?.__sentry_navigation_name_set__;
   const currentNameHasWildcard = currentName && transactionNameHasWildcard(currentName);
   const shouldUpdate = !hasBeenNamed || forceUpdate || currentNameHasWildcard;
-  if (shouldUpdate && !spanJson.timestamp) {
-    const currentBranches = matchRoutes(allRoutes2, location);
+  if (shouldUpdate && !end_timestamp) {
+    const currentBranches = config.matchRoutes(allRoutes2, location);
     const [name, source] = resolveRouteNameAndSource(
       location,
       allRoutes2,
       allRoutes2,
       currentBranches || [],
-      _basename,
-      _lazyRouteManifest,
-      _enableAsyncRouteHandlers
+      config
     );
-    const currentSource = spanJson.data?.[SEMANTIC_ATTRIBUTE_SENTRY_SOURCE];
+    const currentSource = attributes[SENTRY_SEGMENT_NAME_SOURCE];
     const isImprovement = name && (!currentName || // No current name - always set
     !hasBeenNamed && (currentSource !== "route" || source === "route") || // Not finalized - allow unless downgrading route→url
     currentSource !== "route" && source === "route" || // URL → route upgrade
     currentSource === "route" && source === "route" && currentNameHasWildcard);
     if (isImprovement) {
-      activeRootSpan.updateName(name);
-      activeRootSpan.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, source);
+      const client = getClient();
+      const isUnparameterizedStreamedNavigation = source !== "route" && !!client && hasSpanStreamingEnabled(client);
+      activeRootSpan.updateName(isUnparameterizedStreamedNavigation ? NAVIGATION_SPAN_NAME_FALLBACK : name);
+      activeRootSpan.setAttribute(SENTRY_SEGMENT_NAME_SOURCE, source);
       if (source === "route") {
         activeRootSpan.setAttribute(URL_TEMPLATE, name);
       }
       if (!transactionNameHasWildcard(name) && source === "route") {
-        addNonEnumerableProperty(
-          activeRootSpan,
-          "__sentry_navigation_name_set__",
-          true
-        );
+        addNonEnumerableProperty(activeRootSpan, "__sentry_navigation_name_set__", true);
       }
     }
   }
 }
-function setupRouterSubscription(router, routes, version, basename, activeRootSpan) {
+function setupRouterSubscription(router, routes, version, activeRootSpan, config) {
   let isInitialPageloadComplete = false;
-  let hasSeenPageloadSpan = !!activeRootSpan && spanToJSON(activeRootSpan).op === "pageload";
+  let hasSeenPageloadSpan = !!activeRootSpan && spanToJSON(activeRootSpan).attributes[SENTRY_OP] === "pageload";
   let hasSeenPopAfterPageload = false;
   let scheduledNavigationHandler = null;
   let lastHandledPathname = null;
   router.subscribe((state) => {
     if (!isInitialPageloadComplete) {
       const currentRootSpan = getActiveRootSpan();
-      const isCurrentlyInPageload = currentRootSpan && spanToJSON(currentRootSpan).op === "pageload";
+      const isCurrentlyInPageload = currentRootSpan && spanToJSON(currentRootSpan).attributes[SENTRY_OP] === "pageload";
       if (isCurrentlyInPageload) {
         hasSeenPageloadSpan = true;
       } else if (hasSeenPageloadSpan) {
@@ -213,8 +211,8 @@ function setupRouterSubscription(router, routes, version, basename, activeRootSp
           routes,
           navigationType: state.historyAction,
           version,
-          basename,
-          allRoutes: Array.from(allRoutes)
+          allRoutes: Array.from(allRoutes),
+          config
         });
       };
       if (state.navigation.state !== "idle") {
@@ -236,73 +234,66 @@ function setupRouterSubscription(router, routes, version, basename, activeRootSp
   });
 }
 function createV6CompatibleWrapCreateBrowserRouter(createRouterFunction, version) {
-  if (!_useEffect || !_useLocation || !_useNavigationType || !_matchRoutes) {
-    DEBUG_BUILD && debug.warn(
-      `reactRouter${version ? `V${version}` : ""}Instrumentation was unable to wrap the \`createRouter\` function because of one or more missing parameters.`
-    );
-    return createRouterFunction;
-  }
   return function(routes, opts) {
+    const base = getRouterConfig(getClient());
+    if (!base) {
+      DEBUG_BUILD && debug.warn(
+        `reactRouter${version ? `V${version}` : ""}Instrumentation was unable to wrap the \`createRouter\` function because the React Router browser tracing integration was not set up. Make sure \`Sentry.init()\` runs before the router is created.`
+      );
+      return createRouterFunction(routes, opts);
+    }
+    const config = { ...base, basename: opts?.basename || "" };
     addRoutesToAllRoutes(routes);
-    if (_enableAsyncRouteHandlers) {
+    if (config.enableAsyncRouteHandlers) {
       for (const route of routes) {
-        checkRouteForAsyncHandler(route, processResolvedRoutes);
+        checkRouteForAsyncHandler(route, (r, p, l, s) => processResolvedRoutes(r, config, p, l, s));
       }
     }
     const activeRootSpan = getActiveRootSpan();
     const hasPatchRoutesOnNavigation = opts && "patchRoutesOnNavigation" in opts && typeof opts.patchRoutesOnNavigation === "function";
     if (hasPatchRoutesOnNavigation && activeRootSpan) {
-      addNonEnumerableProperty(
-        activeRootSpan,
-        "__sentry_may_have_lazy_routes__",
-        true
-      );
+      addNonEnumerableProperty(activeRootSpan, "__sentry_may_have_lazy_routes__", true);
       createDeferredLazyRoutePromise(activeRootSpan);
     }
-    const wrappedOpts = wrapPatchRoutesOnNavigation(opts, false, activeRootSpan);
+    const wrappedOpts = wrapPatchRoutesOnNavigation(opts, false, activeRootSpan, config);
     const router = createRouterFunction(routes, wrappedOpts);
-    const basename = opts?.basename;
     if (router.state.historyAction === "POP" && activeRootSpan) {
       updatePageloadTransaction({
         activeRootSpan,
         location: router.state.location,
         routes,
-        basename,
-        allRoutes: Array.from(allRoutes)
+        allRoutes: Array.from(allRoutes),
+        config
       });
     }
-    _basename = basename || "";
-    setupRouterSubscription(router, routes, version, basename, activeRootSpan);
+    setupRouterSubscription(router, routes, version, activeRootSpan, config);
     return router;
   };
 }
 function createV6CompatibleWrapCreateMemoryRouter(createRouterFunction, version) {
-  if (!_useEffect || !_useLocation || !_useNavigationType || !_matchRoutes) {
-    DEBUG_BUILD && debug.warn(
-      `reactRouter${version ? `V${version}` : ""}Instrumentation was unable to wrap the \`createMemoryRouter\` function because of one or more missing parameters.`
-    );
-    return createRouterFunction;
-  }
   return function(routes, opts) {
+    const base = getRouterConfig(getClient());
+    if (!base) {
+      DEBUG_BUILD && debug.warn(
+        `reactRouter${version ? `V${version}` : ""}Instrumentation was unable to wrap the \`createMemoryRouter\` function because the React Router browser tracing integration was not set up. Make sure \`Sentry.init()\` runs before the router is created.`
+      );
+      return createRouterFunction(routes, opts);
+    }
+    const config = { ...base, basename: opts?.basename || "" };
     addRoutesToAllRoutes(routes);
-    if (_enableAsyncRouteHandlers) {
+    if (config.enableAsyncRouteHandlers) {
       for (const route of routes) {
-        checkRouteForAsyncHandler(route, processResolvedRoutes);
+        checkRouteForAsyncHandler(route, (r, p, l, s) => processResolvedRoutes(r, config, p, l, s));
       }
     }
     const memoryActiveRootSpanEarly = getActiveRootSpan();
     const hasPatchRoutesOnNavigation = opts && "patchRoutesOnNavigation" in opts && typeof opts.patchRoutesOnNavigation === "function";
     if (hasPatchRoutesOnNavigation && memoryActiveRootSpanEarly) {
-      addNonEnumerableProperty(
-        memoryActiveRootSpanEarly,
-        "__sentry_may_have_lazy_routes__",
-        true
-      );
+      addNonEnumerableProperty(memoryActiveRootSpanEarly, "__sentry_may_have_lazy_routes__", true);
       createDeferredLazyRoutePromise(memoryActiveRootSpanEarly);
     }
-    const wrappedOpts = wrapPatchRoutesOnNavigation(opts, true, memoryActiveRootSpanEarly);
+    const wrappedOpts = wrapPatchRoutesOnNavigation(opts, true, memoryActiveRootSpanEarly, config);
     const router = createRouterFunction(routes, wrappedOpts);
-    const basename = opts?.basename;
     let initialEntry = void 0;
     const initialEntries = opts?.initialEntries;
     const initialIndex = opts?.initialIndex;
@@ -316,19 +307,17 @@ function createV6CompatibleWrapCreateMemoryRouter(createRouterFunction, version)
         activeRootSpan: memoryActiveRootSpan,
         location,
         routes,
-        basename,
-        allRoutes: Array.from(allRoutes)
+        allRoutes: Array.from(allRoutes),
+        config
       });
     }
-    _basename = basename || "";
-    setupRouterSubscription(router, routes, version, basename, memoryActiveRootSpan);
+    setupRouterSubscription(router, routes, version, memoryActiveRootSpan, config);
     return router;
   };
 }
 function createReactRouterV6CompatibleTracingIntegration(options, version) {
   const integration = browserTracingIntegration({ ...options, instrumentPageLoad: false, instrumentNavigation: false });
   const {
-    useEffect,
     useLocation,
     useNavigationType,
     createRoutesFromChildren,
@@ -340,15 +329,14 @@ function createReactRouterV6CompatibleTracingIntegration(options, version) {
     lazyRouteTimeout,
     lazyRouteManifest
   } = options;
-  return {
-    ...integration,
+  return extendIntegration(integration, {
     setup(client) {
-      integration.setup(client);
       const finalTimeout = options.finalTimeout ?? 3e4;
       const defaultMaxWait = (options.idleTimeout ?? 1e3) * 3;
       const configuredMaxWait = lazyRouteTimeout ?? defaultMaxWait;
+      let resolvedLazyRouteTimeout;
       if (configuredMaxWait === Infinity) {
-        _lazyRouteTimeout = finalTimeout;
+        resolvedLazyRouteTimeout = finalTimeout;
         DEBUG_BUILD && debug.log(
           "[React Router] lazyRouteTimeout set to Infinity, capping at finalTimeout:",
           finalTimeout,
@@ -356,7 +344,7 @@ function createReactRouterV6CompatibleTracingIntegration(options, version) {
         );
       } else if (Number.isNaN(configuredMaxWait)) {
         DEBUG_BUILD && debug.warn("[React Router] lazyRouteTimeout must be a number, falling back to default:", defaultMaxWait);
-        _lazyRouteTimeout = defaultMaxWait;
+        resolvedLazyRouteTimeout = defaultMaxWait;
       } else if (configuredMaxWait < 0) {
         DEBUG_BUILD && debug.warn(
           "[React Router] lazyRouteTimeout must be non-negative or Infinity, got:",
@@ -364,51 +352,51 @@ function createReactRouterV6CompatibleTracingIntegration(options, version) {
           "falling back to:",
           defaultMaxWait
         );
-        _lazyRouteTimeout = defaultMaxWait;
+        resolvedLazyRouteTimeout = defaultMaxWait;
       } else {
-        _lazyRouteTimeout = configuredMaxWait;
+        resolvedLazyRouteTimeout = configuredMaxWait;
+      }
+      if (typeof useLocation === "function" && typeof useNavigationType === "function" && typeof createRoutesFromChildren === "function" && typeof matchRoutes === "function") {
+        reactRouterConfigByClient.set(client, {
+          useLocation,
+          useNavigationType,
+          createRoutesFromChildren,
+          matchRoutes,
+          stripBasename: stripBasename || false,
+          enableAsyncRouteHandlers,
+          instrumentNavigation,
+          lazyRouteTimeout: resolvedLazyRouteTimeout,
+          lazyRouteManifest,
+          basename: ""
+        });
+      } else {
+        DEBUG_BUILD && debug.warn(
+          "[React Router] Skipping route instrumentation because `useLocation`, `useNavigationType`, `createRoutesFromChildren` or `matchRoutes` was not provided. Pass them to `reactRouterBrowserTracingIntegration`, or import it from `@sentry/react/react-router` to have them supplied automatically."
+        );
       }
-      _useEffect = useEffect;
-      _useLocation = useLocation;
-      _useNavigationType = useNavigationType;
-      _matchRoutes = matchRoutes;
-      _createRoutesFromChildren = createRoutesFromChildren;
-      _enableAsyncRouteHandlers = enableAsyncRouteHandlers;
-      _lazyRouteManifest = lazyRouteManifest;
-      initializeRouterUtils(matchRoutes, stripBasename || false);
     },
     afterAllSetup(client) {
-      integration.afterAllSetup(client);
       const initPathName = WINDOW.location?.pathname;
       if (instrumentPageLoad && initPathName) {
         startBrowserTracingPageLoadSpan(client, {
-          name: initPathName,
+          // With span streaming, span names have to be low cardinality. The route is only resolved
+          // once the router renders, which updates the span name then.
+          name: hasSpanStreamingEnabled(client) ? PAGELOAD_SPAN_NAME_FALLBACK : initPathName,
           attributes: {
-            [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: "url",
-            [SEMANTIC_ATTRIBUTE_SENTRY_OP]: "pageload",
+            [SENTRY_SEGMENT_NAME_SOURCE]: "url",
+            [SENTRY_OP]: PAGELOAD,
             [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: `auto.pageload.react.reactrouter${version ? `_v${version}` : ""}`
           }
         });
       }
-      if (instrumentNavigation) {
-        CLIENTS_WITH_INSTRUMENT_NAVIGATION.add(client);
-      }
     }
-  };
+  });
 }
 function createV6CompatibleWrapUseRoutes(origUseRoutes, version) {
-  if (!_useEffect || !_useLocation || !_useNavigationType || !_matchRoutes) {
-    DEBUG_BUILD && debug.warn(
-      "reactRouterV6Instrumentation was unable to wrap `useRoutes` because of one or more missing parameters."
-    );
-    return origUseRoutes;
-  }
-  const SentryRoutes = (props) => {
+  const RouteReporter = ({ config, routes, locationArg }) => {
     const isMountRenderPass = React.useRef(true);
-    const { routes, locationArg } = props;
-    const Routes = origUseRoutes(routes, locationArg);
-    const location = _useLocation();
-    const navigationType = _useNavigationType();
+    const location = config.useLocation();
+    const navigationType = config.useNavigationType();
     const stableLocationParam = typeof locationArg === "string" || locationArg?.pathname ? locationArg : location;
     useIsomorphicLayoutEffect(() => {
       const added = addRoutesToAllRoutes(routes);
@@ -421,7 +409,8 @@ function createV6CompatibleWrapUseRoutes(origUseRoutes, version) {
           activeRootSpan: getActiveRootSpan(),
           location: normalizedLocation,
           routes,
-          allRoutes: Array.from(allRoutes)
+          allRoutes: Array.from(allRoutes),
+          config
         });
         isMountRenderPass.current = false;
       } else {
@@ -430,17 +419,26 @@ function createV6CompatibleWrapUseRoutes(origUseRoutes, version) {
           routes,
           navigationType,
           version,
-          allRoutes: Array.from(allRoutes)
+          allRoutes: Array.from(allRoutes),
+          config
         });
       }
     }, [navigationType, stableLocationParam]);
-    return Routes;
+    return null;
+  };
+  const SentryRoutesWrapper = ({
+    routes,
+    locationArg
+  }) => {
+    const config = getRouterConfig(getClient());
+    const routesElement = origUseRoutes(routes, locationArg);
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, routesElement, config ? /* @__PURE__ */ React.createElement(RouteReporter, { config, routes, locationArg }) : null);
   };
   return (routes, locationArg) => {
-    return /* @__PURE__ */ React.createElement(SentryRoutes, { routes, locationArg });
+    return /* @__PURE__ */ React.createElement(SentryRoutesWrapper, { routes, locationArg });
   };
 }
-function wrapPatchRoutesOnNavigation(opts, isMemoryRouter = false, capturedSpan) {
+function wrapPatchRoutesOnNavigation(opts, isMemoryRouter, capturedSpan, config) {
   if (!opts || !("patchRoutesOnNavigation" in opts) || typeof opts.patchRoutesOnNavigation !== "function") {
     return opts || {};
   }
@@ -472,14 +470,14 @@ function wrapPatchRoutesOnNavigation(opts, isMemoryRouter = false, capturedSpan)
               }
             }
             const spanJson = activeRootSpan ? spanToJSON(activeRootSpan) : void 0;
-            if (targetPath && activeRootSpan && spanJson && !spanJson.timestamp && // Span hasn't ended yet
-            spanJson.op === "navigation") {
+            if (targetPath && activeRootSpan && spanJson && !spanJson.end_timestamp && // Span hasn't ended yet
+            spanJson.attributes[SENTRY_OP] === "navigation") {
               updateNavigationSpan(
                 activeRootSpan,
                 { pathname: targetPath, search: "", hash: "", state: null, key: "default" },
                 Array.from(allRoutes),
                 true,
-                _matchRoutes
+                config
               );
             }
             return originalPatch(routeId, children);
@@ -498,8 +496,8 @@ function wrapPatchRoutesOnNavigation(opts, isMemoryRouter = false, capturedSpan)
           }
         }
         const spanJson = activeRootSpan ? spanToJSON(activeRootSpan) : void 0;
-        if (activeRootSpan && spanJson && !spanJson.timestamp && // Span hasn't ended yet
-        spanJson.op === "navigation") {
+        if (activeRootSpan && spanJson && !spanJson.end_timestamp && // Span hasn't ended yet
+        spanJson.attributes[SENTRY_OP] === "navigation") {
           const pathname = targetPath;
           if (pathname) {
             updateNavigationSpan(
@@ -507,7 +505,7 @@ function wrapPatchRoutesOnNavigation(opts, isMemoryRouter = false, capturedSpan)
               { pathname, search: "", hash: "", state: null, key: "default" },
               Array.from(allRoutes),
               false,
-              _matchRoutes
+              config
             );
           }
         }
@@ -521,14 +519,14 @@ function wrapPatchRoutesOnNavigation(opts, isMemoryRouter = false, capturedSpan)
   };
 }
 function handleNavigation(opts) {
-  const { location, routes, navigationType, version, matches, basename, allRoutes: allRoutes2 } = opts;
-  const branches = Array.isArray(matches) ? matches : _matchRoutes(allRoutes2 || routes, location, basename);
+  const { location, routes, navigationType, version, config, matches, allRoutes: allRoutes2 } = opts;
+  const branches = Array.isArray(matches) ? matches : config.matchRoutes(allRoutes2 || routes, location, config.basename);
   const client = getClient();
-  if (!client || !CLIENTS_WITH_INSTRUMENT_NAVIGATION.has(client)) {
+  if (!client || !config.instrumentNavigation) {
     return;
   }
   const activeRootSpan = getActiveRootSpan();
-  if (activeRootSpan && spanToJSON(activeRootSpan).op === "pageload" && navigationType === "POP") {
+  if (activeRootSpan && spanToJSON(activeRootSpan).attributes[SENTRY_OP] === "pageload" && navigationType === "POP") {
     return;
   }
   if ((navigationType === "PUSH" || navigationType === "POP") && branches) {
@@ -537,13 +535,11 @@ function handleNavigation(opts) {
       allRoutes2 || routes,
       allRoutes2 || routes,
       branches,
-      basename,
-      _lazyRouteManifest,
-      _enableAsyncRouteHandlers
+      config
     );
     const locationKey = computeLocationKey(location);
     const trackedNav = activeNavigationSpans.get(client);
-    const trackedSpanHasEnded = trackedNav && !trackedNav.isPlaceholder ? !!spanToJSON(trackedNav.span).timestamp : false;
+    const trackedSpanHasEnded = trackedNav && !trackedNav.isPlaceholder ? !!spanToJSON(trackedNav.span).end_timestamp : false;
     const { skip, shouldUpdate } = shouldSkipNavigation(trackedNav, locationKey, name, trackedSpanHasEnded);
     if (skip) {
       if (shouldUpdate && trackedNav) {
@@ -554,16 +550,13 @@ function handleNavigation(opts) {
             `[Tracing] Updated placeholder navigation name from "${oldName}" to "${name}" (will apply to real span)`
           );
         } else {
-          trackedNav.span.updateName(name);
-          trackedNav.span.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, source);
+          const isUnparameterizedStreamedNavigation = source !== "route" && hasSpanStreamingEnabled(client);
+          trackedNav.span.updateName(isUnparameterizedStreamedNavigation ? NAVIGATION_SPAN_NAME_FALLBACK : name);
+          trackedNav.span.setAttribute(SENTRY_SEGMENT_NAME_SOURCE, source);
           if (source === "route") {
             trackedNav.span.setAttribute(URL_TEMPLATE, name);
           }
-          addNonEnumerableProperty(
-            trackedNav.span,
-            "__sentry_navigation_name_set__",
-            true
-          );
+          addNonEnumerableProperty(trackedNav.span, "__sentry_navigation_name_set__", true);
           trackedNav.routeName = name;
           DEBUG_BUILD && debug.log(`[Tracing] Updated navigation span name from "${oldName}" to "${name}"`);
         }
@@ -585,11 +578,12 @@ function handleNavigation(opts) {
     let navigationSpan;
     try {
       navigationSpan = startBrowserTracingNavigationSpan(client, {
-        name: placeholderEntry.routeName,
-        // Use placeholder's routeName in case it was updated
+        // Use placeholder's routeName in case it was updated. With span streaming, span names have to
+        // be low cardinality, so we can't fall back to the URL.
+        name: source === "route" || !hasSpanStreamingEnabled(client) ? placeholderEntry.routeName : NAVIGATION_SPAN_NAME_FALLBACK,
         attributes: {
-          [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
-          [SEMANTIC_ATTRIBUTE_SENTRY_OP]: "navigation",
+          [SENTRY_SEGMENT_NAME_SOURCE]: source,
+          [SENTRY_OP]: NAVIGATION,
           [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: `auto.navigation.react.reactrouter${version ? `_v${version}` : ""}`,
           ...source === "route" && { [URL_TEMPLATE]: placeholderEntry.routeName }
         }
@@ -599,6 +593,7 @@ function handleNavigation(opts) {
       throw e;
     }
     if (navigationSpan) {
+      addNonEnumerableProperty(navigationSpan, "__sentry_navigation_pathname__", location.pathname);
       activeNavigationSpans.set(client, {
         span: navigationSpan,
         routeName: placeholderEntry.routeName,
@@ -606,7 +601,7 @@ function handleNavigation(opts) {
         pathname: location.pathname,
         locationKey
       });
-      patchSpanEnd(navigationSpan, location, routes, basename, "navigation");
+      patchSpanEnd(navigationSpan, location, routes, "navigation", config);
     } else {
       activeNavigationSpans.delete(client);
     }
@@ -646,32 +641,32 @@ function updatePageloadTransaction({
   activeRootSpan,
   location,
   routes,
+  config,
   matches,
-  basename,
   allRoutes: allRoutes2
 }) {
-  const branches = Array.isArray(matches) ? matches : _matchRoutes(allRoutes2 || routes, location, basename);
+  const branches = Array.isArray(matches) ? matches : config.matchRoutes(allRoutes2 || routes, location, config.basename);
   if (branches) {
     const [name, source] = resolveRouteNameAndSource(
       location,
       allRoutes2 || routes,
       allRoutes2 || routes,
       branches,
-      basename,
-      _lazyRouteManifest,
-      _enableAsyncRouteHandlers
+      config
     );
     getCurrentScope().setTransactionName(name || "/");
     if (activeRootSpan) {
-      activeRootSpan.updateName(name);
-      activeRootSpan.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, source);
+      const client = getClient();
+      const isUnparameterizedStreamedPageload = source !== "route" && !!client && hasSpanStreamingEnabled(client);
+      activeRootSpan.updateName(isUnparameterizedStreamedPageload ? PAGELOAD_SPAN_NAME_FALLBACK : name);
+      activeRootSpan.setAttribute(SENTRY_SEGMENT_NAME_SOURCE, source);
       if (source === "route") {
         activeRootSpan.setAttribute(URL_TEMPLATE, name);
       }
-      patchSpanEnd(activeRootSpan, location, routes, basename, "pageload");
+      patchSpanEnd(activeRootSpan, location, routes, "pageload", config);
     }
   } else if (activeRootSpan) {
-    patchSpanEnd(activeRootSpan, location, routes, basename, "pageload");
+    patchSpanEnd(activeRootSpan, location, routes, "pageload", config);
   }
 }
 function shouldUpdateWildcardSpanName(currentName, currentSource, newName, newSource, allowNoCurrentName = false) {
@@ -690,32 +685,27 @@ function shouldUpdateWildcardSpanName(currentName, currentSource, newName, newSo
   }
   return false;
 }
-function tryUpdateSpanNameBeforeEnd(span, spanJson, currentName, location, routes, basename, spanType, allRoutes2) {
+function tryUpdateSpanNameBeforeEnd(span, spanJson, currentName, location, routes, spanType, allRoutes2, config) {
   try {
-    const currentSource = spanJson.data?.[SEMANTIC_ATTRIBUTE_SENTRY_SOURCE];
+    const currentSource = spanJson.attributes[SENTRY_SEGMENT_NAME_SOURCE];
     if (currentSource === "route" && currentName && !transactionNameHasWildcard(currentName)) {
       return;
     }
     const currentAllRoutes = Array.from(allRoutes2);
     const routesToUse = currentAllRoutes.length > 0 ? currentAllRoutes : routes;
-    const branches = _matchRoutes(routesToUse, location, basename);
+    const branches = config.matchRoutes(routesToUse, location, config.basename);
     if (!branches) {
       return;
     }
-    const [name, source] = resolveRouteNameAndSource(
-      location,
-      routesToUse,
-      routesToUse,
-      branches,
-      basename,
-      _lazyRouteManifest,
-      _enableAsyncRouteHandlers
-    );
+    const [name, source] = resolveRouteNameAndSource(location, routesToUse, routesToUse, branches, config);
     const isImprovement = shouldUpdateWildcardSpanName(currentName, currentSource, name, source, true);
-    const spanNotEnded = spanType === "pageload" || !spanJson.timestamp;
+    const spanNotEnded = spanType === "pageload" || !spanJson.end_timestamp;
     if (isImprovement && spanNotEnded) {
-      span.updateName(name);
-      span.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, source);
+      const client = getClient();
+      const isUnparameterizedStreamedSpan = source !== "route" && !!client && hasSpanStreamingEnabled(client);
+      const fallbackName = spanType === "pageload" ? PAGELOAD_SPAN_NAME_FALLBACK : NAVIGATION_SPAN_NAME_FALLBACK;
+      span.updateName(isUnparameterizedStreamedSpan ? fallbackName : name);
+      span.setAttribute(SENTRY_SEGMENT_NAME_SOURCE, source);
       if (source === "route") {
         span.setAttribute(URL_TEMPLATE, name);
       }
@@ -724,7 +714,7 @@ function tryUpdateSpanNameBeforeEnd(span, spanJson, currentName, location, route
     DEBUG_BUILD && debug.warn(`Error updating span details before ending: ${error}`);
   }
 }
-function patchSpanEnd(span, location, routes, basename, spanType) {
+function patchSpanEnd(span, location, routes, spanType, config) {
   const patchedPropertyName = `__sentry_${spanType}_end_patched__`;
   const hasEndBeenPatched = span?.[patchedPropertyName];
   if (hasEndBeenPatched || !span.end) {
@@ -739,13 +729,13 @@ function patchSpanEnd(span, location, routes, basename, spanType) {
     endCalled = true;
     const endTimestamp = args.length > 0 ? args[0] : Date.now() / 1e3;
     const spanJson = spanToJSON(span);
-    const currentName = spanJson.description;
-    const currentSource = spanJson.data?.[SEMANTIC_ATTRIBUTE_SENTRY_SOURCE];
+    const currentName = spanJson.name;
+    const currentSource = spanJson.attributes[SENTRY_SEGMENT_NAME_SOURCE];
     const cleanupNavigationSpan = () => {
       const client = getClient();
       if (client && spanType === "navigation") {
         const trackedNav = activeNavigationSpans.get(client);
-        if (trackedNav && trackedNav.span === span) {
+        if (trackedNav?.span === span) {
           activeNavigationSpans.delete(client);
         }
       }
@@ -755,18 +745,18 @@ function patchSpanEnd(span, location, routes, basename, spanType) {
     const hasPendingOrMayHaveLazyRoutes = pendingPromises && pendingPromises.size > 0 || mayHaveLazyRoutes;
     const shouldWaitForLazyRoutes = hasPendingOrMayHaveLazyRoutes && currentName && (transactionNameHasWildcard(currentName) || currentSource !== "route");
     if (shouldWaitForLazyRoutes) {
-      if (_lazyRouteTimeout === 0) {
-        tryUpdateSpanNameBeforeEnd(span, spanJson, currentName, location, routes, basename, spanType, allRoutes);
+      if (config.lazyRouteTimeout === 0) {
+        tryUpdateSpanNameBeforeEnd(span, spanJson, currentName, location, routes, spanType, allRoutes, config);
         cleanupNavigationSpan();
         originalEnd(endTimestamp);
         return;
       }
-      const timeoutPromise = new Promise((r) => setTimeout(r, _lazyRouteTimeout));
+      const timeoutPromise = new Promise((r) => setTimeout(r, config.lazyRouteTimeout));
       let waitPromise;
       if (pendingPromises && pendingPromises.size > 0) {
         const allSettled = Promise.allSettled(pendingPromises).then(() => {
         });
-        waitPromise = _lazyRouteTimeout === Infinity ? allSettled : Promise.race([allSettled, timeoutPromise]);
+        waitPromise = config.lazyRouteTimeout === Infinity ? allSettled : Promise.race([allSettled, timeoutPromise]);
       } else {
         waitPromise = timeoutPromise;
       }
@@ -775,12 +765,12 @@ function patchSpanEnd(span, location, routes, basename, spanType) {
         tryUpdateSpanNameBeforeEnd(
           span,
           updatedSpanJson,
-          updatedSpanJson.description,
+          updatedSpanJson.name,
           location,
           routes,
-          basename,
           spanType,
-          allRoutes
+          allRoutes,
+          config
         );
         cleanupNavigationSpan();
         originalEnd(endTimestamp);
@@ -790,24 +780,23 @@ function patchSpanEnd(span, location, routes, basename, spanType) {
       });
       return;
     }
-    tryUpdateSpanNameBeforeEnd(span, spanJson, currentName, location, routes, basename, spanType, allRoutes);
+    tryUpdateSpanNameBeforeEnd(span, spanJson, currentName, location, routes, spanType, allRoutes, config);
     cleanupNavigationSpan();
     originalEnd(endTimestamp);
   };
   addNonEnumerableProperty(span, patchedPropertyName, true);
 }
 function createV6CompatibleWithSentryReactRouterRouting(Routes, version) {
-  if (!_useEffect || !_useLocation || !_useNavigationType || !_createRoutesFromChildren || !_matchRoutes) {
-    DEBUG_BUILD && debug.warn(`reactRouterV6Instrumentation was unable to wrap Routes because of one or more missing parameters.
-      useEffect: ${_useEffect}. useLocation: ${_useLocation}. useNavigationType: ${_useNavigationType}.
-      createRoutesFromChildren: ${_createRoutesFromChildren}. matchRoutes: ${_matchRoutes}.`);
-    return Routes;
-  }
-  const SentryRoutes = (props) => {
+  const RouteReporter = ({
+    config,
+    routeChildren
+  }) => {
     const isMountRenderPass = React.useRef(true);
-    const location = _useLocation();
-    const navigationType = _useNavigationType();
-    const routes = _createRoutesFromChildren(props.children);
+    const location = config.useLocation();
+    const navigationType = config.useNavigationType();
+    const routes = config.createRoutesFromChildren(
+      routeChildren
+    );
     useIsomorphicLayoutEffect(() => {
       const added = addRoutesToAllRoutes(routes);
       return () => removeRoutesFromAllRoutes(added);
@@ -819,17 +808,36 @@ function createV6CompatibleWithSentryReactRouterRouting(Routes, version) {
             activeRootSpan: getActiveRootSpan(),
             location,
             routes,
-            allRoutes: Array.from(allRoutes)
+            allRoutes: Array.from(allRoutes),
+            config
           });
           isMountRenderPass.current = false;
         } else {
-          handleNavigation({ location, routes, navigationType, version, allRoutes: Array.from(allRoutes) });
+          handleNavigation({
+            location,
+            routes,
+            navigationType,
+            version,
+            allRoutes: Array.from(allRoutes),
+            config
+          });
         }
       },
       // Re-run only on location/navigation changes, not children changes
       [location, navigationType]
     );
-    return /* @__PURE__ */ React.createElement(Routes, { ...props });
+    return null;
+  };
+  const SentryRoutes = (props) => {
+    const config = getRouterConfig(getClient());
+    return /* @__PURE__ */ React.createElement(
+      React.Fragment,
+      null,
+      // @ts-expect-error Setting more specific React Component typing for `R` generic above
+      // will break advanced type inference done by react router params
+      /* @__PURE__ */ React.createElement(Routes, { ...props }),
+      config ? /* @__PURE__ */ React.createElement(RouteReporter, { config, routeChildren: props.children }) : null
+    );
   };
   hoistNonReactStatics(SentryRoutes, Routes);
   return SentryRoutes;