fix(react): Don't trim index route / when getting pathname (#17985)

Currently, the test in this PR fail:
#17789

Root routes can yield an empty transaction name, causing `<unlabeled
transaction>` instead of `/` as the transaction name for the root.
This happens when the router includes children routes with `index:
true`.

The route matching is also depending on the `allRoutes` Set. The
`allRoutes` Set include the children routes twice (once as children of
the route and once as a root element of the Set). When only including
them once, it works but parametrization does not work anymore.
--> First I thought, this duplication is the cause but probably it isn't

## What’s broken
Root cause is in `sendIndexPath(...)`:
- Mis-parenthesized ternary picks `stripBasenameFromPathname` instead of
`pathBuilder`.
  - Trimming turns `/` into an empty string.

Author: s1gr1d

dev-packages/e2e-tests/test-applications/react-router-7-cross-usage/src/index.tsx

@@ -89,6 +89,14 @@ const ProjectsRoutes = () => (
 );
 
 const router = sentryCreateBrowserRouter([
+  {
+    path: '/post/:post',
+    element: <div>Post</div>,
+    children: [
+      { index: true, element: <div>Post Index</div> },
+      { path: '/post/:post/related', element: <div>Related Posts</div> },
+    ],
+  },
   {
     children: [
       {

packages/react/src/reactrouter-compat-utils/instrumentation.tsx

@@ -106,7 +106,8 @@ export interface ReactRouterOptions {
 type V6CompatibleVersion = '6' | '7';
 
 // Keeping as a global variable for cross-usage in multiple functions
-const allRoutes = new Set<RouteObject>();
+// only exported for testing purposes
+export const allRoutes = new Set<RouteObject>();
 
 /**
  * Processes resolved routes by adding them to allRoutes and checking for nested async handlers.
@@ -679,7 +680,8 @@ export function handleNavigation(opts: {
   }
 }
 
-function addRoutesToAllRoutes(routes: RouteObject[]): void {
+/* Only exported for testing purposes */
+export function addRoutesToAllRoutes(routes: RouteObject[]): void {
   routes.forEach(route => {
     const extractedChildRoutes = getChildRoutesRecursively(route);
 

packages/react/src/reactrouter-compat-utils/utils.ts

@@ -45,21 +45,27 @@ export function pathIsWildcardAndHasChildren(path: string, branch: RouteMatch<st
   return (pathEndsWithWildcard(path) && !!branch.route.children?.length) || false;
 }
 
-function routeIsDescendant(route: RouteObject): boolean {
+/** Check if route is in descendant route (<Routes> within <Routes>) */
+export function routeIsDescendant(route: RouteObject): boolean {
   return !!(!route.children && route.element && route.path?.endsWith('/*'));
 }
 
 function sendIndexPath(pathBuilder: string, pathname: string, basename: string): [string, TransactionSource] {
-  const reconstructedPath = pathBuilder || _stripBasename ? stripBasenameFromPathname(pathname, basename) : pathname;
-
-  const formattedPath =
-    // If the path ends with a slash, remove it
-    reconstructedPath[reconstructedPath.length - 1] === '/'
-      ? reconstructedPath.slice(0, -1)
-      : // If the path ends with a wildcard, remove it
-        reconstructedPath.slice(-2) === '/*'
-        ? reconstructedPath.slice(0, -1)
-        : reconstructedPath;
+  const reconstructedPath =
+    pathBuilder && pathBuilder.length > 0
+      ? pathBuilder
+      : _stripBasename
+        ? stripBasenameFromPathname(pathname, basename)
+        : pathname;
+
+  let formattedPath =
+    // If the path ends with a wildcard suffix, remove both the slash and the asterisk
+    reconstructedPath.slice(-2) === '/*' ? reconstructedPath.slice(0, -2) : reconstructedPath;
+
+  // If the path ends with a slash, remove it (but keep single '/')
+  if (formattedPath.length > 1 && formattedPath[formattedPath.length - 1] === '/') {
+    formattedPath = formattedPath.slice(0, -1);
+  }
 
   return [formattedPath, 'route'];
 }

packages/react/test/reactrouter-compat-utils/instrumentation.test.tsx

@@ -10,6 +10,7 @@ import {
   createReactRouterV6CompatibleTracingIntegration,
   updateNavigationSpan,
 } from '../../src/reactrouter-compat-utils';
+import { addRoutesToAllRoutes, allRoutes } from '../../src/reactrouter-compat-utils/instrumentation';
 import type { Location, RouteObject } from '../../src/types';
 
 const mockUpdateName = vi.fn();
@@ -47,6 +48,7 @@ vi.mock('../../src/reactrouter-compat-utils/utils', () => ({
   initializeRouterUtils: vi.fn(),
   getGlobalLocation: vi.fn(() => ({ pathname: '/test', search: '', hash: '' })),
   getGlobalPathname: vi.fn(() => '/test'),
+  routeIsDescendant: vi.fn(() => false),
 }));
 
 vi.mock('../../src/reactrouter-compat-utils/lazy-routes', () => ({
@@ -141,3 +143,193 @@ describe('reactrouter-compat-utils/instrumentation', () => {
     });
   });
 });
+
+describe('addRoutesToAllRoutes', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.resetModules();
+    allRoutes.clear();
+  });
+
+  it('should add simple routes without nesting', () => {
+    const routes = [
+      { path: '/', element: <div /> },
+      { path: '/user/:id', element: <div /> },
+      { path: '/group/:group/:user?', element: <div /> },
+    ];
+
+    addRoutesToAllRoutes(routes);
+    const allRoutesArr = Array.from(allRoutes);
+
+    expect(allRoutesArr).toHaveLength(3);
+    expect(allRoutesArr).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ path: '/' }),
+        expect.objectContaining({ path: '/user/:id' }),
+        expect.objectContaining({ path: '/group/:group/:user?' }),
+      ]),
+    );
+
+    // Verify exact structure matches manual testing results
+    allRoutesArr.forEach(route => {
+      expect(route).toHaveProperty('element');
+      expect(route.element).toHaveProperty('props');
+    });
+  });
+
+  it('should handle complex nested routes with multiple levels', () => {
+    const routes = [
+      { path: '/', element: <div /> },
+      { path: '/user/:id', element: <div /> },
+      { path: '/group/:group/:user?', element: <div /> },
+      {
+        path: '/v1/post/:post',
+        element: <div />,
+        children: [
+          { path: 'featured', element: <div /> },
+          { path: '/v1/post/:post/related', element: <div /> },
+          {
+            element: <div>More Nested Children</div>,
+            children: [{ path: 'edit', element: <div>Edit Post</div> }],
+          },
+        ],
+      },
+      {
+        path: '/v2/post/:post',
+        element: <div />,
+        children: [
+          { index: true, element: <div /> },
+          { path: 'featured', element: <div /> },
+          { path: '/v2/post/:post/related', element: <div /> },
+        ],
+      },
+    ];
+
+    addRoutesToAllRoutes(routes);
+    const allRoutesArr = Array.from(allRoutes);
+
+    expect(allRoutesArr).toEqual([
+      { path: '/', element: <div /> },
+      { path: '/user/:id', element: <div /> },
+      { path: '/group/:group/:user?', element: <div /> },
+      // v1 routes ----
+      {
+        path: '/v1/post/:post',
+        element: <div />,
+        children: [
+          { element: <div />, path: 'featured' },
+          { element: <div />, path: '/v1/post/:post/related' },
+          { children: [{ element: <div>Edit Post</div>, path: 'edit' }], element: <div>More Nested Children</div> },
+        ],
+      },
+      { element: <div />, path: 'featured' },
+      { element: <div />, path: '/v1/post/:post/related' },
+      { children: [{ element: <div>Edit Post</div>, path: 'edit' }], element: <div>More Nested Children</div> },
+      { element: <div>Edit Post</div>, path: 'edit' },
+      // v2 routes ---
+      {
+        path: '/v2/post/:post',
+        element: expect.objectContaining({ type: 'div', props: {} }),
+        children: [
+          { element: <div />, index: true },
+          { element: <div />, path: 'featured' },
+          { element: <div />, path: '/v2/post/:post/related' },
+        ],
+      },
+      { element: <div />, index: true },
+      { element: <div />, path: 'featured' },
+      { element: <div />, path: '/v2/post/:post/related' },
+    ]);
+  });
+
+  it('should handle routes with nested index routes', () => {
+    const routes = [
+      {
+        path: '/dashboard',
+        element: <div />,
+        children: [
+          { index: true, element: <div>Dashboard Index</div> },
+          { path: 'settings', element: <div>Settings</div> },
+        ],
+      },
+    ];
+
+    addRoutesToAllRoutes(routes);
+    const allRoutesArr = Array.from(allRoutes);
+
+    expect(allRoutesArr).toEqual([
+      {
+        path: '/dashboard',
+        element: expect.objectContaining({ type: 'div' }),
+        children: [
+          { element: <div>Dashboard Index</div>, index: true },
+          { element: <div>Settings</div>, path: 'settings' },
+        ],
+      },
+      { element: <div>Dashboard Index</div>, index: true },
+      { element: <div>Settings</div>, path: 'settings' },
+    ]);
+  });
+
+  it('should handle deeply nested routes with layout wrappers', () => {
+    const routes = [
+      {
+        path: '/',
+        element: <div>Root</div>,
+        children: [
+          { path: 'dashboard', element: <div>Dashboard</div> },
+          {
+            element: <div>AuthLayout</div>,
+            children: [{ path: 'login', element: <div>Login</div> }],
+          },
+        ],
+      },
+    ];
+
+    addRoutesToAllRoutes(routes);
+    const allRoutesArr = Array.from(allRoutes);
+
+    expect(allRoutesArr).toEqual([
+      {
+        path: '/',
+        element: expect.objectContaining({ type: 'div', props: { children: 'Root' } }),
+        children: [
+          {
+            path: 'dashboard',
+            element: expect.objectContaining({ type: 'div', props: { children: 'Dashboard' } }),
+          },
+          {
+            element: expect.objectContaining({ type: 'div', props: { children: 'AuthLayout' } }),
+            children: [
+              {
+                path: 'login',
+                element: expect.objectContaining({ type: 'div', props: { children: 'Login' } }),
+              },
+            ],
+          },
+        ],
+      },
+      { element: <div>Dashboard</div>, path: 'dashboard' },
+      {
+        children: [{ element: <div>Login</div>, path: 'login' }],
+        element: <div>AuthLayout</div>,
+      },
+      { element: <div>Login</div>, path: 'login' },
+    ]);
+  });
+
+  it('should not duplicate routes when called multiple times', () => {
+    const routes = [
+      { path: '/', element: <div /> },
+      { path: '/about', element: <div /> },
+    ];
+
+    addRoutesToAllRoutes(routes);
+    const firstCount = allRoutes.size;
+
+    addRoutesToAllRoutes(routes);
+    const secondCount = allRoutes.size;
+
+    expect(firstCount).toBe(secondCount);
+  });
+});

packages/react/test/reactrouter-compat-utils/utils.test.ts

@@ -436,7 +436,7 @@ describe('reactrouter-compat-utils/utils', () => {
       ];
 
       const result = getNormalizedName(routes, location, branches, '');
-      expect(result).toEqual(['', 'route']);
+      expect(result).toEqual(['/', 'route']);
     });
 
     it('should handle simple route path', () => {