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

[tirli]

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

[smeubank]

thanks for raising this issue! The team will take a look at it and try to get back to you.

repro steps much appreciated 🙏

[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 (#5872). Maybe we can come up with a better or simpler solution for descendant routes, while working on that.

cc: @AbhiPrasad

[AbhiPrasad]

Reading this through I think this is tricky to make work with our current API. Might be worthwhile to just try working on #5872, and then say that for nested routers to work you need to use the 6.4 solution. Thoughts?

[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.

[github-actions]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you label it Status: Backlog or Status: In Progress, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀

[tirli]

@onurtemizkan, not sure what is the status of this. I see that all mentioned issues are resolved, and PRs are merged. Should it work now?