diff --git a/packages/react/src/reactrouterv3.ts b/packages/react/src/reactrouterv3.ts index 73058307353f..f49948a2a74b 100644 --- a/packages/react/src/reactrouterv3.ts +++ b/packages/react/src/reactrouterv3.ts @@ -150,9 +150,8 @@ function getRouteStringFromRoutes(routes: Route[]): string { } } - return routesWithPaths - .slice(index) - .filter(({ path }) => !!path) - .map(({ path }) => path) - .join(''); + return routesWithPaths.slice(index).reduce((acc, { path }) => { + const pathSegment = acc === '/' || acc === '' ? path : `/${path}`; + return `${acc}${pathSegment}`; + }, ''); } diff --git a/packages/react/test/reactrouterv3.test.tsx b/packages/react/test/reactrouterv3.test.tsx index 841cbf018647..18fc34527c3f 100644 --- a/packages/react/test/reactrouterv3.test.tsx +++ b/packages/react/test/reactrouterv3.test.tsx @@ -64,6 +64,11 @@ describe('browserTracingReactRouterV3', () => {
OrgId
} />
Team
} />
+ + +
Team Details
} /> +
+
); const history = createMemoryHistory(); @@ -192,6 +197,22 @@ describe('browserTracingReactRouterV3', () => { [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation', }, }); + expect(getCurrentScope().getScopeData().transactionName).toEqual('/users/:userid'); + + act(() => { + history.push('/teams/456/details'); + }); + + expect(mockStartBrowserTracingNavigationSpan).toHaveBeenCalledTimes(2); + expect(mockStartBrowserTracingNavigationSpan).toHaveBeenLastCalledWith(expect.any(BrowserClient), { + name: '/teams/:teamId/details', + attributes: { + [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'route', + [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v3', + [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation', + }, + }); + expect(getCurrentScope().getScopeData().transactionName).toEqual('/teams/:teamId/details'); }); it("updates the scope's `transactionName` on a navigation", () => {