@sentry/react 10.36.0 → 10.37.0

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

@@ -1,5 +1,5 @@
 import { browserTracingIntegration, WINDOW, startBrowserTracingPageLoadSpan, startBrowserTracingNavigationSpan } from '@sentry/browser';
-import { SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, SEMANTIC_ATTRIBUTE_SENTRY_OP, SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, debug, spanToJSON, getCurrentScope, getClient, addNonEnumerableProperty } from '@sentry/core';
+import { SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, SEMANTIC_ATTRIBUTE_SENTRY_OP, SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, debug, addNonEnumerableProperty, getCurrentScope, spanToJSON, getClient } from '@sentry/core';
 import * as React from 'react';
 import { DEBUG_BUILD } from '../debug-build.js';
 import { hoistNonReactStatics } from '../hoist-non-react-statics.js';
@@ -33,6 +33,9 @@ const allRoutes = new Set();
 // Tracks lazy route loads to wait before finalizing span names
 const pendingLazyRouteLoads = new WeakMap();
 
+// Tracks deferred lazy route promises that can be resolved when patchRoutesOnNavigation is called
+const deferredLazyRouteResolvers = new WeakMap();
+
 /**
  * Schedules a callback using requestAnimationFrame when available (browser),
  * or falls back to setTimeout for SSR environments (Node.js, createMemoryRouter tests).
@@ -158,6 +161,34 @@ function trackLazyRouteLoad(span, promise) {
   });
 }
 
+/**
+ * Creates a deferred promise for a span that will be resolved when patchRoutesOnNavigation is called.
+ * This ensures that patchedEnd waits for patchRoutesOnNavigation to be called before ending the span.
+ */
+function createDeferredLazyRoutePromise(span) {
+  const deferredPromise = new Promise(resolve => {
+    deferredLazyRouteResolvers.set(span, resolve);
+  });
+
+  trackLazyRouteLoad(span, deferredPromise);
+}
+
+/**
+ * Resolves the deferred lazy route promise for a span.
+ * Called when patchRoutesOnNavigation is invoked.
+ */
+function resolveDeferredLazyRoutePromise(span) {
+  const resolver = deferredLazyRouteResolvers.get(span);
+  if (resolver) {
+    resolver();
+    deferredLazyRouteResolvers.delete(span);
+    // Clear the flag so patchSpanEnd doesn't wait unnecessarily for routes that have already loaded
+    if ((span ).__sentry_may_have_lazy_routes__) {
+      (span ).__sentry_may_have_lazy_routes__ = false;
+    }
+  }
+}
+
 /**
  * Processes resolved routes by adding them to allRoutes and checking for nested async handlers.
  * When capturedSpan is provided, updates that specific span instead of the current active span.
@@ -378,10 +409,30 @@ function createV6CompatibleWrapCreateBrowserRouter
       }
     }
 
-    const wrappedOpts = wrapPatchRoutesOnNavigation(opts);
+    // Capture the active span BEFORE creating the router.
+    // This is important because the span might end (due to idle timeout) before
+    // patchRoutesOnNavigation is called by React Router.
+    const activeRootSpan = getActiveRootSpan();
+
+    // If patchRoutesOnNavigation is provided and we have an active span,
+    // mark the span as having potential lazy routes and create a deferred promise.
+    const hasPatchRoutesOnNavigation =
+      opts && 'patchRoutesOnNavigation' in opts && typeof opts.patchRoutesOnNavigation === 'function';
+    if (hasPatchRoutesOnNavigation && activeRootSpan) {
+      // Mark the span as potentially having lazy routes
+      addNonEnumerableProperty(
+        activeRootSpan ,
+        '__sentry_may_have_lazy_routes__',
+        true,
+      );
+      createDeferredLazyRoutePromise(activeRootSpan);
+    }
+
+    // Pass the captured span to wrapPatchRoutesOnNavigation so it uses the same span
+    // even if the span has ended by the time patchRoutesOnNavigation is called.
+    const wrappedOpts = wrapPatchRoutesOnNavigation(opts, false, activeRootSpan);
     const router = createRouterFunction(routes, wrappedOpts);
     const basename = opts?.basename;
-    const activeRootSpan = getActiveRootSpan();
 
     if (router.state.historyAction === 'POP' && activeRootSpan) {
       updatePageloadTransaction({
@@ -431,7 +482,23 @@ function createV6CompatibleWrapCreateMemoryRouter
       }
     }
 
-    const wrappedOpts = wrapPatchRoutesOnNavigation(opts, true);
+    // Capture the active span BEFORE creating the router (same as browser router)
+    const memoryActiveRootSpanEarly = getActiveRootSpan();
+
+    // If patchRoutesOnNavigation is provided and we have an active span,
+    // mark the span as having potential lazy routes and create a deferred promise.
+    const hasPatchRoutesOnNavigation =
+      opts && 'patchRoutesOnNavigation' in opts && typeof opts.patchRoutesOnNavigation === 'function';
+    if (hasPatchRoutesOnNavigation && memoryActiveRootSpanEarly) {
+      addNonEnumerableProperty(
+        memoryActiveRootSpanEarly ,
+        '__sentry_may_have_lazy_routes__',
+        true,
+      );
+      createDeferredLazyRoutePromise(memoryActiveRootSpanEarly);
+    }
+
+    const wrappedOpts = wrapPatchRoutesOnNavigation(opts, true, memoryActiveRootSpanEarly);
 
     const router = createRouterFunction(routes, wrappedOpts);
     const basename = opts?.basename;
@@ -625,9 +692,36 @@ function createV6CompatibleWrapUseRoutes(origUseRoutes, version) {
   };
 }
 
+/**
+ * Helper to update the current span (navigation or pageload) with lazy-loaded route information.
+ * Reduces code duplication in patchRoutesOnNavigation wrapper.
+ */
+function updateSpanWithLazyRoutes(pathname, forceUpdate) {
+  const currentActiveRootSpan = getActiveRootSpan();
+  if (!currentActiveRootSpan) {
+    return;
+  }
+
+  const spanOp = (spanToJSON(currentActiveRootSpan) ).op;
+  const location = { pathname, search: '', hash: '', state: null, key: 'default' };
+  const routesArray = Array.from(allRoutes);
+
+  if (spanOp === 'navigation') {
+    updateNavigationSpan(currentActiveRootSpan, location, routesArray, forceUpdate, _matchRoutes);
+  } else if (spanOp === 'pageload') {
+    updatePageloadTransaction({
+      activeRootSpan: currentActiveRootSpan,
+      location,
+      routes: routesArray,
+      allRoutes: routesArray,
+    });
+  }
+}
+
 function wrapPatchRoutesOnNavigation(
   opts,
   isMemoryRouter = false,
+  capturedSpan,
 ) {
   if (!opts || !('patchRoutesOnNavigation' in opts) || typeof opts.patchRoutesOnNavigation !== 'function') {
     return opts || {};
@@ -640,29 +734,47 @@ function wrapPatchRoutesOnNavigation(
       // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
       const targetPath = (args )?.path;
 
-      const activeRootSpan = getActiveRootSpan();
+      // Use current active span if available, otherwise fall back to captured span (from router creation time).
+      // This ensures navigation spans use their own span (not the stale pageload span), while still
+      // supporting pageload spans that may have ended before patchRoutesOnNavigation is called.
+      const activeRootSpan = getActiveRootSpan() ?? capturedSpan;
 
       if (!isMemoryRouter) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
         const originalPatch = (args )?.patch;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
+        const matches = (args )?.matches ;
         if (originalPatch) {
           // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
           (args ).patch = (routeId, children) => {
             addRoutesToAllRoutes(children);
-            const currentActiveRootSpan = getActiveRootSpan();
+
+            // Find the parent route from matches and attach children to it in allRoutes.
+            // React Router's patch attaches children to its internal route copies, but we need
+            // to update the route objects in our allRoutes Set for proper route matching.
+            if (matches && matches.length > 0) {
+              const leafMatch = matches[matches.length - 1];
+              const leafRoute = leafMatch?.route;
+              if (leafRoute) {
+                // Find the matching route in allRoutes by id, reference, or path
+                const matchingRoute = Array.from(allRoutes).find(route => {
+                  const idMatches = route.id !== undefined && route.id === routeId;
+                  const referenceMatches = route === leafRoute;
+                  const pathMatches =
+                    route.path !== undefined && leafRoute.path !== undefined && route.path === leafRoute.path;
+
+                  return idMatches || referenceMatches || pathMatches;
+                });
+
+                if (matchingRoute) {
+                  addResolvedRoutesToParent(children, matchingRoute);
+                }
+              }
+            }
+
             // Only update if we have a valid targetPath (patchRoutesOnNavigation can be called without path)
-            if (
-              targetPath &&
-              currentActiveRootSpan &&
-              (spanToJSON(currentActiveRootSpan) ).op === 'navigation'
-            ) {
-              updateNavigationSpan(
-                currentActiveRootSpan,
-                { pathname: targetPath, search: '', hash: '', state: null, key: 'default' },
-                Array.from(allRoutes),
-                true,
-                _matchRoutes,
-              );
+            if (targetPath) {
+              updateSpanWithLazyRoutes(targetPath, true);
             }
             return originalPatch(routeId, children);
           };
@@ -677,21 +789,16 @@ function wrapPatchRoutesOnNavigation(
           result = await originalPatchRoutes(args);
         } finally {
           clearNavigationContext(contextToken);
+          // Resolve the deferred promise now that patchRoutesOnNavigation has completed.
+          // This ensures patchedEnd has waited long enough for the lazy routes to load.
+          if (activeRootSpan) {
+            resolveDeferredLazyRoutePromise(activeRootSpan);
+          }
         }
 
-        const currentActiveRootSpan = getActiveRootSpan();
-        if (currentActiveRootSpan && (spanToJSON(currentActiveRootSpan) ).op === 'navigation') {
-          const pathname = isMemoryRouter ? targetPath : targetPath || WINDOW.location?.pathname;
-
-          if (pathname) {
-            updateNavigationSpan(
-              currentActiveRootSpan,
-              { pathname, search: '', hash: '', state: null, key: 'default' },
-              Array.from(allRoutes),
-              false,
-              _matchRoutes,
-            );
-          }
+        const pathname = isMemoryRouter ? targetPath : targetPath || WINDOW.location?.pathname;
+        if (pathname) {
+          updateSpanWithLazyRoutes(pathname, false);
         }
 
         return result;
@@ -806,7 +913,7 @@ function handleNavigation(opts
         pathname: location.pathname,
         locationKey,
       });
-      patchSpanEnd(navigationSpan, location, routes, basename, allRoutes, 'navigation');
+      patchSpanEnd(navigationSpan, location, routes, basename, 'navigation');
     } else {
       // If no span was created, remove the placeholder
       activeNavigationSpans.delete(client);
@@ -873,8 +980,13 @@ function updatePageloadTransaction({
       activeRootSpan.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, source);
 
       // Patch span.end() to ensure we update the name one last time before the span is sent
-      patchSpanEnd(activeRootSpan, location, routes, basename, allRoutes, 'pageload');
+      patchSpanEnd(activeRootSpan, location, routes, basename, 'pageload');
     }
+  } else if (activeRootSpan) {
+    // Even if branches is null (can happen when lazy routes haven't loaded yet),
+    // we still need to patch span.end() so that when lazy routes load and the span ends,
+    // we can update the transaction name correctly.
+    patchSpanEnd(activeRootSpan, location, routes, basename, 'pageload');
   }
 }
 
@@ -969,7 +1081,6 @@ function patchSpanEnd(
   location,
   routes,
   basename,
-  _allRoutes,
   spanType,
 ) {
   const patchedPropertyName = `__sentry_${spanType}_end_patched__` ;
@@ -979,8 +1090,7 @@ function patchSpanEnd(
     return;
   }
 
-  // Use the passed route context, or fall back to global Set
-  const allRoutesSet = _allRoutes ? new Set(_allRoutes) : allRoutes;
+  // Uses global allRoutes to access lazy-loaded routes added after this function was called.
 
   const originalEnd = span.end.bind(span);
   let endCalled = false;
@@ -1011,29 +1121,40 @@ function patchSpanEnd(
     };
 
     const pendingPromises = pendingLazyRouteLoads.get(span);
+    const mayHaveLazyRoutes = (span ).__sentry_may_have_lazy_routes__;
+
     // Wait for lazy routes if:
-    // 1. There are pending promises AND
+    // 1. (There are pending promises OR the span was marked as potentially having lazy routes) AND
     // 2. Current name exists AND
     // 3. Either the name has a wildcard OR the source is not 'route' (URL-based names)
+    const hasPendingOrMayHaveLazyRoutes = (pendingPromises && pendingPromises.size > 0) || mayHaveLazyRoutes;
     const shouldWaitForLazyRoutes =
-      pendingPromises &&
-      pendingPromises.size > 0 &&
+      hasPendingOrMayHaveLazyRoutes &&
       currentName &&
       (transactionNameHasWildcard(currentName) || currentSource !== 'route');
 
     if (shouldWaitForLazyRoutes) {
       if (_lazyRouteTimeout === 0) {
-        tryUpdateSpanNameBeforeEnd(span, spanJson, currentName, location, routes, basename, spanType, allRoutesSet);
+        tryUpdateSpanNameBeforeEnd(span, spanJson, currentName, location, routes, basename, spanType, allRoutes);
         cleanupNavigationSpan();
         originalEnd(endTimestamp);
         return;
       }
 
-      const allSettled = Promise.allSettled(pendingPromises).then(() => {});
-      const waitPromise =
-        _lazyRouteTimeout === Infinity
-          ? allSettled
-          : Promise.race([allSettled, new Promise(r => setTimeout(r, _lazyRouteTimeout))]);
+      // If we have pending promises, wait for them. Otherwise, just wait for the timeout.
+      // This handles the case where we know lazy routes might load but patchRoutesOnNavigation
+      // hasn't been called yet.
+      const timeoutPromise = new Promise(r => setTimeout(r, _lazyRouteTimeout));
+      let waitPromise;
+
+      if (pendingPromises && pendingPromises.size > 0) {
+        const allSettled = Promise.allSettled(pendingPromises).then(() => {});
+        waitPromise = _lazyRouteTimeout === Infinity ? allSettled : Promise.race([allSettled, timeoutPromise]);
+      } else {
+        // No pending promises yet, but we know lazy routes might load
+        // Wait for the timeout to give React Router time to call patchRoutesOnNavigation
+        waitPromise = timeoutPromise;
+      }
 
       waitPromise
         .then(() => {
@@ -1046,7 +1167,7 @@ function patchSpanEnd(
             routes,
             basename,
             spanType,
-            allRoutesSet,
+            allRoutes,
           );
           cleanupNavigationSpan();
           originalEnd(endTimestamp);
@@ -1058,7 +1179,7 @@ function patchSpanEnd(
       return;
     }
 
-    tryUpdateSpanNameBeforeEnd(span, spanJson, currentName, location, routes, basename, spanType, allRoutesSet);
+    tryUpdateSpanNameBeforeEnd(span, spanJson, currentName, location, routes, basename, spanType, allRoutes);
     cleanupNavigationSpan();
     originalEnd(endTimestamp);
   };