@sentry/react 10.6.0 → 10.8.0

package/build/cjs/{reactrouterv6-compat-utils.js → reactrouter-compat-utils/instrumentation.js}

@@ -3,8 +3,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const browser = require('@sentry/browser');
 const core = require('@sentry/core');
 const React = require('react');
-const debugBuild = require('./debug-build.js');
-const hoistNonReactStatics = require('./hoist-non-react-statics.js');
+const debugBuild = require('../debug-build.js');
+const hoistNonReactStatics = require('../hoist-non-react-statics.js');
+const lazyRoutes = require('./lazy-routes.js');
+const utils = require('./utils.js');
 
 /* eslint-disable max-lines */
 // Inspired from Donnie McNeal's solution:
@@ -16,14 +18,10 @@ let _useLocation;
 let _useNavigationType;
 let _createRoutesFromChildren;
 let _matchRoutes;
-let _stripBasename = false;
 let _enableAsyncRouteHandlers = false;
 
 const CLIENTS_WITH_INSTRUMENT_NAVIGATION = new WeakSet();
 
-// Keeping as a global variable for cross-usage in multiple functions
-const allRoutes = new Set();
-
 /**
  * Adds resolved routes as children to the parent route.
  * Prevents duplicate routes by checking if they already exist.
@@ -46,39 +44,22 @@ function addResolvedRoutesToParent(resolvedRoutes, parentRoute) {
   }
 }
 
-/**
- * Handles the result of an async handler function call.
- */
-function handleAsyncHandlerResult(result, route, handlerKey) {
-  if (
-    result &&
-    typeof result === 'object' &&
-    'then' in result &&
-    typeof (result ).then === 'function'
-  ) {
-    (result )
-      .then((resolvedRoutes) => {
-        if (Array.isArray(resolvedRoutes)) {
-          processResolvedRoutes(resolvedRoutes, route);
-        }
-      })
-      .catch((e) => {
-        debugBuild.DEBUG_BUILD && core.debug.warn(`Error resolving async handler '${handlerKey}' for route`, route, e);
-      });
-  } else if (Array.isArray(result)) {
-    processResolvedRoutes(result, route);
-  }
-}
+// Keeping as a global variable for cross-usage in multiple functions
+const allRoutes = new Set();
 
 /**
  * Processes resolved routes by adding them to allRoutes and checking for nested async handlers.
  */
-function processResolvedRoutes(resolvedRoutes, parentRoute) {
+function processResolvedRoutes(
+  resolvedRoutes,
+  parentRoute,
+  currentLocation = null,
+) {
   resolvedRoutes.forEach(child => {
     allRoutes.add(child);
     // Only check for async handlers if the feature is enabled
     if (_enableAsyncRouteHandlers) {
-      checkRouteForAsyncHandler(child);
+      lazyRoutes.checkRouteForAsyncHandler(child, processResolvedRoutes);
     }
   });
 
@@ -87,63 +68,81 @@ function processResolvedRoutes(resolvedRoutes, parentRoute) {
     addResolvedRoutesToParent(resolvedRoutes, parentRoute);
   }
 
-  // After processing lazy routes, check if we need to update an active pageload transaction
+  // After processing lazy routes, check if we need to update an active transaction
   const activeRootSpan = getActiveRootSpan();
-  if (activeRootSpan && core.spanToJSON(activeRootSpan).op === 'pageload') {
-    const location = browser.WINDOW.location;
+  if (activeRootSpan) {
+    const spanOp = core.spanToJSON(activeRootSpan).op;
+
+    // Try to use the provided location first, then fall back to global window location if needed
+    let location = currentLocation;
+    if (!location) {
+      if (typeof browser.WINDOW !== 'undefined') {
+        const globalLocation = browser.WINDOW.location;
+        if (globalLocation) {
+          location = { pathname: globalLocation.pathname };
+        }
+      }
+    }
+
     if (location) {
-      // Re-run the pageload transaction update with the newly loaded routes
-      updatePageloadTransaction(
-        activeRootSpan,
-        { pathname: location.pathname },
-        Array.from(allRoutes),
-        undefined,
-        undefined,
-        Array.from(allRoutes),
-      );
+      if (spanOp === 'pageload') {
+        // Re-run the pageload transaction update with the newly loaded routes
+        updatePageloadTransaction({
+          activeRootSpan,
+          location: { pathname: location.pathname },
+          routes: Array.from(allRoutes),
+          allRoutes: Array.from(allRoutes),
+        });
+      } else if (spanOp === 'navigation') {
+        // For navigation spans, update the name with the newly loaded routes
+        updateNavigationSpan(activeRootSpan, location, Array.from(allRoutes), false, _matchRoutes);
+      }
     }
   }
 }
 
 /**
- * Creates a proxy wrapper for an async handler function.
+ * Updates a navigation span with the correct route name after lazy routes have been loaded.
  */
-function createAsyncHandlerProxy(
-  originalFunction,
-  route,
-  handlerKey,
+function updateNavigationSpan(
+  activeRootSpan,
+  location,
+  allRoutes,
+  forceUpdate = false,
+  matchRoutes,
 ) {
-  const proxy = new Proxy(originalFunction, {
-    apply(target, thisArg, argArray) {
-      const result = target.apply(thisArg, argArray);
-      handleAsyncHandlerResult(result, route, handlerKey);
-      return result;
-    },
-  });
-
-  core.addNonEnumerableProperty(proxy, '__sentry_proxied__', true);
-
-  return proxy;
-}
+  // Check if this span has already been named to avoid multiple updates
+  // But allow updates if this is a forced update (e.g., when lazy routes are loaded)
+  const hasBeenNamed =
+    !forceUpdate &&
+    (
+      activeRootSpan
+
+    )?.__sentry_navigation_name_set__;
+
+  if (!hasBeenNamed) {
+    // Get fresh branches for the current location with all loaded routes
+    const currentBranches = matchRoutes(allRoutes, location);
+    const [name, source] = utils.resolveRouteNameAndSource(
+      location,
+      allRoutes,
+      allRoutes,
+      (currentBranches ) || [],
+      '',
+    );
 
-/**
- * Recursively checks a route for async handlers and sets up Proxies to add discovered child routes to allRoutes when called.
- */
-function checkRouteForAsyncHandler(route) {
-  // Set up proxies for any functions in the route's handle
-  if (route.handle && typeof route.handle === 'object') {
-    for (const key of Object.keys(route.handle)) {
-      const maybeFn = route.handle[key];
-      if (typeof maybeFn === 'function' && !(maybeFn ).__sentry_proxied__) {
-        route.handle[key] = createAsyncHandlerProxy(maybeFn, route, key);
-      }
-    }
-  }
+    // Only update if we have a valid name and the span hasn't finished
+    const spanJson = core.spanToJSON(activeRootSpan);
+    if (name && !spanJson.timestamp) {
+      activeRootSpan.updateName(name);
+      activeRootSpan.setAttribute(core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, source);
 
-  // Recursively check child routes
-  if (Array.isArray(route.children)) {
-    for (const child of route.children) {
-      checkRouteForAsyncHandler(child);
+      // Mark this span as having its name set to prevent future updates
+      core.addNonEnumerableProperty(
+        activeRootSpan ,
+        '__sentry_navigation_name_set__',
+        true,
+      );
     }
   }
 }
@@ -172,11 +171,14 @@ function createV6CompatibleWrapCreateBrowserRouter
     // Check for async handlers that might contain sub-route declarations (only if enabled)
     if (_enableAsyncRouteHandlers) {
       for (const route of routes) {
-        checkRouteForAsyncHandler(route);
+        lazyRoutes.checkRouteForAsyncHandler(route, processResolvedRoutes);
       }
     }
 
-    const router = createRouterFunction(routes, opts);
+    // Wrap patchRoutesOnNavigation to detect when lazy routes are loaded
+    const wrappedOpts = wrapPatchRoutesOnNavigation(opts);
+
+    const router = createRouterFunction(routes, wrappedOpts);
     const basename = opts?.basename;
 
     const activeRootSpan = getActiveRootSpan();
@@ -185,14 +187,13 @@ function createV6CompatibleWrapCreateBrowserRouter
     // This is the earliest convenient time to update the transaction name.
     // Callbacks to `router.subscribe` are not called for the initial load.
     if (router.state.historyAction === 'POP' && activeRootSpan) {
-      updatePageloadTransaction(
+      updatePageloadTransaction({
         activeRootSpan,
-        router.state.location,
+        location: router.state.location,
         routes,
-        undefined,
         basename,
-        Array.from(allRoutes),
-      );
+        allRoutes: Array.from(allRoutes),
+      });
     }
 
     router.subscribe((state) => {
@@ -255,11 +256,14 @@ function createV6CompatibleWrapCreateMemoryRouter
     // Check for async handlers that might contain sub-route declarations (only if enabled)
     if (_enableAsyncRouteHandlers) {
       for (const route of routes) {
-        checkRouteForAsyncHandler(route);
+        lazyRoutes.checkRouteForAsyncHandler(route, processResolvedRoutes);
       }
     }
 
-    const router = createRouterFunction(routes, opts);
+    // Wrap patchRoutesOnNavigation to detect when lazy routes are loaded
+    const wrappedOpts = wrapPatchRoutesOnNavigation(opts, true);
+
+    const router = createRouterFunction(routes, wrappedOpts);
     const basename = opts?.basename;
 
     const activeRootSpan = getActiveRootSpan();
@@ -284,7 +288,13 @@ function createV6CompatibleWrapCreateMemoryRouter
       : router.state.location;
 
     if (router.state.historyAction === 'POP' && activeRootSpan) {
-      updatePageloadTransaction(activeRootSpan, location, routes, undefined, basename, Array.from(allRoutes));
+      updatePageloadTransaction({
+        activeRootSpan,
+        location,
+        routes,
+        basename,
+        allRoutes: Array.from(allRoutes),
+      });
     }
 
     router.subscribe((state) => {
@@ -340,8 +350,10 @@ function createReactRouterV6CompatibleTracingIntegration(
       _useNavigationType = useNavigationType;
       _matchRoutes = matchRoutes;
       _createRoutesFromChildren = createRoutesFromChildren;
-      _stripBasename = stripBasename || false;
       _enableAsyncRouteHandlers = enableAsyncRouteHandlers;
+
+      // Initialize the router utils with the required dependencies
+      utils.initializeRouterUtils(matchRoutes, stripBasename || false);
     },
     afterAllSetup(client) {
       integration.afterAllSetup(client);
@@ -397,14 +409,12 @@ function createV6CompatibleWrapUseRoutes(origUseRoutes, version) {
       if (isMountRenderPass.current) {
         addRoutesToAllRoutes(routes);
 
-        updatePageloadTransaction(
-          getActiveRootSpan(),
-          normalizedLocation,
+        updatePageloadTransaction({
+          activeRootSpan: getActiveRootSpan(),
+          location: normalizedLocation,
           routes,
-          undefined,
-          undefined,
-          Array.from(allRoutes),
-        );
+          allRoutes: Array.from(allRoutes),
+        });
         isMountRenderPass.current = false;
       } else {
         handleNavigation({
@@ -426,6 +436,79 @@ function createV6CompatibleWrapUseRoutes(origUseRoutes, version) {
   };
 }
 
+function wrapPatchRoutesOnNavigation(
+  opts,
+  isMemoryRouter = false,
+) {
+  if (!opts || !('patchRoutesOnNavigation' in opts) || typeof opts.patchRoutesOnNavigation !== 'function') {
+    return opts || {};
+  }
+
+  const originalPatchRoutes = opts.patchRoutesOnNavigation;
+  return {
+    ...opts,
+    patchRoutesOnNavigation: async (args) => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
+      const targetPath = (args )?.path;
+
+      // For browser router, wrap the patch function to update span during patching
+      if (!isMemoryRouter) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
+        const originalPatch = (args )?.patch;
+        if (originalPatch) {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
+          (args ).patch = (routeId, children) => {
+            addRoutesToAllRoutes(children);
+            const activeRootSpan = getActiveRootSpan();
+            if (activeRootSpan && (core.spanToJSON(activeRootSpan) ).op === 'navigation') {
+              updateNavigationSpan(
+                activeRootSpan,
+                {
+                  pathname: targetPath,
+                  search: '',
+                  hash: '',
+                  state: null,
+                  key: 'default',
+                },
+                Array.from(allRoutes),
+                true, // forceUpdate = true since we're loading lazy routes
+                _matchRoutes,
+              );
+            }
+            return originalPatch(routeId, children);
+          };
+        }
+      }
+
+      const result = await originalPatchRoutes(args);
+
+      // Update navigation span after routes are patched
+      const activeRootSpan = getActiveRootSpan();
+      if (activeRootSpan && (core.spanToJSON(activeRootSpan) ).op === 'navigation') {
+        // For memory routers, we should not access window.location; use targetPath only
+        const pathname = isMemoryRouter ? targetPath : targetPath || browser.WINDOW.location?.pathname;
+        if (pathname) {
+          updateNavigationSpan(
+            activeRootSpan,
+            {
+              pathname,
+              search: '',
+              hash: '',
+              state: null,
+              key: 'default',
+            },
+            Array.from(allRoutes),
+            false, // forceUpdate = false since this is after lazy routes are loaded
+            _matchRoutes,
+          );
+        }
+      }
+
+      return result;
+    },
+  };
+}
+
 function handleNavigation(opts
 
 ) {
@@ -438,107 +521,30 @@ function handleNavigation(opts
   }
 
   if ((navigationType === 'PUSH' || navigationType === 'POP') && branches) {
-    let name,
-      source = 'url';
-    const isInDescendantRoute = locationIsInsideDescendantRoute(location, allRoutes || routes);
-
-    if (isInDescendantRoute) {
-      name = prefixWithSlash(rebuildRoutePathFromAllRoutes(allRoutes || routes, location));
-      source = 'route';
-    }
+    const [name, source] = utils.resolveRouteNameAndSource(
+      location,
+      routes,
+      allRoutes || routes,
+      branches ,
+      basename,
+    );
 
-    if (!isInDescendantRoute || !name) {
-      [name, source] = getNormalizedName(routes, location, branches, basename);
-    }
+    // Check if this might be a lazy route context
+    const isLazyRouteContext = utils.isLikelyLazyRouteContext(allRoutes || routes, location);
 
     const activeSpan = core.getActiveSpan();
-    const isAlreadyInNavigationSpan = activeSpan && core.spanToJSON(activeSpan).op === 'navigation';
+    const spanJson = activeSpan && core.spanToJSON(activeSpan);
+    const isAlreadyInNavigationSpan = spanJson?.op === 'navigation';
 
     // Cross usage can result in multiple navigation spans being created without this check
-    if (isAlreadyInNavigationSpan) {
-      activeSpan?.updateName(name);
-      activeSpan?.setAttribute(core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, source);
+    if (isAlreadyInNavigationSpan && activeSpan && spanJson) {
+      handleExistingNavigationSpan(activeSpan, spanJson, name, source, isLazyRouteContext);
     } else {
-      browser.startBrowserTracingNavigationSpan(client, {
-        name,
-        attributes: {
-          [core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
-          [core.SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
-          [core.SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: `auto.navigation.react.reactrouter_v${version}`,
-        },
-      });
+      createNewNavigationSpan(client, name, source, version, isLazyRouteContext);
     }
   }
 }
 
-/**
- * Strip the basename from a pathname if exists.
- *
- * Vendored and modified from `react-router`
- * https://github.com/remix-run/react-router/blob/462bb712156a3f739d6139a0f14810b76b002df6/packages/router/utils.ts#L1038
- */
-function stripBasenameFromPathname(pathname, basename) {
-  if (!basename || basename === '/') {
-    return pathname;
-  }
-
-  if (!pathname.toLowerCase().startsWith(basename.toLowerCase())) {
-    return pathname;
-  }
-
-  // We want to leave trailing slash behavior in the user's control, so if they
-  // specify a basename with a trailing slash, we should support it
-  const startIndex = basename.endsWith('/') ? basename.length - 1 : basename.length;
-  const nextChar = pathname.charAt(startIndex);
-  if (nextChar && nextChar !== '/') {
-    // pathname does not start with basename/
-    return pathname;
-  }
-
-  return pathname.slice(startIndex) || '/';
-}
-
-function sendIndexPath(pathBuilder, pathname, basename) {
-  const reconstructedPath = pathBuilder || _stripBasename ? stripBasenameFromPathname(pathname, basename) : pathname;
-
-  const formattedPath =
-    // If the path ends with a slash, remove it
-    reconstructedPath[reconstructedPath.length - 1] === '/'
-      ? reconstructedPath.slice(0, -1)
-      : // If the path ends with a wildcard, remove it
-        reconstructedPath.slice(-2) === '/*'
-        ? reconstructedPath.slice(0, -1)
-        : reconstructedPath;
-
-  return [formattedPath, 'route'];
-}
-
-function pathEndsWithWildcard(path) {
-  return path.endsWith('*');
-}
-
-function pathIsWildcardAndHasChildren(path, branch) {
-  return (pathEndsWithWildcard(path) && !!branch.route.children?.length) || false;
-}
-
-function routeIsDescendant(route) {
-  return !!(!route.children && route.element && route.path?.endsWith('/*'));
-}
-
-function locationIsInsideDescendantRoute(location, routes) {
-  const matchedRoutes = _matchRoutes(routes, location) ;
-
-  if (matchedRoutes) {
-    for (const match of matchedRoutes) {
-      if (routeIsDescendant(match.route) && pickSplat(match)) {
-        return true;
-      }
-    }
-  }
-
-  return false;
-}
-
 function addRoutesToAllRoutes(routes) {
   routes.forEach(route => {
     const extractedChildRoutes = getChildRoutesRecursively(route);
@@ -567,125 +573,15 @@ function getChildRoutesRecursively(route, allRoutes = new Set()) {
   return allRoutes;
 }
 
-function pickPath(match) {
-  return trimWildcard(match.route.path || '');
-}
-
-function pickSplat(match) {
-  return match.params['*'] || '';
-}
-
-function trimWildcard(path) {
-  return path[path.length - 1] === '*' ? path.slice(0, -1) : path;
-}
-
-function trimSlash(path) {
-  return path[path.length - 1] === '/' ? path.slice(0, -1) : path;
-}
-
-function prefixWithSlash(path) {
-  return path[0] === '/' ? path : `/${path}`;
-}
-
-function rebuildRoutePathFromAllRoutes(allRoutes, location) {
-  const matchedRoutes = _matchRoutes(allRoutes, location) ;
-
-  if (!matchedRoutes || matchedRoutes.length === 0) {
-    return '';
-  }
-
-  for (const match of matchedRoutes) {
-    if (match.route.path && match.route.path !== '*') {
-      const path = pickPath(match);
-      const strippedPath = stripBasenameFromPathname(location.pathname, prefixWithSlash(match.pathnameBase));
-
-      if (location.pathname === strippedPath) {
-        return trimSlash(strippedPath);
-      }
-
-      return trimSlash(
-        trimSlash(path || '') +
-          prefixWithSlash(
-            rebuildRoutePathFromAllRoutes(
-              allRoutes.filter(route => route !== match.route),
-              {
-                pathname: strippedPath,
-              },
-            ),
-          ),
-      );
-    }
-  }
-
-  return '';
-}
-
-function getNormalizedName(
-  routes,
-  location,
-  branches,
-  basename = '',
-) {
-  if (!routes || routes.length === 0) {
-    return [_stripBasename ? stripBasenameFromPathname(location.pathname, basename) : location.pathname, 'url'];
-  }
-
-  let pathBuilder = '';
-
-  if (branches) {
-    for (const branch of branches) {
-      const route = branch.route;
-      if (route) {
-        // Early return if index route
-        if (route.index) {
-          return sendIndexPath(pathBuilder, branch.pathname, basename);
-        }
-        const path = route.path;
-
-        // If path is not a wildcard and has no child routes, append the path
-        if (path && !pathIsWildcardAndHasChildren(path, branch)) {
-          const newPath = path[0] === '/' || pathBuilder[pathBuilder.length - 1] === '/' ? path : `/${path}`;
-          pathBuilder = trimSlash(pathBuilder) + prefixWithSlash(newPath);
-
-          // If the path matches the current location, return the path
-          if (trimSlash(location.pathname) === trimSlash(basename + branch.pathname)) {
-            if (
-              // If the route defined on the element is something like
-              // <Route path="/stores/:storeId/products/:productId" element={<div>Product</div>} />
-              // We should check against the branch.pathname for the number of / separators
-              getNumberOfUrlSegments(pathBuilder) !== getNumberOfUrlSegments(branch.pathname) &&
-              // We should not count wildcard operators in the url segments calculation
-              !pathEndsWithWildcard(pathBuilder)
-            ) {
-              return [(_stripBasename ? '' : basename) + newPath, 'route'];
-            }
-
-            // if the last character of the pathbuilder is a wildcard and there are children, remove the wildcard
-            if (pathIsWildcardAndHasChildren(pathBuilder, branch)) {
-              pathBuilder = pathBuilder.slice(0, -1);
-            }
-
-            return [(_stripBasename ? '' : basename) + pathBuilder, 'route'];
-          }
-        }
-      }
-    }
-  }
-
-  const fallbackTransactionName = _stripBasename
-    ? stripBasenameFromPathname(location.pathname, basename)
-    : location.pathname || '/';
-
-  return [fallbackTransactionName, 'url'];
-}
-
-function updatePageloadTransaction(
+function updatePageloadTransaction({
   activeRootSpan,
   location,
   routes,
   matches,
   basename,
   allRoutes,
+}
+
 ) {
   const branches = Array.isArray(matches)
     ? matches
@@ -695,15 +591,15 @@ function updatePageloadTransaction(
     let name,
       source = 'url';
 
-    const isInDescendantRoute = locationIsInsideDescendantRoute(location, allRoutes || routes);
+    const isInDescendantRoute = utils.locationIsInsideDescendantRoute(location, allRoutes || routes);
 
     if (isInDescendantRoute) {
-      name = prefixWithSlash(rebuildRoutePathFromAllRoutes(allRoutes || routes, location));
+      name = utils.prefixWithSlash(utils.rebuildRoutePathFromAllRoutes(allRoutes || routes, location));
       source = 'route';
     }
 
     if (!isInDescendantRoute || !name) {
-      [name, source] = getNormalizedName(routes, location, branches, basename);
+      [name, source] = utils.getNormalizedName(routes, location, branches, basename);
     }
 
     core.getCurrentScope().setTransactionName(name || '/');
@@ -742,7 +638,12 @@ function createV6CompatibleWithSentryReactRouterRouting(
         if (isMountRenderPass.current) {
           addRoutesToAllRoutes(routes);
 
-          updatePageloadTransaction(getActiveRootSpan(), location, routes, undefined, undefined, Array.from(allRoutes));
+          updatePageloadTransaction({
+            activeRootSpan: getActiveRootSpan(),
+            location,
+            routes,
+            allRoutes: Array.from(allRoutes),
+          });
           isMountRenderPass.current = false;
         } else {
           handleNavigation({
@@ -786,19 +687,79 @@ function getActiveRootSpan() {
 }
 
 /**
- * Returns number of URL segments of a passed string URL.
+ * Handles updating an existing navigation span
  */
-function getNumberOfUrlSegments(url) {
-  // split at '/' or at '\/' to split regex urls correctly
-  return url.split(/\\?\//).filter(s => s.length > 0 && s !== ',').length;
+function handleExistingNavigationSpan(
+  activeSpan,
+  spanJson,
+  name,
+  source,
+  isLikelyLazyRoute,
+) {
+  // Check if we've already set the name for this span using a custom property
+  const hasBeenNamed = (
+    activeSpan
+
+  )?.__sentry_navigation_name_set__;
+
+  if (!hasBeenNamed) {
+    // This is the first time we're setting the name for this span
+    if (!spanJson.timestamp) {
+      activeSpan?.updateName(name);
+    }
+
+    // For lazy routes, don't mark as named yet so it can be updated later
+    if (!isLikelyLazyRoute) {
+      core.addNonEnumerableProperty(
+        activeSpan ,
+        '__sentry_navigation_name_set__',
+        true,
+      );
+    }
+  }
+
+  // Always set the source attribute to keep it consistent with the current route
+  activeSpan?.setAttribute(core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, source);
+}
+
+/**
+ * Creates a new navigation span
+ */
+function createNewNavigationSpan(
+  client,
+  name,
+  source,
+  version,
+  isLikelyLazyRoute,
+) {
+  const newSpan = browser.startBrowserTracingNavigationSpan(client, {
+    name,
+    attributes: {
+      [core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
+      [core.SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      [core.SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: `auto.navigation.react.reactrouter_v${version}`,
+    },
+  });
+
+  // For lazy routes, don't mark as named yet so it can be updated later when the route loads
+  if (!isLikelyLazyRoute && newSpan) {
+    core.addNonEnumerableProperty(
+      newSpan ,
+      '__sentry_navigation_name_set__',
+      true,
+    );
+  }
 }
 
-exports.checkRouteForAsyncHandler = checkRouteForAsyncHandler;
+exports.addResolvedRoutesToParent = addResolvedRoutesToParent;
+exports.createNewNavigationSpan = createNewNavigationSpan;
 exports.createReactRouterV6CompatibleTracingIntegration = createReactRouterV6CompatibleTracingIntegration;
 exports.createV6CompatibleWithSentryReactRouterRouting = createV6CompatibleWithSentryReactRouterRouting;
 exports.createV6CompatibleWrapCreateBrowserRouter = createV6CompatibleWrapCreateBrowserRouter;
 exports.createV6CompatibleWrapCreateMemoryRouter = createV6CompatibleWrapCreateMemoryRouter;
 exports.createV6CompatibleWrapUseRoutes = createV6CompatibleWrapUseRoutes;
-exports.getNumberOfUrlSegments = getNumberOfUrlSegments;
+exports.handleExistingNavigationSpan = handleExistingNavigationSpan;
 exports.handleNavigation = handleNavigation;
-//# sourceMappingURL=reactrouterv6-compat-utils.js.map
+exports.processResolvedRoutes = processResolvedRoutes;
+exports.updateNavigationSpan = updateNavigationSpan;
+//# sourceMappingURL=instrumentation.js.map