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.64.0
Framework Version
No response
Link to Sentry event
No response
Reproduction Example/SDK Setup
user made a demo to repro in a GitHub repo. Linking repro link in Linear ticket. Test page below:
// @vitest-environment jsdom
import React, { useEffect } from 'react';
import { render } from '@testing-library/react';
import { expect, test } from 'vitest';
import * as Sentry from '@sentry/react';
import {
MemoryRouter,
Route,
Routes,
useLocation,
useNavigationType,
createRoutesFromChildren,
matchRoutes,
} from 'react-router-dom';
test('descendant <Routes> keeps the full route in the pageload transaction name', async () => {
let onPageload;
const pageload = new Promise((resolve) => (onPageload = resolve));
Sentry.init({
dsn: 'https://public@o0.ingest.sentry.io/0',
tracesSampleRate: 1,
integrations: [
Sentry.reactRouterV6BrowserTracingIntegration({
useEffect,
useLocation,
useNavigationType,
createRoutesFromChildren,
matchRoutes,
instrumentPageLoad: true,
instrumentNavigation: false,
idleTimeout: 100,
}),
],
beforeSendTransaction: (event) => {
if (event.contexts?.trace?.op === 'pageload') onPageload(event.transaction);
return null; // never send anything
},
});
const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes);
// A "child" module renders its OWN <SentryRoutes> (descendant routes), whose
// matched route (:id, via its index) sits above nested child/index routes.
const ChildRouter = () => (
<SentryRoutes>
<Route path=":id">
<Route index element={<div />} />
<Route path=":sub">
<Route index element={<div />} />
</Route>
</Route>
</SentryRoutes>
);
render(
<MemoryRouter initialEntries={['/child/abc123']}>
<SentryRoutes>
<Route path="child/*" element={<ChildRouter />} />
</SentryRoutes>
</MemoryRouter>
);
// /child/abc123 matches child/* -> :id (index), so the transaction should be
// "/child/:id". Instead the descendant reconstruction drops the "/child" prefix
// and surfaces a deeper subtree, yielding "/:id/:sub".
expect(await pageload).toBe('/child/:id');
});
Steps to Reproduce
In repro:
npm test
The test navigates to /child/abc123, which matches child/* → :id (its index), so the transaction should be /child/:id. Instead it is /:id/:sub:
AssertionError: expected '/:id/:sub' to be '/child/:id'
Expected: "/child/:id"
Received: "/:id/:sub"
(The test asserts the correct value, so it fails — the failure output is the bug.)
Expected Result
Transactions have the correct name
Actual Result
Transactions take the name reflecting descendant routes that were not actually matched/rendered)
Additional Context
No response
Priority
No response
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.64.0
Framework Version
No response
Link to Sentry event
No response
Reproduction Example/SDK Setup
user made a demo to repro in a GitHub repo. Linking repro link in Linear ticket. Test page below:
Steps to Reproduce
In repro:
npm testThe test navigates to /child/abc123, which matches child/* → :id (its index), so the transaction should be /child/:id. Instead it is /:id/:sub:
(The test asserts the correct value, so it fails — the failure output is the bug.)
Expected Result
Transactions have the correct name
Actual Result
Transactions take the name reflecting descendant routes that were not actually matched/rendered)
Additional Context
No response
Priority
No response