fix(react-router): Ensure that all browser spans have source=route (#16984)

mydea · web-flow · commit 4c1079e0c118 · 2025-07-15T11:00:29.000+02:00
This updates the browser tracing implementation in react router to
ensure that we always have parametrized routes.

In the previous implementation, if the parametrized route was the same
as the "initial" one, we would just do nothing and the source remains
URL. We would also not set the origin of the spans. this is not correct,
because we actually ensured this is parametrized (there are simply no
parameters in, but still!), so the source should still be `route` in
this case.
diff --git a/dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/tests/performance/navigation.client.test.ts b/dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/tests/performance/navigation.client.test.ts
@@ -22,7 +22,7 @@ test.describe('client - navigation performance', () => {
           data: {
             'sentry.origin': 'auto.navigation.react-router',
             'sentry.op': 'navigation',
-            'sentry.source': 'url',
+            'sentry.source': 'route',
           },
           op: 'navigation',
           origin: 'auto.navigation.react-router',
@@ -33,7 +33,7 @@ test.describe('client - navigation performance', () => {
       timestamp: expect.any(Number),
       transaction: '/performance/ssr',
       type: 'transaction',
-      transaction_info: { source: 'url' },
+      transaction_info: { source: 'route' },
       platform: 'javascript',
       request: {
         url: expect.stringContaining('/performance/ssr'),
diff --git a/dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/tests/performance/pageload.client.test.ts b/dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/tests/performance/pageload.client.test.ts
@@ -5,7 +5,7 @@ import { APP_NAME } from '../constants';
 test.describe('client - pageload performance', () => {
   test('should send pageload transaction', async ({ page }) => {
     const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
-      return transactionEvent.transaction === '/performance/';
+      return transactionEvent.transaction === '/performance';
     });
 
     await page.goto(`/performance`);
@@ -18,20 +18,20 @@ test.describe('client - pageload performance', () => {
           span_id: expect.any(String),
           trace_id: expect.any(String),
           data: {
-            'sentry.origin': 'auto.pageload.browser',
+            'sentry.origin': 'auto.pageload.react-router',
             'sentry.op': 'pageload',
-            'sentry.source': 'url',
+            'sentry.source': 'route',
           },
           op: 'pageload',
-          origin: 'auto.pageload.browser',
+          origin: 'auto.pageload.react-router',
         },
       },
       spans: expect.any(Array),
       start_timestamp: expect.any(Number),
       timestamp: expect.any(Number),
-      transaction: '/performance/',
+      transaction: '/performance',
       type: 'transaction',
-      transaction_info: { source: 'url' },
+      transaction_info: { source: 'route' },
       measurements: expect.any(Object),
       platform: 'javascript',
       request: {
@@ -68,12 +68,12 @@ test.describe('client - pageload performance', () => {
           span_id: expect.any(String),
           trace_id: expect.any(String),
           data: {
-            'sentry.origin': 'auto.pageload.browser',
+            'sentry.origin': 'auto.pageload.react-router',
             'sentry.op': 'pageload',
             'sentry.source': 'route',
           },
           op: 'pageload',
-          origin: 'auto.pageload.browser',
+          origin: 'auto.pageload.react-router',
         },
       },
       spans: expect.any(Array),
@@ -105,26 +105,26 @@ test.describe('client - pageload performance', () => {
 
   test('should send pageload transaction for prerendered pages', async ({ page }) => {
     const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
-      return transactionEvent.transaction === '/performance/static/';
+      return transactionEvent.transaction === '/performance/static';
     });
 
     await page.goto(`/performance/static`);
 
     const transaction = await txPromise;
 
     expect(transaction).toMatchObject({
-      transaction: '/performance/static/',
+      transaction: '/performance/static',
       contexts: {
         trace: {
           span_id: expect.any(String),
           trace_id: expect.any(String),
           data: {
-            'sentry.origin': 'auto.pageload.browser',
+            'sentry.origin': 'auto.pageload.react-router',
             'sentry.op': 'pageload',
-            'sentry.source': 'url',
+            'sentry.source': 'route',
           },
           op: 'pageload',
-          origin: 'auto.pageload.browser',
+          origin: 'auto.pageload.react-router',
         },
       },
     });
diff --git a/dev-packages/e2e-tests/test-applications/react-router-7-framework-node-20-18/tests/performance/navigation.client.test.ts b/dev-packages/e2e-tests/test-applications/react-router-7-framework-node-20-18/tests/performance/navigation.client.test.ts
@@ -22,7 +22,7 @@ test.describe('client - navigation performance', () => {
           data: {
             'sentry.origin': 'auto.navigation.react-router',
             'sentry.op': 'navigation',
-            'sentry.source': 'url',
+            'sentry.source': 'route',
           },
           op: 'navigation',
           origin: 'auto.navigation.react-router',
@@ -33,7 +33,7 @@ test.describe('client - navigation performance', () => {
       timestamp: expect.any(Number),
       transaction: '/performance/ssr',
       type: 'transaction',
-      transaction_info: { source: 'url' },
+      transaction_info: { source: 'route' },
       platform: 'javascript',
       request: {
         url: expect.stringContaining('/performance/ssr'),
diff --git a/dev-packages/e2e-tests/test-applications/react-router-7-framework-node-20-18/tests/performance/pageload.client.test.ts b/dev-packages/e2e-tests/test-applications/react-router-7-framework-node-20-18/tests/performance/pageload.client.test.ts
@@ -5,7 +5,7 @@ import { APP_NAME } from '../constants';
 test.describe('client - pageload performance', () => {
   test('should send pageload transaction', async ({ page }) => {
     const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
-      return transactionEvent.transaction === '/performance/';
+      return transactionEvent.transaction === '/performance';
     });
 
     await page.goto(`/performance`);
@@ -18,20 +18,20 @@ test.describe('client - pageload performance', () => {
           span_id: expect.any(String),
           trace_id: expect.any(String),
           data: {
-            'sentry.origin': 'auto.pageload.browser',
+            'sentry.origin': 'auto.pageload.react-router',
             'sentry.op': 'pageload',
-            'sentry.source': 'url',
+            'sentry.source': 'route',
           },
           op: 'pageload',
-          origin: 'auto.pageload.browser',
+          origin: 'auto.pageload.react-router',
         },
       },
       spans: expect.any(Array),
       start_timestamp: expect.any(Number),
       timestamp: expect.any(Number),
-      transaction: '/performance/',
+      transaction: '/performance',
       type: 'transaction',
-      transaction_info: { source: 'url' },
+      transaction_info: { source: 'route' },
       measurements: expect.any(Object),
       platform: 'javascript',
       request: {
@@ -68,12 +68,12 @@ test.describe('client - pageload performance', () => {
           span_id: expect.any(String),
           trace_id: expect.any(String),
           data: {
-            'sentry.origin': 'auto.pageload.browser',
+            'sentry.origin': 'auto.pageload.react-router',
             'sentry.op': 'pageload',
             'sentry.source': 'route',
           },
           op: 'pageload',
-          origin: 'auto.pageload.browser',
+          origin: 'auto.pageload.react-router',
         },
       },
       spans: expect.any(Array),
@@ -105,26 +105,26 @@ test.describe('client - pageload performance', () => {
 
   test('should send pageload transaction for prerendered pages', async ({ page }) => {
     const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
-      return transactionEvent.transaction === '/performance/static/';
+      return transactionEvent.transaction === '/performance/static';
     });
 
     await page.goto(`/performance/static`);
 
     const transaction = await txPromise;
 
     expect(transaction).toMatchObject({
-      transaction: '/performance/static/',
+      transaction: '/performance/static',
       contexts: {
         trace: {
           span_id: expect.any(String),
           trace_id: expect.any(String),
           data: {
-            'sentry.origin': 'auto.pageload.browser',
+            'sentry.origin': 'auto.pageload.react-router',
             'sentry.op': 'pageload',
-            'sentry.source': 'url',
+            'sentry.source': 'route',
           },
           op: 'pageload',
-          origin: 'auto.pageload.browser',
+          origin: 'auto.pageload.react-router',
         },
       },
     });
diff --git a/dev-packages/e2e-tests/test-applications/react-router-7-framework-spa-node-20-18/tests/performance/pageload.client.test.ts b/dev-packages/e2e-tests/test-applications/react-router-7-framework-spa-node-20-18/tests/performance/pageload.client.test.ts
@@ -18,20 +18,20 @@ test.describe('client - pageload performance', () => {
           span_id: expect.any(String),
           trace_id: expect.any(String),
           data: {
-            'sentry.origin': 'auto.pageload.browser',
+            'sentry.origin': 'auto.pageload.react-router',
             'sentry.op': 'pageload',
-            'sentry.source': 'url',
+            'sentry.source': 'route',
           },
           op: 'pageload',
-          origin: 'auto.pageload.browser',
+          origin: 'auto.pageload.react-router',
         },
       },
       spans: expect.any(Array),
       start_timestamp: expect.any(Number),
       timestamp: expect.any(Number),
       transaction: '/performance',
       type: 'transaction',
-      transaction_info: { source: 'url' },
+      transaction_info: { source: 'route' },
       measurements: expect.any(Object),
       platform: 'javascript',
       request: {
@@ -68,12 +68,12 @@ test.describe('client - pageload performance', () => {
           span_id: expect.any(String),
           trace_id: expect.any(String),
           data: {
-            'sentry.origin': 'auto.pageload.browser',
+            'sentry.origin': 'auto.pageload.react-router',
             'sentry.op': 'pageload',
             'sentry.source': 'route',
           },
           op: 'pageload',
-          origin: 'auto.pageload.browser',
+          origin: 'auto.pageload.react-router',
         },
       },
       spans: expect.any(Array),
diff --git a/dev-packages/e2e-tests/test-applications/react-router-7-framework-spa/tests/performance/pageload.client.test.ts b/dev-packages/e2e-tests/test-applications/react-router-7-framework-spa/tests/performance/pageload.client.test.ts
@@ -18,20 +18,20 @@ test.describe('client - pageload performance', () => {
           span_id: expect.any(String),
           trace_id: expect.any(String),
           data: {
-            'sentry.origin': 'auto.pageload.browser',
+            'sentry.origin': 'auto.pageload.react-router',
             'sentry.op': 'pageload',
-            'sentry.source': 'url',
+            'sentry.source': 'route',
           },
           op: 'pageload',
-          origin: 'auto.pageload.browser',
+          origin: 'auto.pageload.react-router',
         },
       },
       spans: expect.any(Array),
       start_timestamp: expect.any(Number),
       timestamp: expect.any(Number),
       transaction: '/performance',
       type: 'transaction',
-      transaction_info: { source: 'url' },
+      transaction_info: { source: 'route' },
       measurements: expect.any(Object),
       platform: 'javascript',
       request: {
@@ -68,12 +68,12 @@ test.describe('client - pageload performance', () => {
           span_id: expect.any(String),
           trace_id: expect.any(String),
           data: {
-            'sentry.origin': 'auto.pageload.browser',
+            'sentry.origin': 'auto.pageload.react-router',
             'sentry.op': 'pageload',
             'sentry.source': 'route',
           },
           op: 'pageload',
-          origin: 'auto.pageload.browser',
+          origin: 'auto.pageload.react-router',
         },
       },
       spans: expect.any(Array),
diff --git a/dev-packages/e2e-tests/test-applications/react-router-7-framework/tests/performance/navigation.client.test.ts b/dev-packages/e2e-tests/test-applications/react-router-7-framework/tests/performance/navigation.client.test.ts
@@ -22,7 +22,7 @@ test.describe('client - navigation performance', () => {
           data: {
             'sentry.origin': 'auto.navigation.react-router',
             'sentry.op': 'navigation',
-            'sentry.source': 'url',
+            'sentry.source': 'route',
           },
           op: 'navigation',
           origin: 'auto.navigation.react-router',
@@ -33,7 +33,7 @@ test.describe('client - navigation performance', () => {
       timestamp: expect.any(Number),
       transaction: '/performance/ssr',
       type: 'transaction',
-      transaction_info: { source: 'url' },
+      transaction_info: { source: 'route' },
       platform: 'javascript',
       request: {
         url: expect.stringContaining('/performance/ssr'),
diff --git a/dev-packages/e2e-tests/test-applications/react-router-7-framework/tests/performance/pageload.client.test.ts b/dev-packages/e2e-tests/test-applications/react-router-7-framework/tests/performance/pageload.client.test.ts
@@ -5,7 +5,7 @@ import { APP_NAME } from '../constants';
 test.describe('client - pageload performance', () => {
   test('should send pageload transaction', async ({ page }) => {
     const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
-      return transactionEvent.transaction === '/performance/';
+      return transactionEvent.transaction === '/performance';
     });
 
     await page.goto(`/performance`);
@@ -18,20 +18,20 @@ test.describe('client - pageload performance', () => {
           span_id: expect.any(String),
           trace_id: expect.any(String),
           data: {
-            'sentry.origin': 'auto.pageload.browser',
+            'sentry.origin': 'auto.pageload.react-router',
             'sentry.op': 'pageload',
-            'sentry.source': 'url',
+            'sentry.source': 'route',
           },
           op: 'pageload',
-          origin: 'auto.pageload.browser',
+          origin: 'auto.pageload.react-router',
         },
       },
       spans: expect.any(Array),
       start_timestamp: expect.any(Number),
       timestamp: expect.any(Number),
-      transaction: '/performance/',
+      transaction: '/performance',
       type: 'transaction',
-      transaction_info: { source: 'url' },
+      transaction_info: { source: 'route' },
       measurements: expect.any(Object),
       platform: 'javascript',
       request: {
@@ -68,12 +68,12 @@ test.describe('client - pageload performance', () => {
           span_id: expect.any(String),
           trace_id: expect.any(String),
           data: {
-            'sentry.origin': 'auto.pageload.browser',
+            'sentry.origin': 'auto.pageload.react-router',
             'sentry.op': 'pageload',
             'sentry.source': 'route',
           },
           op: 'pageload',
-          origin: 'auto.pageload.browser',
+          origin: 'auto.pageload.react-router',
         },
       },
       spans: expect.any(Array),
@@ -105,26 +105,26 @@ test.describe('client - pageload performance', () => {
 
   test('should send pageload transaction for prerendered pages', async ({ page }) => {
     const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
-      return transactionEvent.transaction === '/performance/static/';
+      return transactionEvent.transaction === '/performance/static';
     });
 
     await page.goto(`/performance/static`);
 
     const transaction = await txPromise;
 
     expect(transaction).toMatchObject({
-      transaction: '/performance/static/',
+      transaction: '/performance/static',
       contexts: {
         trace: {
           span_id: expect.any(String),
           trace_id: expect.any(String),
           data: {
-            'sentry.origin': 'auto.pageload.browser',
+            'sentry.origin': 'auto.pageload.react-router',
             'sentry.op': 'pageload',
-            'sentry.source': 'url',
+            'sentry.source': 'route',
           },
           op: 'pageload',
-          origin: 'auto.pageload.browser',
+          origin: 'auto.pageload.react-router',
         },
       },
     });
diff --git a/packages/react-router/src/client/hydratedRouter.ts b/packages/react-router/src/client/hydratedRouter.ts
diff --git a/packages/react-router/test/client/hydratedRouter.test.ts b/packages/react-router/test/client/hydratedRouter.test.ts
