@datadog/browser-rum-react and @react-router/dev/routes integration for react-router v7

[jdnichollsc]

trafficstars

What are you trying to achieve and what is your issue? Please describe. We are working on a SSR FrontEnd project using React Router v7 (Framework mode) with route definitions being handled via @react-router/dev/routes (see below screenshot).

We are currently integrating @datadog/browser-rum-react for tracking route changes and user interactions. However, we are unsure how to properly integrate Datadog’s RUM routing instrumentation with this setup since routes are defined programmatically using layout(), index(), and route() helpers.

There’s limited guidance on how datadogRum’s routing instrumentation (e.g., datadogRum.startView()) should be integrated in this dynamic routing setup.

Describe the solution you'd like We would like a recommended approach for connecting Datadog’s RUM SDK with this kind of route configuration. Specifically: • How should we hook into route changes when using @react-router/dev/routes? • What is the suggested way to automatically track navigation and page views when routes are defined in this centralized config file?

Describe alternatives you've considered Using @datadog/browser-rum package directly for now.

Thanks folks for your support!

[BenoitZugmeyer]

We don't have a good solution for this currently. We only support the "data" and "declarative" modes.

Navigation and page views are tracked automatically out of the box if you don't use the @datadog/browser-rum-react or at least don't use { router: true }. The only drawback is view names will be based on the URL path (ex: /user/foo) instead of the route path (ex: /user/:id).

We will evaluate how we can provide a better experience for framework mode.

[jdnichollsc]

@BenoitZugmeyer thanks a lot mate, I implemented the below for dd-trace, maybe your team can use that for inspiration as well: https://github.com/DataDog/dd-trace-js/issues/3283#issuecomment-2752220263