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

When navigate() or <Link> is called with an object `to` prop (e.g. {
pathname: '/items/123' }), the transaction name currently is set to
`[object Object]`. This adds a `resolveNavigateArg` helper that extracts
the pathname from object arguments:
- If we get a string or number we use it directly as transaction name
- If we get an object with a pathname property we use that
- If we get an object without a pathname property we stay on the current
page so we try to grab the current path as transaction name, fallback to
`/`

Closes #19580

Author: nicohrubec

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

@@ -7,6 +7,8 @@ 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={{ search: '?query=test' }}>Search Only 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,56 @@ 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 create navigation transaction when navigating with search-only object `to` prop', async ({ page }) => {
+    const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
+      return transactionEvent.transaction === '/performance' && transactionEvent.contexts?.trace?.op === 'navigation';
+    });
+
+    await page.goto(`/performance`); // pageload
+    await page.waitForTimeout(1000); // give it a sec before navigation
+    await page.getByRole('link', { name: 'Search Only Navigate' }).click(); // navigation with search-only object to
+
+    const transaction = await txPromise;
+
+    expect(transaction).toMatchObject({
+      contexts: {
+        trace: {
+          op: 'navigation',
+          origin: 'auto.navigation.react_router',
+        },
+      },
+      transaction: '/performance',
+      type: 'transaction',
+    });
+  });
+
   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,24 @@
+import { GLOBAL_OBJ } from '@sentry/core';
+
+/**
+ * Resolves a navigate argument to a pathname string.
+ *
+ * React Router's navigate() accepts a string, number, or a To object ({ pathname, search, hash }).
+ * All fields in the To object are optional (Partial<Path>), so we need to detect object args
+ * to avoid "[object Object]" transaction names.
+ */
+export function resolveNavigateArg(target: unknown): string {
+  if (typeof target !== 'object' || target === null) {
+    // string or number
+    return String(target);
+  }
+
+  // Object `to` with pathname
+  const pathname = (target as Record<string, unknown>).pathname;
+  if (typeof pathname === 'string') {
+    return pathname || '/';
+  }
+
+  // Object `to` without pathname - navigation stays on current path
+  return (GLOBAL_OBJ as typeof GLOBAL_OBJ & Window).location?.pathname || '/';
+}

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;