React Router Instrumentation

[sergical]

Problem Statement

React Router's new instrumentation API provides official hooks for observability. This could simplify our integration
and improve maintainability.

Current potential pain points

• Wrapping createBrowserRouter(), useRoutes(), <Routes> with proxies/HOCs
• Complex lazy route tracking via proxy interception
• Manual server-side .data request detection
• Users must pass React Router functions to integration options

Solution Brainstorm

The opportunity here is to replace Sentry's custom server-side wrapping with React Router's official instrumentation API, making the DX simpler (no manual wrapping) and more maintainable.

Option 1: Feature-Detect & Dual Mode (Recommended)

Detect instrumentation API availability and use it when present, fall back to current wrapping approach otherwise.

Pros: Backward compatible, progressive enhancement
Cons: Maintain both code paths temporarily

Option 2: New Integration

Create new reactRouterInstrumentationIntegration() that only works with instrumentation API.

Pros: Clean separation, simpler implementation
Cons: Requires user migration, version-specific

Option 3: Gradual Migration

Start with server-side (React Router Framework), migrate client-side once adoption is high.

Key Benefits

• Official API (less fragile than wrapping internals)
• Simpler lazy route handling
• Better server-side integration
• Reduced maintenance burden
• Future-proof

Open Questions

1. Support both approaches or require minimum React Router version?
2. How easily can we access router instance?
3. Bundle size impact?

Additional Context

_{Tip: React with 👍 to help prioritize this improvement. Please use comments to provide useful context, avoiding +1 or me too, to help us triage it.}

[linear]

JS-1126