@sentry/react 10.36.0 → 10.38.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, spanToJSON, getCurrentScope, 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;
@@ -624,10 +691,10 @@ function createV6CompatibleWrapUseRoutes(origUseRoutes, version) {
     return React.createElement(SentryRoutes, { routes: routes, locationArg: locationArg,} );
   };
 }
-
 function wrapPatchRoutesOnNavigation(
   opts,
   isMemoryRouter = false,
+  capturedSpan,
 ) {
   if (!opts || !('patchRoutesOnNavigation' in opts) || typeof opts.patchRoutesOnNavigation !== 'function') {
     return opts || {};
@@ -640,24 +707,58 @@ 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();
-            // Only update if we have a valid targetPath (patchRoutesOnNavigation can be called without path)
+
+            // 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);
+                }
+              }
+            }
+
+            // Use the captured activeRootSpan instead of getActiveRootSpan() to avoid race conditions
+            // where user navigates away during lazy route loading and we'd update the wrong span
+            const spanJson = activeRootSpan ? spanToJSON(activeRootSpan) : undefined;
+            // Only update if we have a valid targetPath (patchRoutesOnNavigation can be called without path),
+            // the captured span exists, hasn't ended, and is a navigation span
             if (
               targetPath &&
-              currentActiveRootSpan &&
-              (spanToJSON(currentActiveRootSpan) ).op === 'navigation'
+              activeRootSpan &&
+              spanJson &&
+              !spanJson.timestamp && // Span hasn't ended yet
+              spanJson.op === 'navigation'
             ) {
               updateNavigationSpan(
-                currentActiveRootSpan,
+                activeRootSpan,
                 { pathname: targetPath, search: '', hash: '', state: null, key: 'default' },
                 Array.from(allRoutes),
                 true,
@@ -677,15 +778,29 @@ 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;
+        // Use the captured activeRootSpan instead of getActiveRootSpan() to avoid race conditions
+        // where user navigates away during lazy route loading and we'd update the wrong span
+        const spanJson = activeRootSpan ? spanToJSON(activeRootSpan) : undefined;
+        if (
+          activeRootSpan &&
+          spanJson &&
+          !spanJson.timestamp && // Span hasn't ended yet
+          spanJson.op === 'navigation'
+        ) {
+          // Use targetPath consistently - don't fall back to WINDOW.location which may have changed
+          // if the user navigated away during async loading
+          const pathname = targetPath;
 
           if (pathname) {
             updateNavigationSpan(
-              currentActiveRootSpan,
+              activeRootSpan,
               { pathname, search: '', hash: '', state: null, key: 'default' },
               Array.from(allRoutes),
               false,
@@ -806,7 +921,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 +988,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 +1089,6 @@ function patchSpanEnd(
   location,
   routes,
   basename,
-  _allRoutes,
   spanType,
 ) {
   const patchedPropertyName = `__sentry_${spanType}_end_patched__` ;
@@ -979,8 +1098,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 +1129,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 +1175,7 @@ function patchSpanEnd(
             routes,
             basename,
             spanType,
-            allRoutesSet,
+            allRoutes,
           );
           cleanupNavigationSpan();
           originalEnd(endTimestamp);
@@ -1058,7 +1187,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);
   };