Introduce isLikeLazyRouteContext

Author: onurtemizkan

packages/react/src/reactrouter-compat-utils/index.ts

@@ -16,15 +16,16 @@ export {
 
 // Utility exports
 export {
+  resolveRouteNameAndSource,
+  getNormalizedName,
   initializeRouterUtils,
+  isLikelyLazyRouteContext,
+  locationIsInsideDescendantRoute,
   prefixWithSlash,
   rebuildRoutePathFromAllRoutes,
-  locationIsInsideDescendantRoute,
-  getNormalizedName,
-  getNumberOfUrlSegments,
-  resolveRouteNameAndSource,
   pathEndsWithWildcard,
   pathIsWildcardAndHasChildren,
+  getNumberOfUrlSegments,
 } from './utils';
 
 // Lazy route exports

packages/react/src/reactrouter-compat-utils/instrumentation.tsx

@@ -44,6 +44,7 @@ import { checkRouteForAsyncHandler } from './lazy-routes';
 import {
   getNormalizedName,
   initializeRouterUtils,
+  isLikelyLazyRouteContext,
   locationIsInsideDescendantRoute,
   prefixWithSlash,
   rebuildRoutePathFromAllRoutes,
@@ -538,7 +539,7 @@ function wrapPatchRoutesOnNavigation(
                   key: 'default',
                 },
                 Array.from(allRoutes),
-                true,
+                true, // forceUpdate = true since we're loading lazy routes
                 _matchRoutes,
               );
             }
@@ -566,7 +567,7 @@ function wrapPatchRoutesOnNavigation(
               key: 'default',
             },
             Array.from(allRoutes),
-            false,
+            false, // forceUpdate = false since this is after lazy routes are loaded
             _matchRoutes,
           );
         }
@@ -603,15 +604,18 @@ export function handleNavigation(opts: {
       basename,
     );
 
+    // Check if this might be a lazy route context
+    const isLazyRouteContext = isLikelyLazyRouteContext(allRoutes || routes, location);
+
     const activeSpan = getActiveSpan();
     const spanJson = activeSpan && spanToJSON(activeSpan);
     const isAlreadyInNavigationSpan = spanJson?.op === 'navigation';
 
     // Cross usage can result in multiple navigation spans being created without this check
     if (isAlreadyInNavigationSpan && activeSpan && spanJson) {
-      handleExistingNavigationSpan(activeSpan, spanJson, name, source, false);
+      handleExistingNavigationSpan(activeSpan, spanJson, name, source, isLazyRouteContext);
     } else {
-      createNewNavigationSpan(client, name, source, version, false);
+      createNewNavigationSpan(client, name, source, version, isLazyRouteContext);
     }
   }
 }
@@ -783,6 +787,7 @@ export function handleExistingNavigationSpan(
     }
   }
 
+  // Always set the source attribute to keep it consistent with the current route
   activeSpan?.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, source);
 }
 

packages/react/src/reactrouter-compat-utils/utils.ts

@@ -14,6 +14,37 @@ export function initializeRouterUtils(matchRoutes: MatchRoutes, stripBasename: b
   _stripBasename = stripBasename;
 }
 
+/**
+ * Checks if the given routes or location context suggests this might be a lazy route scenario.
+ * This helps determine if we should delay marking navigation spans as "named" to allow for updates
+ * when lazy routes are loaded.
+ */
+export function isLikelyLazyRouteContext(routes: RouteObject[], location: Location): boolean {
+  // Check if any route in the current match has lazy properties
+  const hasLazyRoute = routes.some(route => {
+    return (
+      // React Router lazy() route
+      route.lazy ||
+      // Route with async handlers that might load child routes
+      (route.handle &&
+        typeof route.handle === 'object' &&
+        Object.values(route.handle).some(handler => typeof handler === 'function'))
+    );
+  });
+
+  if (hasLazyRoute) {
+    return true;
+  }
+
+  // Check if current route is unmatched, which might indicate a lazy route that hasn't loaded yet
+  const currentMatches = _matchRoutes(routes, location);
+  if (!currentMatches || currentMatches.length === 0) {
+    return true;
+  }
+
+  return false;
+}
+
 // Helper functions
 function pickPath(match: RouteMatch): string {
   return trimWildcard(match.route.path || '');