Add E2E tests

Author: onurtemizkan

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

@@ -55,6 +55,12 @@ const router = sentryCreateBrowserRouter(
         lazyChildren: () => import('./pages/AnotherLazyRoutes').then(module => module.anotherNestedRoutes),
       },
     },
+    {
+      path: '/long-running',
+      handle: {
+        lazyChildren: () => import('./pages/LongRunningLazyRoutes').then(module => module.longRunningNestedRoutes),
+      },
+    },
     {
       path: '/static',
       element: <>Hello World</>,

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

@@ -15,6 +15,10 @@ const Index = () => {
       <Link to="/another-lazy/sub/555/666" id="navigation-to-another-deep">
         Navigate to Another Deep Lazy Route
       </Link>
+      <br />
+      <Link to="/long-running/slow/12345" id="navigation-to-long-running">
+        Navigate to Long Running Lazy Route
+      </Link>
     </>
   );
 };

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

@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from 'react';
+import { Link, useParams } from 'react-router-dom';
+
+// Component that simulates a long-running component load
+//  This is used to test the POP guard during long-running pageloads
+const SlowLoadingComponent = () => {
+  const { id } = useParams<{ id: string }>();
+  const [data, setData] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    // Simulate a component that takes time to initialize
+    // This extends the pageload duration to create a window where POP events might occur
+    setTimeout(() => {
+      setData(`Data loaded for ID: ${id}`);
+      setIsLoading(false);
+    }, 1000);
+  }, [id]);
+
+  if (isLoading) {
+    return <div id="loading-indicator">Loading...</div>;
+  }
+
+  return (
+    <div id="slow-loading-content">
+      <div>{data}</div>
+      <Link to="/" id="navigate-home">
+        Go Home
+      </Link>
+    </div>
+  );
+};
+
+export const longRunningNestedRoutes = [
+  {
+    path: 'slow',
+    children: [
+      {
+        path: ':id',
+        element: <SlowLoadingComponent />,
+        loader: async () => {
+          // Simulate slow data fetching in the loader
+          await new Promise(resolve => setTimeout(resolve, 2000));
+          return null;
+        },
+      },
+    ],
+  },
+];

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/tests/transactions.test.ts

@@ -294,3 +294,86 @@ test('Does not send any duplicate navigation transaction names browsing between
     '/lazy/inner/:id/:anotherId',
   ]);
 });
+
+test('Does not create premature navigation transaction during long-running lazy route pageload', async ({ page }) => {
+  const navigationPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+    return (
+      !!transactionEvent?.transaction &&
+      transactionEvent.contexts?.trace?.op === 'navigation' &&
+      transactionEvent.transaction.includes('long-running')
+    );
+  });
+
+  const pageloadPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+    return (
+      !!transactionEvent?.transaction &&
+      transactionEvent.contexts?.trace?.op === 'pageload' &&
+      transactionEvent.transaction === '/long-running/slow/:id'
+    );
+  });
+
+  await page.goto('/long-running/slow/12345');
+
+  const pageloadEvent = await pageloadPromise;
+
+  expect(pageloadEvent.transaction).toBe('/long-running/slow/:id');
+  expect(pageloadEvent.contexts?.trace?.op).toBe('pageload');
+
+  const slowLoadingContent = page.locator('id=slow-loading-content');
+  await expect(slowLoadingContent).toBeVisible({ timeout: 5000 });
+
+  const result = await Promise.race([
+    navigationPromise.then(() => 'navigation'),
+    new Promise<'timeout'>(resolve => setTimeout(() => resolve('timeout'), 2000)),
+  ]);
+
+  // Should timeout, meaning no unwanted navigation transaction was created
+  expect(result).toBe('timeout');
+});
+
+test('Allows legitimate POP navigation (back/forward) after pageload completes', async ({ page }) => {
+  await page.goto('/');
+
+  const navigationToLongRunning = page.locator('id=navigation-to-long-running');
+  await expect(navigationToLongRunning).toBeVisible();
+
+  const firstNavigationPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+    return (
+      !!transactionEvent?.transaction &&
+      transactionEvent.contexts?.trace?.op === 'navigation' &&
+      transactionEvent.transaction === '/long-running/slow/:id'
+    );
+  });
+
+  await navigationToLongRunning.click();
+
+  const slowLoadingContent = page.locator('id=slow-loading-content');
+  await expect(slowLoadingContent).toBeVisible({ timeout: 5000 });
+
+  const firstNavigationEvent = await firstNavigationPromise;
+
+  expect(firstNavigationEvent.transaction).toBe('/long-running/slow/:id');
+  expect(firstNavigationEvent.contexts?.trace?.op).toBe('navigation');
+
+  // Now navigate back using browser back button (POP event)
+  // This should create a navigation transaction since pageload is complete
+  const backNavigationPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+    return (
+      !!transactionEvent?.transaction &&
+      transactionEvent.contexts?.trace?.op === 'navigation' &&
+      transactionEvent.transaction === '/'
+    );
+  });
+
+  await page.goBack();
+
+  // Verify we're back at home
+  const homeLink = page.locator('id=navigation');
+  await expect(homeLink).toBeVisible();
+
+  const backNavigationEvent = await backNavigationPromise;
+
+  // Validate that the back navigation (POP) was properly tracked
+  expect(backNavigationEvent.transaction).toBe('/');
+  expect(backNavigationEvent.contexts?.trace?.op).toBe('navigation');
+});