fix(react): Add React Router Descendant Routes support.

onurtemizkan · onurtemizkan · commit 0324eb7f6b72 · 2024-12-05T15:35:22.000Z
diff --git a/packages/react/src/reactrouterv6-compat-utils.tsx b/packages/react/src/reactrouterv6-compat-utils.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable complexity */
 /* eslint-disable max-lines */
 // Inspired from Donnie McNeal's solution:
 // https://gist.github.com/wontondon/e8c4bdf2888875e4c755712e99279536
@@ -174,13 +175,14 @@ export function createV6CompatibleWrapUseRoutes(origUseRoutes: UseRoutes, versio
     return origUseRoutes;
   }
 
-  let isMountRenderPass: boolean = true;
+  const allRoutes: RouteObject[] = [];
 
   const SentryRoutes: React.FC<{
     children?: React.ReactNode;
     routes: RouteObject[];
     locationArg?: Partial<Location> | string;
   }> = (props: { children?: React.ReactNode; routes: RouteObject[]; locationArg?: Partial<Location> | string }) => {
+    const isMountRenderPass = React.useRef(true);
     const { routes, locationArg } = props;
 
     const Routes = origUseRoutes(routes, locationArg);
@@ -198,11 +200,15 @@ export function createV6CompatibleWrapUseRoutes(origUseRoutes: UseRoutes, versio
       const normalizedLocation =
         typeof stableLocationParam === 'string' ? { pathname: stableLocationParam } : stableLocationParam;
 
-      if (isMountRenderPass) {
-        updatePageloadTransaction(getActiveRootSpan(), normalizedLocation, routes);
-        isMountRenderPass = false;
+      routes.forEach(route => {
+        allRoutes.push(...getChildRoutesRecursively(route));
+      });
+
+      if (isMountRenderPass.current) {
+        updatePageloadTransaction(getActiveRootSpan(), normalizedLocation, routes, undefined, undefined, allRoutes);
+        isMountRenderPass.current = false;
       } else {
-        handleNavigation(normalizedLocation, routes, navigationType, version);
+        handleNavigation(normalizedLocation, routes, navigationType, version, undefined, undefined, allRoutes);
       }
     }, [navigationType, stableLocationParam]);
 
@@ -222,6 +228,7 @@ export function handleNavigation(
   version: V6CompatibleVersion,
   matches?: AgnosticDataRouteMatch,
   basename?: string,
+  allRoutes?: RouteObject[],
 ): void {
   const branches = Array.isArray(matches) ? matches : _matchRoutes(routes, location, basename);
 
@@ -233,8 +240,14 @@ export function handleNavigation(
   if ((navigationType === 'PUSH' || navigationType === 'POP') && branches) {
     const [name, source] = getNormalizedName(routes, location, branches, basename);
 
+    let txnName = name;
+
+    if (locationIsInsideDescendantRoute(location, allRoutes || routes)) {
+      txnName = prefixWithSlash(rebuildRoutePathFromAllRoutes(allRoutes || routes, location));
+    }
+
     startBrowserTracingNavigationSpan(client, {
-      name,
+      name: txnName,
       attributes: {
         [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
         [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
@@ -286,12 +299,93 @@ function sendIndexPath(pathBuilder: string, pathname: string, basename: string):
   return [formattedPath, 'route'];
 }
 
-function pathEndsWithWildcard(path: string, branch: RouteMatch<string>): boolean {
-  return (path.slice(-2) === '/*' && branch.route.children && branch.route.children.length > 0) || false;
+function pathEndsWithWildcard(path: string): boolean {
+  return path.endsWith('*');
 }
 
 function pathIsWildcardAndHasChildren(path: string, branch: RouteMatch<string>): boolean {
-  return (path === '*' && branch.route.children && branch.route.children.length > 0) || false;
+  return (pathEndsWithWildcard(path) && branch.route.children && branch.route.children.length > 0) || false;
+}
+
+// function pathIsWildcardWithNoChildren(path: string, branch: RouteMatch<string>): boolean {
+//   return (pathEndsWithWildcard(path) && (!branch.route.children || branch.route.children.length === 0)) || false;
+// }
+
+function routeIsDescendant(route: RouteObject): boolean {
+  return !!(!route.children && route.element && route.path && route.path.endsWith('/*'));
+}
+
+function locationIsInsideDescendantRoute(location: Location, routes: RouteObject[]): boolean {
+  const matchedRoutes = _matchRoutes(routes, location) as RouteMatch[];
+
+  if (matchedRoutes) {
+    for (const match of matchedRoutes) {
+      if (routeIsDescendant(match.route) && pickSplat(match)) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+}
+
+function getChildRoutesRecursively(route: RouteObject, allRoutes: RouteObject[] = []): RouteObject[] {
+  if (route.children && !route.index) {
+    route.children.forEach(child => {
+      allRoutes.push(...getChildRoutesRecursively(child, allRoutes));
+    });
+  }
+
+  allRoutes.push(route);
+
+  return allRoutes;
+}
+
+function pickPath(match: RouteMatch): string {
+  return trimWildcard(match.route.path || '');
+}
+
+function pickSplat(match: RouteMatch): string {
+  return match.params['*'] || '';
+}
+
+function trimWildcard(path: string): string {
+  return path[path.length - 1] === '*' ? path.slice(0, -1) : path;
+}
+
+function trimSlash(path: string): string {
+  return path[path.length - 1] === '/' ? path.slice(0, -1) : path;
+}
+
+function prefixWithSlash(path: string): string {
+  return path[0] === '/' ? path : `/${path}`;
+}
+
+function rebuildRoutePathFromAllRoutes(allRoutes: RouteObject[], location: Location): string {
+  const matchedRoutes = _matchRoutes(allRoutes, location) as RouteMatch[];
+
+  if (matchedRoutes) {
+    for (const match of matchedRoutes) {
+      if (match.route.path && match.route.path !== '*') {
+        const path = pickPath(match);
+        const strippedPath = stripBasenameFromPathname(location.pathname, prefixWithSlash(match.pathnameBase));
+
+        return trimSlash(
+          trimSlash(path || '') +
+            prefixWithSlash(
+              rebuildRoutePathFromAllRoutes(
+                allRoutes.filter(route => route !== match.route),
+                {
+                  pathname: strippedPath,
+                },
+              ),
+            ),
+        );
+      }
+    }
+  }
+
+  return '';
 }
 
 function getNormalizedName(
@@ -321,7 +415,10 @@ function getNormalizedName(
           pathBuilder += newPath;
 
           // If the path matches the current location, return the path
-          if (basename + branch.pathname === location.pathname) {
+          if (
+            location.pathname.endsWith(basename + branch.pathname) ||
+            location.pathname.endsWith(`${basename}${branch.pathname}/`)
+          ) {
             if (
               // If the route defined on the element is something like
               // <Route path="/stores/:storeId/products/:productId" element={<div>Product</div>} />
@@ -330,13 +427,13 @@ function getNormalizedName(
               // eslint-disable-next-line deprecation/deprecation
               getNumberOfUrlSegments(pathBuilder) !== getNumberOfUrlSegments(branch.pathname) &&
               // We should not count wildcard operators in the url segments calculation
-              pathBuilder.slice(-2) !== '/*'
+              !pathEndsWithWildcard(pathBuilder)
             ) {
               return [(_stripBasename ? '' : basename) + newPath, 'route'];
             }
 
             // if the last character of the pathbuilder is a wildcard and there are children, remove the wildcard
-            if (pathEndsWithWildcard(pathBuilder, branch)) {
+            if (pathIsWildcardAndHasChildren(pathBuilder, branch)) {
               pathBuilder = pathBuilder.slice(0, -1);
             }
 
@@ -347,7 +444,11 @@ function getNormalizedName(
     }
   }
 
-  return [_stripBasename ? stripBasenameFromPathname(location.pathname, basename) : location.pathname, 'url'];
+  const fallbackTransactionName = _stripBasename
+    ? stripBasenameFromPathname(location.pathname, basename)
+    : location.pathname || '/';
+
+  return [fallbackTransactionName, 'url'];
 }
 
 function updatePageloadTransaction(
@@ -356,6 +457,7 @@ function updatePageloadTransaction(
   routes: RouteObject[],
   matches?: AgnosticDataRouteMatch,
   basename?: string,
+  allRoutes?: RouteObject[],
 ): void {
   const branches = Array.isArray(matches)
     ? matches
@@ -364,10 +466,16 @@ function updatePageloadTransaction(
   if (branches) {
     const [name, source] = getNormalizedName(routes, location, branches, basename);
 
-    getCurrentScope().setTransactionName(name);
+    let txnName = name;
+
+    if (locationIsInsideDescendantRoute(location, allRoutes || routes)) {
+      txnName = prefixWithSlash(rebuildRoutePathFromAllRoutes(allRoutes || routes, location));
+    }
+
+    getCurrentScope().setTransactionName(txnName);
 
     if (activeRootSpan) {
-      activeRootSpan.updateName(name);
+      activeRootSpan.updateName(txnName);
       activeRootSpan.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, source);
     }
   }
@@ -387,21 +495,27 @@ export function createV6CompatibleWithSentryReactRouterRouting<P extends Record<
     return Routes;
   }
 
-  let isMountRenderPass: boolean = true;
+  const allRoutes: RouteObject[] = [];
 
   const SentryRoutes: React.FC<P> = (props: P) => {
+    const isMountRenderPass = React.useRef(true);
+
     const location = _useLocation();
     const navigationType = _useNavigationType();
 
     _useEffect(
       () => {
         const routes = _createRoutesFromChildren(props.children) as RouteObject[];
 
-        if (isMountRenderPass) {
-          updatePageloadTransaction(getActiveRootSpan(), location, routes);
-          isMountRenderPass = false;
+        routes.forEach(route => {
+          allRoutes.push(...getChildRoutesRecursively(route));
+        });
+
+        if (isMountRenderPass.current) {
+          updatePageloadTransaction(getActiveRootSpan(), location, routes, undefined, undefined, allRoutes);
+          isMountRenderPass.current = false;
         } else {
-          handleNavigation(location, routes, navigationType, version);
+          handleNavigation(location, routes, navigationType, version, undefined, undefined, allRoutes);
         }
       },
       // `props.children` is purposely not included in the dependency array, because we do not want to re-run this effect
diff --git a/packages/react/src/reactrouterv6.tsx b/packages/react/src/reactrouterv6.tsx
@@ -1,3 +1,7 @@
+/* eslint-disable complexity */
+/* eslint-disable max-lines */
+// Inspired from Donnie McNeal's solution:
+// https://gist.github.com/wontondon/e8c4bdf2888875e4c755712e99279536
 import type { browserTracingIntegration } from '@sentry/browser';
 import type { Integration } from '@sentry/core';
 import type { ReactRouterOptions } from './reactrouterv6-compat-utils';
diff --git a/packages/react/test/reactrouterv6.4.test.tsx b/packages/react/test/reactrouterv6.4.test.tsx
@@ -17,7 +17,7 @@ import {
   matchRoutes,
   useLocation,
   useNavigationType,
-} from 'react-router-6.4';
+} from 'react-router-6';
 
 import { BrowserClient, wrapCreateBrowserRouter } from '../src';
 import { reactRouterV6BrowserTracingIntegration } from '../src/reactrouterv6';
diff --git a/packages/react/test/reactrouterv6.test.tsx b/packages/react/test/reactrouterv6.test.tsx
@@ -491,6 +491,55 @@ describe('reactRouterV6BrowserTracingIntegration', () => {
       });
     });
 
+    it('works with descendant wildcard routes', () => {
+      const client = createMockBrowserClient();
+      setCurrentClient(client);
+
+      client.addIntegration(
+        reactRouterV6BrowserTracingIntegration({
+          useEffect: React.useEffect,
+          useLocation,
+          useNavigationType,
+          createRoutesFromChildren,
+          matchRoutes,
+        }),
+      );
+      const SentryRoutes = withSentryReactRouterV6Routing(Routes);
+
+      const ProjectsRoutes = () => (
+        <SentryRoutes>
+          <Route path=":projectId" element={<div>Project Page</div>}>
+            <Route index element={<div>Project Page Root</div>} />
+            <Route element={<div>Editor</div>}>
+              <Route path="*" element={<Outlet />}>
+                <Route path="views/:viewId" element={<div>View Canvas</div>} />
+              </Route>
+            </Route>
+          </Route>
+          <Route path="*" element={<div>No Match Page</div>} />
+        </SentryRoutes>
+      );
+
+      render(
+        <MemoryRouter initialEntries={['/']}>
+          <SentryRoutes>
+            <Route index element={<Navigate to="/projects/123/views/234" />} />
+            <Route path="projects/*" element={<ProjectsRoutes />}></Route>
+          </SentryRoutes>
+        </MemoryRouter>,
+      );
+
+      expect(mockStartBrowserTracingNavigationSpan).toHaveBeenCalledTimes(1);
+      expect(mockStartBrowserTracingNavigationSpan).toHaveBeenLastCalledWith(expect.any(BrowserClient), {
+        name: '/projects/:projectId/views/:viewId',
+        attributes: {
+          [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'route',
+          [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+          [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v6',
+        },
+      });
+    });
+
     it("updates the scope's `transactionName` on a navigation", () => {
       const client = createMockBrowserClient();
       setCurrentClient(client);
