@sentry/react 11.0.0-beta.1 → 11.0.0-rc.0

package/build/cjs/react-router.js

@@ -0,0 +1,21 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const reactRouter = require('react-router');
+const reactrouter_compat = require('./reactrouter.compat.js');
+
+function reactRouterBrowserTracingIntegration(options = {}) {
+  return reactrouter_compat.reactRouterBrowserTracingIntegration({
+    useLocation: reactRouter.useLocation,
+    useNavigationType: reactRouter.useNavigationType,
+    createRoutesFromChildren: reactRouter.createRoutesFromChildren,
+    matchRoutes: reactRouter.matchRoutes,
+    ...options
+  });
+}
+
+exports.wrapCreateBrowserRouter = reactrouter_compat.wrapCreateBrowserRouter;
+exports.wrapCreateMemoryRouter = reactrouter_compat.wrapCreateMemoryRouter;
+exports.wrapReactRouterRouting = reactrouter_compat.wrapReactRouterRouting;
+exports.wrapUseRoutes = reactrouter_compat.wrapUseRoutes;
+exports.reactRouterBrowserTracingIntegration = reactRouterBrowserTracingIntegration;
+//# sourceMappingURL=react-router.js.map

package/build/cjs/react-router.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-router.js","sources":["../../src/react-router.ts"],"sourcesContent":["import type { browserTracingIntegration } from '@sentry/browser';\nimport type { Integration } from '@sentry/core';\nimport { createRoutesFromChildren, matchRoutes, useLocation, useNavigationType } from 'react-router';\nimport type { ReactRouterOptions } from './reactrouter-compat-utils';\nimport { reactRouterBrowserTracingIntegration as reactRouterBrowserTracingIntegrationBase } from './reactrouter.compat';\n\n// The routing wrappers (`wrapReactRouterRouting`, `wrapUseRoutes`, `wrapCreateBrowserRouter`,\n// `wrapCreateMemoryRouter`) do not need the hooks - they read the config the integration below stored on\n// the client - so they are re-exported unchanged from the main entry point.\nexport {\n  wrapReactRouterRouting,\n  wrapCreateBrowserRouter,\n  wrapCreateMemoryRouter,\n  wrapUseRoutes,\n} from './reactrouter.compat';\n\ntype BrowserTracingOptions = Parameters<typeof browserTracingIntegration>[0];\n\n/**\n * A browser tracing integration for React Router v6, v7 and v8.\n *\n * Unlike {@link reactRouterBrowserTracingIntegration} exported from `@sentry/react`, this variant pulls the\n * required router hooks (`useLocation`, `useNavigationType`, `createRoutesFromChildren` and `matchRoutes`)\n * directly from `react-router`, so you don't have to pass them in:\n *\n * ```ts\n * import { reactRouterBrowserTracingIntegration } from '@sentry/react/react-router';\n *\n * Sentry.init({ integrations: [reactRouterBrowserTracingIntegration()] });\n * ```\n *\n * Any of the hooks can still be overridden via `options` (e.g. to supply the `react-router-dom` versions in v6).\n *\n * This requires `react-router` to be resolvable (it is declared as an optional peer dependency). If you are on\n * React Router v6 with only `react-router-dom` installed, either add `react-router` as a dependency or import\n * `reactRouterBrowserTracingIntegration` from `@sentry/react` and pass the hooks explicitly.\n */\nexport function reactRouterBrowserTracingIntegration(\n  options: BrowserTracingOptions & Partial<ReactRouterOptions> = {},\n): Integration {\n  return reactRouterBrowserTracingIntegrationBase({\n    useLocation,\n    useNavigationType,\n    createRoutesFromChildren,\n    matchRoutes,\n    ...options,\n  });\n}\n"],"names":["reactRouterBrowserTracingIntegrationBase","useLocation","useNavigationType","createRoutesFromChildren","matchRoutes"],"mappings":";;;;;AAqCO,SAAS,oCAAA,CACd,OAAA,GAA+D,EAAC,EACnD;AACb,EAAA,OAAOA,uDAAA,CAAyC;AAAA,iBAC9CC,uBAAA;AAAA,uBACAC,6BAAA;AAAA,8BACAC,oCAAA;AAAA,iBACAC,uBAAA;AAAA,IACA,GAAG;AAAA,GACJ,CAAA;AACH;;;;;;;;"}

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

@@ -10,16 +10,10 @@ const utils = require('./utils.js');
 const attributes = require('@sentry/conventions/attributes');
 const op = require('@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 = browser.WINDOW?.document ? React.useLayoutEffect : React.useEffect;
 const activeNavigationSpans = /* @__PURE__ */ new WeakMap();
 const allRoutes = /* @__PURE__ */ new Set();
@@ -103,11 +97,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) {
-      lazyRoutes.checkRouteForAsyncHandler(child, processResolvedRoutes);
+    if (config.enableAsyncRouteHandlers) {
+      lazyRoutes.checkRouteForAsyncHandler(child, (r, p, l, s) => processResolvedRoutes(r, config, p, l, s));
     }
   });
   if (parentRoute) {
@@ -136,29 +130,35 @@ 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) {
+function updateNavigationSpan(activeRootSpan, location, allRoutes2, forceUpdate = false, config) {
   const { name: currentName, end_timestamp, attributes: attributes$1 } = core.spanToJSON(activeRootSpan);
+  const spanPathname = activeRootSpan?.__sentry_navigation_pathname__;
+  if (spanPathname !== void 0 && spanPathname !== location.pathname) {
+    debugBuild.DEBUG_BUILD && core.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 && utils.transactionNameHasWildcard(currentName);
   const shouldUpdate = !hasBeenNamed || forceUpdate || currentNameHasWildcard;
   if (shouldUpdate && !end_timestamp) {
-    const currentBranches = matchRoutes(allRoutes2, location);
+    const currentBranches = config.matchRoutes(allRoutes2, location);
     const [name, source] = utils.resolveRouteNameAndSource(
       location,
       allRoutes2,
       allRoutes2,
       currentBranches || [],
-      _basename,
-      _lazyRouteManifest,
-      _enableAsyncRouteHandlers
+      config
     );
     const currentSource = attributes$1[attributes.SENTRY_SEGMENT_NAME_SOURCE];
     const isImprovement = name && (!currentName || // No current name - always set
@@ -179,7 +179,7 @@ function updateNavigationSpan(activeRootSpan, location, allRoutes2, forceUpdate
     }
   }
 }
-function setupRouterSubscription(router, routes, version, basename, activeRootSpan) {
+function setupRouterSubscription(router, routes, version, activeRootSpan, config) {
   let isInitialPageloadComplete = false;
   let hasSeenPageloadSpan = !!activeRootSpan && core.spanToJSON(activeRootSpan).attributes[attributes.SENTRY_OP] === "pageload";
   let hasSeenPopAfterPageload = false;
@@ -213,8 +213,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,17 +236,19 @@ function setupRouterSubscription(router, routes, version, basename, activeRootSp
   });
 }
 function createV6CompatibleWrapCreateBrowserRouter(createRouterFunction, version) {
-  if (!_useEffect || !_useLocation || !_useNavigationType || !_matchRoutes) {
-    debugBuild.DEBUG_BUILD && core.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(core.getClient());
+    if (!base) {
+      debugBuild.DEBUG_BUILD && core.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) {
-        lazyRoutes.checkRouteForAsyncHandler(route, processResolvedRoutes);
+        lazyRoutes.checkRouteForAsyncHandler(route, (r, p, l, s) => processResolvedRoutes(r, config, p, l, s));
       }
     }
     const activeRootSpan = utils.getActiveRootSpan();
@@ -255,35 +257,35 @@ function createV6CompatibleWrapCreateBrowserRouter(createRouterFunction, version
       core.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) {
-    debugBuild.DEBUG_BUILD && core.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(core.getClient());
+    if (!base) {
+      debugBuild.DEBUG_BUILD && core.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) {
-        lazyRoutes.checkRouteForAsyncHandler(route, processResolvedRoutes);
+        lazyRoutes.checkRouteForAsyncHandler(route, (r, p, l, s) => processResolvedRoutes(r, config, p, l, s));
       }
     }
     const memoryActiveRootSpanEarly = utils.getActiveRootSpan();
@@ -292,9 +294,8 @@ function createV6CompatibleWrapCreateMemoryRouter(createRouterFunction, version)
       core.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;
@@ -308,19 +309,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 = browser.browserTracingIntegration({ ...options, instrumentPageLoad: false, instrumentNavigation: false });
   const {
-    useEffect,
     useLocation,
     useNavigationType,
     createRoutesFromChildren,
@@ -332,15 +331,14 @@ function createReactRouterV6CompatibleTracingIntegration(options, version) {
     lazyRouteTimeout,
     lazyRouteManifest
   } = options;
-  return {
-    ...integration,
+  return core.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;
         debugBuild.DEBUG_BUILD && core.debug.log(
           "[React Router] lazyRouteTimeout set to Infinity, capping at finalTimeout:",
           finalTimeout,
@@ -348,7 +346,7 @@ function createReactRouterV6CompatibleTracingIntegration(options, version) {
         );
       } else if (Number.isNaN(configuredMaxWait)) {
         debugBuild.DEBUG_BUILD && core.debug.warn("[React Router] lazyRouteTimeout must be a number, falling back to default:", defaultMaxWait);
-        _lazyRouteTimeout = defaultMaxWait;
+        resolvedLazyRouteTimeout = defaultMaxWait;
       } else if (configuredMaxWait < 0) {
         debugBuild.DEBUG_BUILD && core.debug.warn(
           "[React Router] lazyRouteTimeout must be non-negative or Infinity, got:",
@@ -356,21 +354,30 @@ 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 {
+        debugBuild.DEBUG_BUILD && core.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;
-      utils.initializeRouterUtils(matchRoutes, stripBasename || false);
     },
     afterAllSetup(client) {
-      integration.afterAllSetup(client);
       const initPathName = browser.WINDOW.location?.pathname;
       if (instrumentPageLoad && initPathName) {
         browser.startBrowserTracingPageLoadSpan(client, {
@@ -384,25 +391,14 @@ function createReactRouterV6CompatibleTracingIntegration(options, version) {
           }
         });
       }
-      if (instrumentNavigation) {
-        CLIENTS_WITH_INSTRUMENT_NAVIGATION.add(client);
-      }
     }
-  };
+  });
 }
 function createV6CompatibleWrapUseRoutes(origUseRoutes, version) {
-  if (!_useEffect || !_useLocation || !_useNavigationType || !_matchRoutes) {
-    debugBuild.DEBUG_BUILD && core.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);
@@ -415,7 +411,8 @@ function createV6CompatibleWrapUseRoutes(origUseRoutes, version) {
           activeRootSpan: utils.getActiveRootSpan(),
           location: normalizedLocation,
           routes,
-          allRoutes: Array.from(allRoutes)
+          allRoutes: Array.from(allRoutes),
+          config
         });
         isMountRenderPass.current = false;
       } else {
@@ -424,17 +421,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(core.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 || {};
   }
@@ -473,7 +479,7 @@ function wrapPatchRoutesOnNavigation(opts, isMemoryRouter = false, capturedSpan)
                 { pathname: targetPath, search: "", hash: "", state: null, key: "default" },
                 Array.from(allRoutes),
                 true,
-                _matchRoutes
+                config
               );
             }
             return originalPatch(routeId, children);
@@ -501,7 +507,7 @@ function wrapPatchRoutesOnNavigation(opts, isMemoryRouter = false, capturedSpan)
               { pathname, search: "", hash: "", state: null, key: "default" },
               Array.from(allRoutes),
               false,
-              _matchRoutes
+              config
             );
           }
         }
@@ -515,10 +521,10 @@ 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 = core.getClient();
-  if (!client || !CLIENTS_WITH_INSTRUMENT_NAVIGATION.has(client)) {
+  if (!client || !config.instrumentNavigation) {
     return;
   }
   const activeRootSpan = utils.getActiveRootSpan();
@@ -531,9 +537,7 @@ function handleNavigation(opts) {
       allRoutes2 || routes,
       allRoutes2 || routes,
       branches,
-      basename,
-      _lazyRouteManifest,
-      _enableAsyncRouteHandlers
+      config
     );
     const locationKey = computeLocationKey(location);
     const trackedNav = activeNavigationSpans.get(client);
@@ -591,6 +595,7 @@ function handleNavigation(opts) {
       throw e;
     }
     if (navigationSpan) {
+      core.addNonEnumerableProperty(navigationSpan, "__sentry_navigation_pathname__", location.pathname);
       activeNavigationSpans.set(client, {
         span: navigationSpan,
         routeName: placeholderEntry.routeName,
@@ -598,7 +603,7 @@ function handleNavigation(opts) {
         pathname: location.pathname,
         locationKey
       });
-      patchSpanEnd(navigationSpan, location, routes, basename, "navigation");
+      patchSpanEnd(navigationSpan, location, routes, "navigation", config);
     } else {
       activeNavigationSpans.delete(client);
     }
@@ -638,20 +643,18 @@ 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] = utils.resolveRouteNameAndSource(
       location,
       allRoutes2 || routes,
       allRoutes2 || routes,
       branches,
-      basename,
-      _lazyRouteManifest,
-      _enableAsyncRouteHandlers
+      config
     );
     core.getCurrentScope().setTransactionName(name || "/");
     if (activeRootSpan) {
@@ -662,10 +665,10 @@ function updatePageloadTransaction({
       if (source === "route") {
         activeRootSpan.setAttribute(attributes.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) {
@@ -684,7 +687,7 @@ 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.attributes[attributes.SENTRY_SEGMENT_NAME_SOURCE];
     if (currentSource === "route" && currentName && !utils.transactionNameHasWildcard(currentName)) {
@@ -692,19 +695,11 @@ function tryUpdateSpanNameBeforeEnd(span, spanJson, currentName, location, route
     }
     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] = utils.resolveRouteNameAndSource(
-      location,
-      routesToUse,
-      routesToUse,
-      branches,
-      basename,
-      _lazyRouteManifest,
-      _enableAsyncRouteHandlers
-    );
+    const [name, source] = utils.resolveRouteNameAndSource(location, routesToUse, routesToUse, branches, config);
     const isImprovement = shouldUpdateWildcardSpanName(currentName, currentSource, name, source, true);
     const spanNotEnded = spanType === "pageload" || !spanJson.end_timestamp;
     if (isImprovement && spanNotEnded) {
@@ -721,7 +716,7 @@ function tryUpdateSpanNameBeforeEnd(span, spanJson, currentName, location, route
     debugBuild.DEBUG_BUILD && core.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) {
@@ -752,18 +747,18 @@ function patchSpanEnd(span, location, routes, basename, spanType) {
     const hasPendingOrMayHaveLazyRoutes = pendingPromises && pendingPromises.size > 0 || mayHaveLazyRoutes;
     const shouldWaitForLazyRoutes = hasPendingOrMayHaveLazyRoutes && currentName && (utils.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,9 +770,9 @@ function patchSpanEnd(span, location, routes, basename, spanType) {
           updatedSpanJson.name,
           location,
           routes,
-          basename,
           spanType,
-          allRoutes
+          allRoutes,
+          config
         );
         cleanupNavigationSpan();
         originalEnd(endTimestamp);
@@ -787,24 +782,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);
   };
   core.addNonEnumerableProperty(span, patchedPropertyName, true);
 }
 function createV6CompatibleWithSentryReactRouterRouting(Routes, version) {
-  if (!_useEffect || !_useLocation || !_useNavigationType || !_createRoutesFromChildren || !_matchRoutes) {
-    debugBuild.DEBUG_BUILD && core.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);
@@ -816,17 +810,36 @@ function createV6CompatibleWithSentryReactRouterRouting(Routes, version) {
             activeRootSpan: utils.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(core.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.hoistNonReactStatics(SentryRoutes, Routes);
   return SentryRoutes;