How to get paramaterized URLs from react router for Sentry performance monitoring

[AbhiPrasad]

Hey folks!

I helped build the react router integrations for Sentry's frontend performance monitoring product.

The react router instrumentation listens to react router's history module to track pageloads and navigations for apps, all while displaying parameterized routes so that they grouped together for analysis (ex. /teams/:teamid/user/:userid -> /teams/123/user/345). So far we've created instrumentation for react router v3, v4, and v5.

Before we begin work on instrumentation for react router v6, we wanted to reach out and ask what y'all think is the best way for us to access parameterized routes with react router v6. We want it so that on history change, we can identify the url with the dynamic segments included. It's easy for us to get something like /users/1234 through the hooks provided, but we want to grab /users/:userid (if it's configured by the user's routes).

From some initial playing around, it seems we can take advantage of UNSAFE_RouteContext to iterate through the matches, but we don't want to muck around with internals too much if we can avoid it (UNSAFE makes it sufficiently scary :P). We want to get the match that best defines the route that is being rendered.

We could also wrap individual Route components in a HOC and try to match based on what renders, but it seems hard to make a Route HOC due to this invariant check:

react-router/packages/react-router/index.tsx

Lines 707 to 712 in 263302d

	invariant(
	element.type === Route,
	`[${
	typeof element.type === "string" ? element.type : element.type.name
	}] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>`
	);

Also thought about monkey patching matchRoutes - but obv want to avoid that if possible.

Opening as a discussion so we can brainstorm a little bit :)

[lukemorales]

@mjackson @ryanflorence @timdorr can we get an answer on this discussion?

[dcramer]

Bumping this as we’d love to support Remix. Suffice to say having a production grade developer experience is critical to tech adoption, so let us know how we can get this across the finish line.

[ryanflorence]

This is planned on the roadmap for both React Router and Remix.

We're working on an RFC. You can follow #9554 for updates.