Skip to content

reactRouterTracingIntegration: transaction name is [object Object] when navigating with object argument #19580

@jbojcic-ai

Description

@jbojcic-ai

Is there an existing issue for this?

How do you use Sentry?

Sentry SaaS (sentry.io)

Which SDK are you using?

@sentry/react-router

SDK Version

10.38.0

Framework Version

React Router v7 (framework mode)

Link to Sentry event

N/A

Steps to Reproduce

  1. Set up @sentry/react-router with reactRouterTracingIntegration()
  2. Navigate using a <Link> (or navigate()) with an object to prop:
    <Link to={{ pathname: `/items/${id}`, search: `redirectTo=${encodeURIComponent(backPath)}` }}>
      View item
    </Link>
  3. Observe the transaction name in Sentry shows [object Object]

Expected Result

Transaction name should be the resolved pathname (e.g., /items/:id or /items/123), not [object Object].

Actual Result

Transaction name is [object Object].

Root Cause

In hydratedRouter.js, the patched navigate function uses String(args[0]) to derive the transaction name:

router.navigate = function sentryPatchedNavigate(...args) {
  if (!isClientInstrumentationApiUsed()) {
    maybeCreateNavigationTransaction(String(args[0]) || '<unknown route>', 'url');
  }
  return originalNav(...args);
};

React Router's navigate() accepts multiple argument types:

  • string — e.g. "/items/123"
  • number — e.g. -1 (go back)
  • To object — e.g. { pathname: "/items/123", search: "?foo=bar" }

When called with an object, String({...}) produces "[object Object]".

Suggested Fix

const navTarget = args[0];
const name = typeof navTarget === 'string'
  ? navTarget
  : typeof navTarget === 'number'
    ? `go(${navTarget})`
    : navTarget?.pathname || '<unknown route>';

maybeCreateNavigationTransaction(name, 'url');

Metadata

Metadata

Assignees

Labels

No labels
No labels

Projects

Status

No status

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions