fix(react): Add POP guard for long-running pageload spans

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

@@ -241,6 +241,10 @@ export function createV6CompatibleWrapCreateBrowserRouter<
 
     const activeRootSpan = getActiveRootSpan();
 
+    // Track whether we've completed the initial pageload to properly distinguish
+    // between POPs that occur during pageload vs. legitimate back/forward navigation.
+    let isPageloadComplete = false;
+
     // The initial load ends when `createBrowserRouter` is called.
     // This is the earliest convenient time to update the transaction name.
     // Callbacks to `router.subscribe` are not called for the initial load.
@@ -255,20 +259,23 @@ export function createV6CompatibleWrapCreateBrowserRouter<
     }
 
     router.subscribe((state: RouterState) => {
-      if (state.historyAction === 'PUSH' || state.historyAction === 'POP') {
-        // Wait for the next render if loading an unsettled route
-        if (state.navigation.state !== 'idle') {
-          requestAnimationFrame(() => {
-            handleNavigation({
-              location: state.location,
-              routes,
-              navigationType: state.historyAction,
-              version,
-              basename,
-              allRoutes: Array.from(allRoutes),
-            });
-          });
-        } else {
+      const currentRootSpan = getActiveRootSpan();
+      const isStillInPageload = currentRootSpan && spanToJSON(currentRootSpan).op === 'pageload';
+
+      // Mark pageload as complete once we're no longer in a pageload span
+      if (!isStillInPageload && !isPageloadComplete) {
+        isPageloadComplete = true;
+      }
+
+      const shouldHandleNavigation =
+        state.historyAction === 'PUSH' ||
+        // Only handle POP events after pageload is complete.
+        // This prevents creating navigation spans for POP events during long-running pageloads,
+        // while still allowing legitimate back/forward button navigation to be tracked.
+        (state.historyAction === 'POP' && isPageloadComplete);
+
+      if (shouldHandleNavigation) {
+        const navigationHandler = (): void => {
           handleNavigation({
             location: state.location,
             routes,
@@ -277,6 +284,13 @@ export function createV6CompatibleWrapCreateBrowserRouter<
             basename,
             allRoutes: Array.from(allRoutes),
           });
+        };
+
+        // Wait for the next render if loading an unsettled route
+        if (state.navigation.state !== 'idle') {
+          requestAnimationFrame(navigationHandler);
+        } else {
+          navigationHandler();
         }
       }
     });
@@ -352,17 +366,45 @@ export function createV6CompatibleWrapCreateMemoryRouter<
       updatePageloadTransaction({ activeRootSpan, location, routes, basename, allRoutes: Array.from(allRoutes) });
     }
 
+    // Track whether we've completed the initial pageload to properly distinguish
+    // between POPs that occur during pageload vs. legitimate back/forward navigation.
+    let isPageloadComplete = false;
+
     router.subscribe((state: RouterState) => {
+      const currentRootSpan = getActiveRootSpan();
+      const isStillInPageload = currentRootSpan && spanToJSON(currentRootSpan).op === 'pageload';
+
+      // Mark pageload as complete once we're no longer in a pageload span
+      if (!isStillInPageload && !isPageloadComplete) {
+        isPageloadComplete = true;
+      }
+
       const location = state.location;
-      if (state.historyAction === 'PUSH' || state.historyAction === 'POP') {
-        handleNavigation({
-          location,
-          routes,
-          navigationType: state.historyAction,
-          version,
-          basename,
-          allRoutes: Array.from(allRoutes),
-        });
+      const shouldHandleNavigation =
+        state.historyAction === 'PUSH' ||
+        // Only handle POP events after pageload is complete.
+        // This prevents creating navigation spans for POP events during long-running pageloads,
+        // while still allowing legitimate back/forward button navigation to be tracked.
+        (state.historyAction === 'POP' && isPageloadComplete);
+
+      if (shouldHandleNavigation) {
+        const navigationHandler = (): void => {
+          handleNavigation({
+            location,
+            routes,
+            navigationType: state.historyAction,
+            version,
+            basename,
+            allRoutes: Array.from(allRoutes),
+          });
+        };
+
+        // Wait for the next render if loading an unsettled route
+        if (state.navigation.state !== 'idle') {
+          requestAnimationFrame(navigationHandler);
+        } else {
+          navigationHandler();
+        }
       }
     });