✨replace react-router wildcard routes with their actual path name

packages/rum-react/src/domain/reactRouterV6/createRouter.spec.ts

@@ -49,7 +49,7 @@ describe('createRouter', () => {
   it('creates a new view with the fallback route', async () => {
     startViewSpy.calls.reset()
     await router.navigate('/non-existent')
-    expect(startViewSpy).toHaveBeenCalledWith('/*')
+    expect(startViewSpy).toHaveBeenCalledWith('/non-existent')
   })
 
   it('does not create a new view when the router navigates to the same URL', async () => {

packages/rum-react/src/domain/reactRouterV6/startReactRouterView.spec.ts

@@ -81,4 +81,18 @@ describe('computeViewName', () => {
       ] as RouteMatch[])
     ).toBe('/foo/bar/:id/')
   })
+
+  it('replaces match-all routes with the actual path', () => {
+    expect(
+      computeViewName([
+        { route: { path: '/foo' } },
+        {
+          params: { '*': 'bar' },
+          pathname: '/bar',
+          pathnameBase: '/',
+          route: { path: '*' },
+        },
+      ] as RouteMatch[])
+    ).toBe('/foo/bar')
+  })
 })

packages/rum-react/src/domain/reactRouterV6/startReactRouterView.ts

@@ -26,12 +26,18 @@ export function computeViewName(routeMatches: RouteMatch[]) {
     }
 
     if (path.startsWith('/')) {
+      // Absolute path, replace the current view name
       viewName = path
     } else {
+      // Relative path, append to the current view name
       if (!viewName.endsWith('/')) {
         viewName += '/'
       }
-      viewName += path
+      if (path === '*') {
+        viewName += routeMatch.params['*']!
+      } else {
+        viewName += path
+      }
     }
   }
 

sandbox/react-app/main.tsx

@@ -29,6 +29,10 @@ const router = createBrowserRouter(
           path: 'test-error-boundary',
           Component: TestErrorBoundaryPage,
         },
+        {
+          path: '*',
+          Component: WildCardPage,
+        },
       ],
     },
   ],
@@ -65,6 +69,11 @@ function UserPage() {
   return <h1>User {id}</h1>
 }
 
+function WildCardPage() {
+  const path = useParams()['*']
+  return <h1>Wildcard: {path}</h1>
+}
+
 export function TestErrorBoundaryPage() {
   const [shouldThrow, setShouldThrow] = useState(false)
 

tsconfig.base.json

@@ -16,7 +16,9 @@
 
     "paths": {
       "@datadog/browser-core": ["./packages/core/src"],
-      "@datadog/browser-rum-core": ["./packages/rum-core/src"]
+      "@datadog/browser-rum-core": ["./packages/rum-core/src"],
+      "@datadog/browser-rum-react": ["./packages/rum-react/src/entries/main"],
+      "@datadog/browser-rum-react/react-router-v6": ["./packages/rum-react/src/entries/reactRouterV6"]
     }
   }
 }