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

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 />,
+ },
+];