React Router - Support Lazy-Loaded Routes

[onurtemizkan]

Problem Statement

Ref: #15027

In the current version, lazy-loaded routes in the React Router are not parameterized correctly in the SDK.

We are able to parameterize up to the deepest non-lazily loaded route, and no further as we are not able to reach the full routes tree.

Solution Brainstorm

We can investigate whether we can implement a solution using the currently-unstable "Fog of War" on React Router 7 to get the full routes tree and whether we can traverse it and create parameterized transactions.

• React Router Implementation - Link
• React Router API Reference - Link

[peteragarclover]

As a simple escape hatch solution which could be helpful in the short term (or possibly generally), how about exposing a configuration option to allow people to provide a custom implementation of getNormalizedName() that doesn't rely on the entire routes collection to be populated?

E.g. A naive implementation could be similar to the documented javascript browser tracing integration: https://docs.sentry.io/platforms/javascript/tracing/instrumentation/automatic-instrumentation/#beforestartspan

          // You could use your UI's routing library to find the matching
          // route template here. We don't have one right now, so do some basic
          // parameter replacements.
          name: location.pathname
            .replace(/\/[a-f0-9]{32}/g, "/<hash>")
            .replace(/\/\d+/g, "/<digits>"),

I believe that at least for our use case this should be sufficient to normalize all our routes, so it might be generally useful 🤷

[andreiborza]

@peteragarclover thanks for sharing that, we'll look into that.

[onurtemizkan]

@peteragarclover, @andreiborza - This issue should be resolved by #15039

@peteragarclover, please let us know if there are any further issues after trying the next release.