feat(react): Use initialEntries in wrapped routers.

Author: onurtemizkan

packages/react/src/reactrouterv6-compat-utils.tsx

@@ -83,17 +83,39 @@ export function createV6CompatibleWrapCreateBrowserRouter<
   // `opts` for createBrowserHistory and createMemoryHistory are different, but also not relevant for us at the moment.
   // `basename` is the only option that is relevant for us, and it is the same for all.
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return function (routes: RouteObject[], opts?: Record<string, any> & { basename?: string }): TRouter {
+  return function (
+    routes: RouteObject[],
+    opts?: Record<string, any> & {
+      basename?: string;
+      initialEntries?: (string | { pathname: string })[];
+      initialIndex?: number;
+    },
+  ): TRouter {
     const router = createRouterFunction(routes, opts);
     const basename = opts && opts.basename;
 
     const activeRootSpan = getActiveRootSpan();
 
-    // The initial load ends when `createBrowserRouter` is called.
-    // This is the earliest convenient time to update the transaction name.
-    // Callbacks to `router.subscribe` are not called for the initial load.
+    const initialEntries = opts && opts.initialEntries;
+    const initialIndex = opts && opts.initialIndex;
+
+    const hasOnlyOneInitialEntry = initialEntries && initialEntries.length === 1;
+    const hasIndexedEntry = initialIndex !== undefined && initialEntries && initialEntries[initialIndex];
+
+    const initialEntry = hasOnlyOneInitialEntry
+      ? initialEntries[0]
+      : hasIndexedEntry
+        ? initialEntries[initialIndex]
+        : undefined;
+
+    const location = initialEntry
+      ? typeof initialEntry === 'string'
+        ? { pathname: initialEntry }
+        : initialEntry
+      : router.state.location;
+
     if (router.state.historyAction === 'POP' && activeRootSpan) {
-      updatePageloadTransaction(activeRootSpan, router.state.location, routes, undefined, basename);
+      updatePageloadTransaction(activeRootSpan, location, routes, undefined, basename);
     }
 
     router.subscribe((state: RouterState) => {

packages/react/test/reactrouterv6.test.tsx

@@ -13,18 +13,23 @@ import {
   Navigate,
   Outlet,
   Route,
+  RouterProvider,
   Routes,
+  createMemoryRouter,
   createRoutesFromChildren,
   matchRoutes,
   useLocation,
   useNavigationType,
   useRoutes,
 } from 'react-router-6';
 
+import type { RouteObject } from 'react-router-6';
+
 import { BrowserClient } from '../src';
 import {
   reactRouterV6BrowserTracingIntegration,
   withSentryReactRouterV6Routing,
+  wrapCreateBrowserRouterV6,
   wrapUseRoutesV6,
 } from '../src/reactrouterv6';
 
@@ -79,6 +84,90 @@ describe('reactRouterV6BrowserTracingIntegration', () => {
     getCurrentScope().setClient(undefined);
   });
 
+  describe('wrapCreateBrowserRouterV6 - createMemoryRouter', () => {
+    it('starts a pageload transaction', () => {
+      const client = createMockBrowserClient();
+      setCurrentClient(client);
+
+      client.addIntegration(
+        reactRouterV6BrowserTracingIntegration({
+          useEffect: React.useEffect,
+          useLocation,
+          useNavigationType,
+          createRoutesFromChildren,
+          matchRoutes,
+        }),
+      );
+
+      const routes: RouteObject[] = [
+        {
+          path: '/',
+          element: <div>Home</div>,
+        },
+        {
+          path: '/about',
+          element: <div>About</div>,
+        },
+      ];
+
+      const wrappedCreateMemoryRouter = wrapCreateBrowserRouterV6(createMemoryRouter);
+
+      const router = wrappedCreateMemoryRouter(routes, {
+        initialEntries: ['/', '/about'],
+        initialIndex: 1,
+      });
+
+      render(<RouterProvider router={router} />);
+
+      expect(mockStartBrowserTracingPageLoadSpan).toHaveBeenCalledTimes(1);
+      expect(mockStartBrowserTracingPageLoadSpan).toHaveBeenLastCalledWith(expect.any(BrowserClient), {
+        name: '/',
+        attributes: {
+          [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+          [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
+          [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.react.reactrouter_v6',
+        },
+      });
+    });
+
+    it('updates the transaction name on a pageload', () => {
+      const client = createMockBrowserClient();
+      setCurrentClient(client);
+
+      client.addIntegration(
+        reactRouterV6BrowserTracingIntegration({
+          useEffect: React.useEffect,
+          useLocation,
+          useNavigationType,
+          createRoutesFromChildren,
+          matchRoutes,
+        }),
+      );
+
+      const routes: RouteObject[] = [
+        {
+          path: '/',
+          element: <div>Home</div>,
+        },
+        {
+          path: '/about',
+          element: <div>About</div>,
+        },
+      ];
+
+      const wrappedCreateMemoryRouter = wrapCreateBrowserRouterV6(createMemoryRouter);
+
+      const router = wrappedCreateMemoryRouter(routes, {
+        initialEntries: ['/', '/about'],
+        initialIndex: 2,
+      });
+
+      render(<RouterProvider router={router} />);
+
+      expect(mockRootSpan.updateName).toHaveBeenLastCalledWith('/about');
+    });
+  });
+
   describe('withSentryReactRouterV6Routing', () => {
     it('starts a pageload transaction', () => {
       const client = createMockBrowserClient();