fix(react-router): Correct url attributes for history and relative navigations

dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/tests/performance/navigation.client.test.ts

@@ -10,8 +10,12 @@ test.describe('client - navigation performance', () => {
       );
     });
 
+    const pageloadTxPromise = waitForTransaction(APP_NAME, async transactionEvent => {
+      return transactionEvent.transaction === '/performance' && transactionEvent.contexts?.trace?.op === 'pageload';
+    });
+
     await page.goto(`/performance`); // pageload
-    await page.waitForTimeout(1000); // give it a sec before navigation
+    await pageloadTxPromise;
     await page.getByRole('link', { name: 'SSR Page' }).click(); // navigation
 
     const transaction = await navigationPromise;
@@ -67,8 +71,12 @@ test.describe('client - navigation performance', () => {
       );
     });
 
+    const pageloadTxPromise = waitForTransaction(APP_NAME, async transactionEvent => {
+      return transactionEvent.transaction === '/performance' && transactionEvent.contexts?.trace?.op === 'pageload';
+    });
+
     await page.goto(`/performance`); // pageload
-    await page.waitForTimeout(1000); // give it a sec before navigation
+    await pageloadTxPromise;
     await page.getByRole('link', { name: 'With Param Page' }).click(); // navigation
 
     const transaction = await txPromise;

dev-packages/e2e-tests/test-applications/react-router-7-framework-instrumentation/app/routes/performance/ssr.tsx

@@ -1,12 +1,17 @@
-import { Link } from 'react-router';
+import { Link, useNavigate } from 'react-router';
 
 export default function SsrPage() {
+  const navigate = useNavigate();
+
   return (
     <div>
       <h1>SSR Page</h1>
       <nav>
         <Link to="/performance">Back to Performance</Link>
       </nav>
+      <button type="button" onClick={() => navigate(-1)}>
+        History Back Navigate
+      </button>
     </div>
   );
 }

dev-packages/e2e-tests/test-applications/react-router-7-framework-instrumentation/tests/performance/navigation.client.test.ts

@@ -14,9 +14,12 @@ test.describe('client - hybrid navigation (instrumentation API span + legacy par
   test('should create navigation span via instrumentation API and parameterize via legacy subscribe', async ({
     page,
   }) => {
-    // First load the performance page
+    const pageloadTxPromise = waitForTransaction(APP_NAME, async transactionEvent => {
+      return transactionEvent.transaction === '/performance' && transactionEvent.contexts?.trace?.op === 'pageload';
+    });
+
     await page.goto(`/performance`);
-    await page.waitForTimeout(1000);
+    await pageloadTxPromise;
 
     const navigationTxPromise = waitForTransaction(APP_NAME, async transactionEvent => {
       return (
@@ -92,8 +95,12 @@ test.describe('client - hybrid navigation (instrumentation API span + legacy par
   });
 
   test('should parameterize navigation transaction for dynamic routes', async ({ page }) => {
+    const pageloadTxPromise = waitForTransaction(APP_NAME, async transactionEvent => {
+      return transactionEvent.transaction === '/performance' && transactionEvent.contexts?.trace?.op === 'pageload';
+    });
+
     await page.goto(`/performance`);
-    await page.waitForTimeout(1000);
+    await pageloadTxPromise;
 
     const navigationTxPromise = waitForTransaction(APP_NAME, async transactionEvent => {
       return (
@@ -126,8 +133,12 @@ test.describe('client - hybrid navigation (instrumentation API span + legacy par
   });
 
   test('should send multiple navigation transactions in sequence', async ({ page }) => {
+    const pageloadTxPromise = waitForTransaction(APP_NAME, async transactionEvent => {
+      return transactionEvent.transaction === '/performance' && transactionEvent.contexts?.trace?.op === 'pageload';
+    });
+
     await page.goto(`/performance`);
-    await page.waitForTimeout(1000);
+    await pageloadTxPromise;
 
     // First navigation: /performance -> /performance/ssr
     const firstNavPromise = waitForTransaction(APP_NAME, async transactionEvent => {
@@ -171,6 +182,54 @@ test.describe('client - hybrid navigation (instrumentation API span + legacy par
       type: 'transaction',
     });
   });
+
+  test('should create navigation transaction for navigate(-1) with correct url attributes', async ({ page }) => {
+    const pageloadTxPromise = waitForTransaction(APP_NAME, async transactionEvent => {
+      return transactionEvent.transaction === '/performance' && transactionEvent.contexts?.trace?.op === 'pageload';
+    });
+
+    await page.goto(`/performance`);
+    await pageloadTxPromise;
+
+    const forwardNavPromise = waitForTransaction(APP_NAME, async transactionEvent => {
+      return (
+        transactionEvent.transaction === '/performance/ssr' && transactionEvent.contexts?.trace?.op === 'navigation'
+      );
+    });
+
+    await page.getByRole('link', { name: 'SSR Page' }).click();
+    await forwardNavPromise;
+
+    const backNavPromise = waitForTransaction(APP_NAME, async transactionEvent => {
+      return transactionEvent.transaction === '/performance' && transactionEvent.contexts?.trace?.op === 'navigation';
+    });
+
+    await page.getByRole('button', { name: 'History Back Navigate' }).click();
+
+    const transaction = await backNavPromise;
+
+    expect(transaction).toMatchObject({
+      contexts: {
+        trace: {
+          op: 'navigation',
+          origin: 'auto.navigation.react_router.instrumentation_api',
+          data: {
+            'sentry.source': 'route',
+            'sentry.op': 'navigation',
+            'sentry.origin': 'auto.navigation.react_router.instrumentation_api',
+            'navigation.type': 'router.back',
+            'url.template': '/performance',
+            // react-router-serve 301-redirects the bare index route to a trailing slash
+            'url.path': '/performance/',
+            'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/performance\/$/),
+          },
+        },
+      },
+      transaction: '/performance',
+      type: 'transaction',
+      transaction_info: { source: 'route' },
+    });
+  });
 });
 
 // Tests for instrumentation API navigation - expected to fail until React Router fixes upstream

dev-packages/e2e-tests/test-applications/react-router-7-framework-node-20-18/tests/performance/navigation.client.test.ts

@@ -10,8 +10,12 @@ test.describe('client - navigation performance', () => {
       );
     });
 
+    const pageloadTxPromise = waitForTransaction(APP_NAME, async transactionEvent => {
+      return transactionEvent.transaction === '/performance' && transactionEvent.contexts?.trace?.op === 'pageload';
+    });
+
     await page.goto(`/performance`); // pageload
-    await page.waitForTimeout(1000); // give it a sec before navigation
+    await pageloadTxPromise;
     await page.getByRole('link', { name: 'SSR Page' }).click(); // navigation
 
     const transaction = await navigationPromise;
@@ -67,8 +71,12 @@ test.describe('client - navigation performance', () => {
       );
     });
 
+    const pageloadTxPromise = waitForTransaction(APP_NAME, async transactionEvent => {
+      return transactionEvent.transaction === '/performance' && transactionEvent.contexts?.trace?.op === 'pageload';
+    });
+
     await page.goto(`/performance`); // pageload
-    await page.waitForTimeout(1000); // give it a sec before navigation
+    await pageloadTxPromise;
     await page.getByRole('link', { name: 'With Param Page' }).click(); // navigation
 
     const transaction = await txPromise;

dev-packages/e2e-tests/test-applications/react-router-7-framework-spa-node-20-18/tests/performance/navigation.client.test.ts

@@ -11,8 +11,12 @@ test.describe('client - navigation performance', () => {
       );
     });
 
+    const pageloadTxPromise = waitForTransaction(APP_NAME, async transactionEvent => {
+      return transactionEvent.transaction === '/performance' && transactionEvent.contexts?.trace?.op === 'pageload';
+    });
+
     await page.goto(`/performance`); // pageload
-    await page.waitForTimeout(1000); // give it a sec before navigation
+    await pageloadTxPromise;
     await page.getByRole('link', { name: 'With Param Page' }).click(); // navigation
 
     const transaction = await txPromise;

dev-packages/e2e-tests/test-applications/react-router-7-framework-spa/tests/performance/navigation.client.test.ts

@@ -11,8 +11,12 @@ test.describe('client - navigation performance', () => {
       );
     });
 
+    const pageloadTxPromise = waitForTransaction(APP_NAME, async transactionEvent => {
+      return transactionEvent.transaction === '/performance' && transactionEvent.contexts?.trace?.op === 'pageload';
+    });
+
     await page.goto(`/performance`); // pageload
-    await page.waitForTimeout(1000); // give it a sec before navigation
+    await pageloadTxPromise;
     await page.getByRole('link', { name: 'With Param Page' }).click(); // navigation
 
     const transaction = await txPromise;

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/ssr.tsx

@@ -1,7 +1,14 @@
+import { useNavigate } from 'react-router';
+
 export default function SsrPage() {
+  const navigate = useNavigate();
+
   return (
     <div>
       <h1>SSR Page</h1>
+      <button type="button" onClick={() => navigate(-1)}>
+        History Back Navigate
+      </button>
     </div>
   );
 }

dev-packages/e2e-tests/test-applications/react-router-7-framework/tests/performance/navigation.client.test.ts

@@ -10,8 +10,12 @@ test.describe('client - navigation performance', () => {
       );
     });
 
+    const pageloadTxPromise = waitForTransaction(APP_NAME, async transactionEvent => {
+      return transactionEvent.transaction === '/performance' && transactionEvent.contexts?.trace?.op === 'pageload';
+    });
+
     await page.goto(`/performance`); // pageload
-    await page.waitForTimeout(1000); // give it a sec before navigation
+    await pageloadTxPromise;
     await page.getByRole('link', { name: 'SSR Page' }).click(); // navigation
 
     const transaction = await navigationPromise;
@@ -67,8 +71,12 @@ test.describe('client - navigation performance', () => {
       );
     });
 
+    const pageloadTxPromise = waitForTransaction(APP_NAME, async transactionEvent => {
+      return transactionEvent.transaction === '/performance' && transactionEvent.contexts?.trace?.op === 'pageload';
+    });
+
     await page.goto(`/performance`); // pageload
-    await page.waitForTimeout(1000); // give it a sec before navigation
+    await pageloadTxPromise;
     await page.getByRole('link', { name: 'Object Navigate' }).click(); // navigation with object to
 
     const transaction = await txPromise;
@@ -97,8 +105,12 @@ test.describe('client - navigation performance', () => {
       return transactionEvent.transaction === '/performance' && transactionEvent.contexts?.trace?.op === 'navigation';
     });
 
+    const pageloadTxPromise = waitForTransaction(APP_NAME, async transactionEvent => {
+      return transactionEvent.transaction === '/performance' && transactionEvent.contexts?.trace?.op === 'pageload';
+    });
+
     await page.goto(`/performance`); // pageload
-    await page.waitForTimeout(1000); // give it a sec before navigation
+    await pageloadTxPromise;
     await page.getByRole('link', { name: 'Search Only Navigate' }).click(); // navigation with search-only object to
 
     const transaction = await txPromise;
@@ -129,8 +141,12 @@ test.describe('client - navigation performance', () => {
       );
     });
 
+    const pageloadTxPromise = waitForTransaction(APP_NAME, async transactionEvent => {
+      return transactionEvent.transaction === '/performance' && transactionEvent.contexts?.trace?.op === 'pageload';
+    });
+
     await page.goto(`/performance`); // pageload
-    await page.waitForTimeout(1000); // give it a sec before navigation
+    await pageloadTxPromise;
     await page.getByRole('link', { name: 'With Param Page' }).click(); // navigation
 
     const transaction = await txPromise;
@@ -177,4 +193,51 @@ test.describe('client - navigation performance', () => {
       tags: { runtime: 'browser' },
     });
   });
+
+  test('should create navigation transaction for navigate(-1) with correct url attributes', async ({ page }) => {
+    const pageloadTxPromise = waitForTransaction(APP_NAME, async transactionEvent => {
+      return transactionEvent.transaction === '/performance' && transactionEvent.contexts?.trace?.op === 'pageload';
+    });
+
+    await page.goto(`/performance`);
+    await pageloadTxPromise;
+
+    const forwardNavPromise = waitForTransaction(APP_NAME, async transactionEvent => {
+      return (
+        transactionEvent.transaction === '/performance/ssr' && transactionEvent.contexts?.trace?.op === 'navigation'
+      );
+    });
+
+    await page.getByRole('link', { name: 'SSR Page' }).click();
+    await forwardNavPromise;
+
+    const backNavPromise = waitForTransaction(APP_NAME, async transactionEvent => {
+      return transactionEvent.transaction === '/performance' && transactionEvent.contexts?.trace?.op === 'navigation';
+    });
+
+    await page.getByRole('button', { name: 'History Back Navigate' }).click();
+
+    const transaction = await backNavPromise;
+
+    expect(transaction).toMatchObject({
+      contexts: {
+        trace: {
+          op: 'navigation',
+          origin: 'auto.navigation.react_router',
+          data: {
+            'sentry.source': 'route',
+            'sentry.op': 'navigation',
+            'sentry.origin': 'auto.navigation.react_router',
+            'url.template': '/performance',
+            // react-router-serve 301-redirects the bare index route to a trailing slash
+            'url.path': '/performance/',
+            'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/performance\/$/),
+          },
+        },
+      },
+      transaction: '/performance',
+      type: 'transaction',
+      transaction_info: { source: 'route' },
+    });
+  });
 });

dev-packages/e2e-tests/test-applications/react-router-8-framework/app/routes/performance/ssr.tsx

@@ -1,7 +1,14 @@
+import { useNavigate } from 'react-router';
+
 export default function SsrPage() {
+  const navigate = useNavigate();
+
   return (
     <div>
       <h1>SSR Page</h1>
+      <button type="button" onClick={() => navigate(-1)}>
+        History Back Navigate
+      </button>
     </div>
   );
 }