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
- Support both approaches or require minimum React Router version?
- How easily can we access router instance?
- 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.
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
createBrowserRouter(),useRoutes(),<Routes>with proxies/HOCs.datarequest detectionSolution 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
Open Questions
Additional Context
Tip: React with 👍 to help prioritize this improvement. Please use comments to provide useful context, avoiding
+1orme too, to help us triage it.