fix(react): Add transaction name guards for rapid lazy-route navigations.

Author: onurtemizkan

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/index.tsx

@@ -126,6 +126,14 @@ const router = sentryCreateBrowserRouter(
         lazyChildren: () => import('./pages/deep/Level1Routes').then(module => module.level2Routes),
       },
     },
+    {
+      path: '/slow-fetch',
+      handle: {
+        // This lazy handler takes 500ms due to the top-level await in SlowFetchLazyRoutes.tsx
+        // It also makes a fetch request during loading which creates a span
+        lazyChildren: () => import('./pages/SlowFetchLazyRoutes').then(module => module.slowFetchRoutes),
+      },
+    },
   ],
   {
     async patchRoutesOnNavigation({ matches, patch }: Parameters<PatchRoutesOnNavigationFunction>[0]) {

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/pages/DelayedLazyRoute.tsx

@@ -23,6 +23,14 @@ const DelayedLazyRoute = () => {
           Back Home
         </Link>
         <br />
+        <Link to="/slow-fetch/222" id="delayed-lazy-to-slow-fetch">
+          Go to Slow Fetch Route (500ms)
+        </Link>
+        <br />
+        <Link to="/another-lazy/sub" id="delayed-lazy-to-another-lazy">
+          Go to Another Lazy Route
+        </Link>
+        <br />
         <Link to={`/delayed-lazy/${id}?view=detailed`} id="link-to-query-view-detailed">
           View: Detailed (query param)
         </Link>

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/pages/Index.tsx

@@ -31,6 +31,10 @@ const Index = () => {
       <Link to="/deep/level2/level3/123" id="navigation-to-deep">
         Navigate to Deep Nested Route (3 levels, 900ms total)
       </Link>
+      <br />
+      <Link to="/slow-fetch/123" id="navigation-to-slow-fetch">
+        Navigate to Slow Fetch Route (500ms delay with fetch)
+      </Link>
     </>
   );
 };

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/pages/SlowFetchLazyRoutes.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Link, useParams } from 'react-router-dom';
+
+// Simulate a slow async fetch during lazy route loading
+// This delay happens before the module exports, simulating network latency
+const fetchPromise = fetch('/api/slow-data')
+  .then(res => res.json())
+  .catch(() => ({ message: 'fallback data' }));
+
+// Add a 500ms delay to simulate slow lazy loading
+await new Promise(resolve => setTimeout(resolve, 500));
+
+// Component that displays the lazy-loaded data
+const SlowFetchComponent = () => {
+  const { id } = useParams<{ id: string }>();
+  const [data, setData] = React.useState<{ message: string } | null>(null);
+
+  React.useEffect(() => {
+    fetchPromise.then(setData);
+  }, []);
+
+  return (
+    <div id="slow-fetch-content">
+      <h1>Slow Fetch Route</h1>
+      <p id="slow-fetch-id">ID: {id}</p>
+      <p id="slow-fetch-data">Data: {data?.message || 'loading...'}</p>
+      <Link to="/" id="slow-fetch-home-link">
+        Go Home
+      </Link>
+      <Link to="/another-lazy/sub/999/888" id="slow-fetch-to-another">
+        Go to Another Lazy Route
+      </Link>
+    </div>
+  );
+};
+
+export const slowFetchRoutes = [
+  {
+    path: ':id',
+    element: <SlowFetchComponent />,
+  },
+];