✨ [RUM-5500] React-router v7 support

[RomanGaignault]

Motivation

Add support for react-router v7 for the rum-react plugin.

Changes

Reuse as much as possible the code from react-router-6, adapt unit test instead of cloning them

Testing

• Local
• Staging
• Unit
• End to end

---

I have gone over the contributing documentation.

[cit-pr-commenter]

Bundles Sizes Evolution

📦 Bundle Name	Base Size	Local Size	𝚫	𝚫%	Status
Rum	145.98 KiB	145.98 KiB	0 B	0.00%	✅
Logs	51.06 KiB	51.06 KiB	0 B	0.00%	✅
Rum Slim	104.77 KiB	104.77 KiB	0 B	0.00%	✅
Worker	24.50 KiB	24.50 KiB	0 B	0.00%	✅

🚀 CPU Performance

Action Name	Base Average Cpu Time (ms)	Local Average Cpu Time (ms)	𝚫
addglobalcontext	0.003	0.002	-0.001
addaction	0.039	0.056	0.017
addtiming	0.001	0.001	0.000
adderror	0.046	0.060	0.014
startstopsessionreplayrecording	0.008	0.026	0.018
startview	0.414	0.523	0.109
logmessage	0.022	0.030	0.008

🧠 Memory Performance

Action Name	Base Consumption Memory (bytes)	Local Consumption Memory (bytes)	𝚫 (bytes)
addglobalcontext	27.33 KiB	28.46 KiB	1.12 KiB
addaction	54.12 KiB	56.95 KiB	2.83 KiB
addtiming	26.15 KiB	25.69 KiB	-466 B
adderror	59.09 KiB	60.51 KiB	1.42 KiB
startstopsessionreplayrecording	24.90 KiB	27.00 KiB	2.10 KiB
startview	413.20 KiB	422.75 KiB	9.55 KiB
logmessage	60.18 KiB	64.74 KiB	4.56 KiB

🔗 RealWorld

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 96.49123% with 2 lines in your changes missing coverage. Please review.

Project coverage is 93.70%. Comparing base (bfffdaf) to head (55599e3).

Files with missing lines	Patch %	Lines
...rum-react/src/domain/reactRouterV7/createRouter.ts	86.66%	2 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #3299   +/-   ##
=======================================
  Coverage   93.70%   93.70%           
=======================================
  Files         290      294    +4     
  Lines        7652     7708   +56     
  Branches     1745     1758   +13     
=======================================
+ Hits         7170     7223   +53     
- Misses        482      485    +3     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[BenoitZugmeyer]

💬 suggestion: ‏

Suggested change

	"react-router-6": "npm:[email protected]",
	"react-router-7": "npm:[email protected]"
	"react-router-dom-6": "npm:[email protected]",
	"react-router-dom-7": "npm:[email protected]"

[BenoitZugmeyer]

💬 suggestion: ‏To help maintenance, we need to avoid code duplication as much as possible.
What about having a structure like this:

domain
  reactRouter
    startReactRouterView.ts
    useRoutes.ts
    createRouterts
    routesComponent.ts
entries
  reactRouterV6.ts
  reactRouterV7.ts

Entry files would look like:

import { wrapCreateRouter } from '../domain/reactRouter/createRouter'
import { createRoutesComponent } from '../domain/reactRouter/routesComponent'
import {
  createBrowserRouter as originalCreateBrowserRouter,
  createHashRouter as originalCreateHashRouter,
  createMemoryRouter as originalCreateMemoryRouter,
  useRoutes as originalUseRoutes,
  useLocation,
} from 'react-router-7'

export const createBrowserRouter = wrapCreateRouter(originalCreateBrowserRouter)
export const createHashRouter = wrapCreateRouter(originalCreateHashRouter)
export const createMemoryRouter = wrapCreateRouter(originalCreateMemoryRouter)
export const useRoutes = wrapUseRoutes({ useRoutes: originalUseRoutes, useLocation, ... })
export const Routes = createRoutesComponent(useRoutes)

And domain files would look like (types might be a bit harder to get well, let's see):

export function wrapCreateRouter(originalCreateRouter) {
  return (routes, options) => registerRouter(originalCreateRouter(routes, options))
}