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
- Set up
@sentry/react-router with reactRouterTracingIntegration()
- Navigate using a
<Link> (or navigate()) with an object to prop:
<Link to={{ pathname: `/items/${id}`, search: `redirectTo=${encodeURIComponent(backPath)}` }}>
View item
</Link>
- 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. "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/items/123"number — e.g. -1 (go back)To object — e.g. { pathname: "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/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');
Is there an existing issue for this?
How do you use Sentry?
Sentry SaaS (sentry.io)
Which SDK are you using?
@sentry/react-routerSDK Version
10.38.0
Framework Version
React Router v7 (framework mode)
Link to Sentry event
N/A
Steps to Reproduce
@sentry/react-routerwithreactRouterTracingIntegration()<Link>(ornavigate()) with an objecttoprop:[object Object]Expected Result
Transaction name should be the resolved pathname (e.g.,
/items/:idor/items/123), not[object Object].Actual Result
Transaction name is
[object Object].Root Cause
In
hydratedRouter.js, the patchednavigatefunction usesString(args[0])to derive the transaction name:React Router's
navigate()accepts multiple argument types:string— e.g."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/items/123"number— e.g.-1(go back)Toobject — e.g.{ pathname: "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/items/123", search: "?foo=bar" }When called with an object,
String({...})produces"[object Object]".Suggested Fix