[react-router-6] Nested Routers produce wrong parametrized URL

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which package are you using?

@sentry/react

SDK Version

7.16

Framework Version

React 18

Link to Sentry event

https://sentry.io/organizations/astraea/issues/3684294425/?project=5995515&query=is%3Aunresolved

Steps to Reproduce

I have quite a complex router so I recreated a small part of it here with repro steps in the readme: https://github.com/tirli/repro-sentry-react-router

I’m pretty sure several nested SentryRoutes are to blame here but I cannot rewrite my usage of the router 😦 Also, I’ve seen a lot of similar issues that are blaming the wrong order of sentry init and router usage so I checked this case and I feel like it’s not the problem here

Expected Result

http://localhost:5173/monitor/projects/:projectId/:siteId in error details

Actual Result

http://localhost:5173/monitor/projects/someProjectId/someSiteId

[onurtemizkan]

I agree, this would end up quite hacky even if we change our API. Haven’t tried, but 6.4 seems to make it fairly easier for us to instrument.

[onurtemizkan]

Thanks for reporting this @tirli.

I was able to debug the reproduction, and indeed the problem seems to be the use of Descendant Routes.

I have tried two scenarios to figure out how we can support this pattern.

---

1 - When you only use SentryRoutes on the root, and unwrapped Routes in descendants.

In this scenario, createRoutesFromChildren (Remix utility that Sentry uses) only returns top level routes (which in your case are monitor/* and *). The child element props (thus the descendant routes) are inaccessible, as they are not rendered at the time we can access them.

In this case, we also lose pageload/navigation transactions of child routes, which IMO makes this approach unworthy to follow unless we find a way to access props inside Route elements.

---

2 - When you use SentryRoutes for every Routes instance in the app. (Your Case)

In this case, createRoutesFromChildren is called for every SentryRoutes instance, and each have their own slice of route. So we fail to match the parameters, as we don’t have the full route.

For example, in your project:

Root SentryRoute has: monitor/* First child SentryRoute has: project/ and so on.

We don’t have any info about the parent/child relationships of routes in the current structure, so it might not be easy to make multiple SentryRoutes instances work together and form the full path. We can try using useOutletContext, to define parent / child flags on the root SentryRoutes, but that will require an API change on our side.

---

We do not support most of the new features of React Router 6.4 yet (https://github.com/getsentry/sentry-javascript/issues/5872). Maybe we can come up with a better or simpler solution for descendant routes, while working on that.

cc: @AbhiPrasad