fix(react-router): Set correct transaction name when navigating with object argument

Author: nicohrubec

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

@@ -7,6 +7,7 @@ export default function PerformancePage() {
       <nav>
         <Link to="/performance/ssr">SSR Page</Link>
         <Link to="/performance/with/sentry">With Param Page</Link>
+        <Link to={{ pathname: '/performance/with/object-nav', search: '?foo=bar' }}>Object Navigate</Link>
         <Link to="/performance/server-loader">Server Loader</Link>
       </nav>
     </div>

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

@@ -54,6 +54,33 @@ test.describe('client - navigation performance', () => {
     });
   });
 
+  test('should create navigation transaction when navigating with object `to` prop', async ({ page }) => {
+    const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
+      return transactionEvent.transaction === '/performance/with/:param';
+    });
+
+    await page.goto(`/performance`); // pageload
+    await page.waitForTimeout(1000); // give it a sec before navigation
+    await page.getByRole('link', { name: 'Object Navigate' }).click(); // navigation with object to
+
+    const transaction = await txPromise;
+
+    expect(transaction).toMatchObject({
+      contexts: {
+        trace: {
+          op: 'navigation',
+          origin: 'auto.navigation.react_router',
+          data: {
+            'sentry.source': 'route',
+          },
+        },
+      },
+      transaction: '/performance/with/:param',
+      type: 'transaction',
+      transaction_info: { source: 'route' },
+    });
+  });
+
   test('should update navigation transaction for dynamic routes', async ({ page }) => {
     const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
       return transactionEvent.transaction === '/performance/with/:param';

packages/react-router/src/client/createClientInstrumentation.ts

@@ -13,6 +13,7 @@ import {
 import { DEBUG_BUILD } from '../common/debug-build';
 import type { ClientInstrumentation, InstrumentableRoute, InstrumentableRouter } from '../common/types';
 import { captureInstrumentationError, getPathFromRequest, getPattern, normalizeRoutePath } from '../common/utils';
+import { resolveNavigateArg } from './utils';
 
 const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window;
 
@@ -164,9 +165,9 @@ export function createSentryClientInstrumentation(
             return;
           }
 
-          // Handle string navigations (e.g., navigate('/about'))
+          // Handle string/object navigations (e.g., navigate('/about') or navigate({ pathname: '/about' }))
           const client = getClient();
-          const toPath = String(info.to);
+          const toPath = resolveNavigateArg(info.to);
           let navigationSpan;
 
           if (client) {

packages/react-router/src/client/hydratedRouter.ts

@@ -14,6 +14,7 @@ import {
 import type { DataRouter, RouterState } from 'react-router';
 import { DEBUG_BUILD } from '../common/debug-build';
 import { isClientInstrumentationApiUsed } from './createClientInstrumentation';
+import { resolveNavigateArg } from './utils';
 
 const GLOBAL_OBJ_WITH_DATA_ROUTER = GLOBAL_OBJ as typeof GLOBAL_OBJ & {
   __reactRouterDataRouter?: DataRouter;
@@ -59,7 +60,7 @@ export function instrumentHydratedRouter(): void {
         router.navigate = function sentryPatchedNavigate(...args) {
           // Skip if instrumentation API is enabled (it handles navigation spans itself)
           if (!isClientInstrumentationApiUsed()) {
-            maybeCreateNavigationTransaction(String(args[0]) || '<unknown route>', 'url');
+            maybeCreateNavigationTransaction(resolveNavigateArg(args[0]) || '<unknown route>', 'url');
           }
           return originalNav(...args);
         };

packages/react-router/src/client/utils.ts

@@ -0,0 +1,12 @@
+/**
+ * Resolves a navigate argument to a string path.
+ *
+ * React Router's navigate() accepts a string, number, or To object ({ pathname, search, hash }).
+ * This function extracts the pathname from object arguments to avoid "[object Object]" in transaction names.
+ */
+export function resolveNavigateArg(target: unknown): string {
+  if (typeof target === 'object' && target !== null && 'pathname' in target) {
+    return (target as { pathname?: string }).pathname || '/';
+  }
+  return String(target);
+}

packages/react-router/test/client/createClientInstrumentation.test.ts

@@ -100,6 +100,37 @@ describe('createSentryClientInstrumentation', () => {
     expect(mockCallNavigate).toHaveBeenCalled();
   });
 
+  it('should create navigation span with correct name when `to` is an object', async () => {
+    const mockCallNavigate = vi.fn().mockResolvedValue({ status: 'success', error: undefined });
+    const mockInstrument = vi.fn();
+    const mockClient = {};
+
+    (core.getClient as any).mockReturnValue(mockClient);
+
+    const instrumentation = createSentryClientInstrumentation();
+    instrumentation.router?.({ instrument: mockInstrument });
+
+    expect(mockInstrument).toHaveBeenCalled();
+    const hooks = mockInstrument.mock.calls[0]![0];
+
+    // Call the navigate hook with an object `to` (pathname + search)
+    await hooks.navigate(mockCallNavigate, {
+      currentUrl: '/home',
+      to: { pathname: '/items/123', search: '?foo=bar' },
+    });
+
+    expect(browser.startBrowserTracingNavigationSpan).toHaveBeenCalledWith(mockClient, {
+      name: '/items/123',
+      attributes: expect.objectContaining({
+        'sentry.source': 'url',
+        'sentry.op': 'navigation',
+        'sentry.origin': 'auto.navigation.react_router.instrumentation_api',
+        'navigation.type': 'router.navigate',
+      }),
+    });
+    expect(mockCallNavigate).toHaveBeenCalled();
+  });
+
   it('should instrument router fetch with spans', async () => {
     const mockCallFetch = vi.fn().mockResolvedValue({ status: 'success', error: undefined });
     const mockInstrument = vi.fn();

packages/react-router/test/client/hydratedRouter.test.ts

@@ -127,6 +127,28 @@ describe('instrumentHydratedRouter', () => {
     delete (globalThis as any).__sentryReactRouterClientInstrumentationUsed;
   });
 
+  it('creates navigation transaction with correct name when navigate is called with an object `to`', () => {
+    instrumentHydratedRouter();
+    mockRouter.navigate({ pathname: '/items/123', search: '?foo=bar' });
+    expect(browser.startBrowserTracingNavigationSpan).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({
+        name: '/items/123',
+      }),
+    );
+  });
+
+  it('creates navigation transaction with correct name when navigate is called with a number', () => {
+    instrumentHydratedRouter();
+    mockRouter.navigate(-1);
+    expect(browser.startBrowserTracingNavigationSpan).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({
+        name: '-1',
+      }),
+    );
+  });
+
   it('creates navigation span when client instrumentation API is not enabled', () => {
     // Ensure the flag is not set (default state - instrumentation API not used)
     delete (globalThis as any).__sentryReactRouterClientInstrumentationUsed;