feat(react): Update scope's transactionName in React Router instrumentations

packages/react/src/reactrouter.tsx

@@ -9,6 +9,7 @@ import {
   SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
   SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,
   getActiveSpan,
+  getCurrentScope,
   getRootSpan,
   spanToJSON,
 } from '@sentry/core';
@@ -226,9 +227,13 @@ export function withSentryRouting<P extends Record<string, any>, R extends React
   const activeRootSpan = getActiveRootSpan();
 
   const WrappedRoute: React.FC<P> = (props: P) => {
-    if (activeRootSpan && props && props.computedMatch && props.computedMatch.isExact) {
-      activeRootSpan.updateName(props.computedMatch.path);
-      activeRootSpan.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'route');
+    if (props && props.computedMatch && props.computedMatch.isExact) {
+      getCurrentScope().setTransactionName(props.computedMatch.path);
+
+      if (activeRootSpan) {
+        activeRootSpan.updateName(props.computedMatch.path);
+        activeRootSpan.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'route');
+      }
     }
 
     // @ts-expect-error Setting more specific React Component typing for `R` generic above

packages/react/src/reactrouterv6.tsx

@@ -13,6 +13,7 @@ import {
   SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,
   getActiveSpan,
   getClient,
+  getCurrentScope,
   getRootSpan,
   spanToJSON,
 } from '@sentry/core';
@@ -198,10 +199,15 @@ function updatePageloadTransaction(
     ? matches
     : (_matchRoutes(routes, location, basename) as unknown as RouteMatch[]);
 
-  if (activeRootSpan && branches) {
+  if (branches) {
     const [name, source] = getNormalizedName(routes, location, branches, basename);
-    activeRootSpan.updateName(name);
-    activeRootSpan.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, source);
+
+    getCurrentScope().setTransactionName(name);
+
+    if (activeRootSpan) {
+      activeRootSpan.updateName(name);
+      activeRootSpan.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, source);
+    }
   }
 }
 

packages/react/test/reactrouterv3.test.tsx

@@ -29,7 +29,6 @@ const mockStartBrowserTracingPageLoadSpan = jest.fn();
 const mockStartBrowserTracingNavigationSpan = jest.fn();
 
 const mockRootSpan = {
-  updateName: jest.fn(),
   setAttribute: jest.fn(),
   getSpanJSON() {
     return { op: 'pageload' };
@@ -115,6 +114,18 @@ describe('browserTracingReactRouterV3', () => {
     });
   });
 
+  it("updates the scope's `transactionName` on pageload", () => {
+    const client = createMockBrowserClient();
+    setCurrentClient(client);
+
+    client.addIntegration(reactRouterV3BrowserTracingIntegration({ history, routes: instrumentationRoutes, match }));
+
+    client.init();
+    render(<Router history={history}>{routes}</Router>);
+
+    expect(getCurrentScope().getScopeData()?.transactionName).toEqual('/');
+  });
+
   it('starts a navigation transaction', () => {
     const client = createMockBrowserClient();
     setCurrentClient(client);
@@ -192,4 +203,23 @@ describe('browserTracingReactRouterV3', () => {
       },
     });
   });
+
+  it("updates the scope's `transactionName` on a navigation", () => {
+    const client = createMockBrowserClient();
+
+    const history = createMemoryHistory();
+    client.addIntegration(reactRouterV3BrowserTracingIntegration({ history, routes: instrumentationRoutes, match }));
+
+    client.init();
+    const { container } = render(<Router history={history}>{routes}</Router>);
+
+    expect(getCurrentScope().getScopeData()?.transactionName).toEqual('/');
+
+    act(() => {
+      history.push('/users/123');
+    });
+    expect(container.innerHTML).toContain('123');
+
+    expect(getCurrentScope().getScopeData()?.transactionName).toEqual('/users/:userid');
+  });
 });

packages/react/test/reactrouterv4.test.tsx

@@ -86,6 +86,18 @@ describe('browserTracingReactRouterV4', () => {
     });
   });
 
+  it("updates the scope's `transactionName` on pageload", () => {
+    const client = createMockBrowserClient();
+    setCurrentClient(client);
+
+    const history = createMemoryHistory();
+    client.addIntegration(reactRouterV4BrowserTracingIntegration({ history }));
+
+    client.init();
+
+    expect(getCurrentScope().getScopeData()?.transactionName).toEqual('/');
+  });
+
   it('starts a navigation transaction', () => {
     const client = createMockBrowserClient();
     setCurrentClient(client);
@@ -341,4 +353,45 @@ describe('browserTracingReactRouterV4', () => {
       },
     });
   });
+
+  it("updates the scope's `transactionName` on a route change", () => {
+    const routes: RouteConfig[] = [
+      {
+        path: '/organizations/:orgid/v1/:teamid',
+      },
+      { path: '/organizations/:orgid' },
+      { path: '/' },
+    ];
+    const client = createMockBrowserClient();
+    setCurrentClient(client);
+
+    const history = createMemoryHistory();
+    client.addIntegration(reactRouterV4BrowserTracingIntegration({ history, routes, matchPath }));
+
+    client.init();
+
+    const SentryRoute = withSentryRouting(Route);
+
+    render(
+      <Router history={history as any}>
+        <Switch>
+          <SentryRoute path="/organizations/:orgid/v1/:teamid" component={() => <div>Team</div>} />
+          <SentryRoute path="/organizations/:orgid" component={() => <div>OrgId</div>} />
+          <SentryRoute path="/" component={() => <div>Home</div>} />
+        </Switch>
+      </Router>,
+    );
+
+    act(() => {
+      history.push('/organizations/1234/v1/758');
+    });
+
+    expect(getCurrentScope().getScopeData().transactionName).toEqual('/organizations/:orgid/v1/:teamid');
+
+    act(() => {
+      history.push('/organizations/1234');
+    });
+
+    expect(getCurrentScope().getScopeData().transactionName).toEqual('/organizations/:orgid');
+  });
 });

packages/react/test/reactrouterv5.test.tsx

@@ -86,6 +86,18 @@ describe('browserTracingReactRouterV5', () => {
     });
   });
 
+  it("updates the scope's `transactionName` on pageload", () => {
+    const client = createMockBrowserClient();
+    setCurrentClient(client);
+
+    const history = createMemoryHistory();
+    client.addIntegration(reactRouterV5BrowserTracingIntegration({ history }));
+
+    client.init();
+
+    expect(getCurrentScope().getScopeData()?.transactionName).toEqual('/');
+  });
+
   it('starts a navigation transaction', () => {
     const client = createMockBrowserClient();
     setCurrentClient(client);
@@ -341,4 +353,45 @@ describe('browserTracingReactRouterV5', () => {
       },
     });
   });
+
+  it("updates the scope's `transactionName` on a route change", () => {
+    const routes: RouteConfig[] = [
+      {
+        path: '/organizations/:orgid/v1/:teamid',
+      },
+      { path: '/organizations/:orgid' },
+      { path: '/' },
+    ];
+    const client = createMockBrowserClient();
+    setCurrentClient(client);
+
+    const history = createMemoryHistory();
+    client.addIntegration(reactRouterV5BrowserTracingIntegration({ history, routes, matchPath }));
+
+    client.init();
+
+    const SentryRoute = withSentryRouting(Route);
+
+    render(
+      <Router history={history as any}>
+        <Switch>
+          <SentryRoute path="/organizations/:orgid/v1/:teamid" component={() => <div>Team</div>} />
+          <SentryRoute path="/organizations/:orgid" component={() => <div>OrgId</div>} />
+          <SentryRoute path="/" component={() => <div>Home</div>} />
+        </Switch>
+      </Router>,
+    );
+
+    act(() => {
+      history.push('/organizations/1234/v1/758');
+    });
+
+    expect(getCurrentScope().getScopeData().transactionName).toBe('/organizations/:orgid/v1/:teamid');
+
+    act(() => {
+      history.push('/organizations/1234');
+    });
+
+    expect(getCurrentScope().getScopeData().transactionName).toBe('/organizations/:orgid');
+  });
 });

packages/react/test/reactrouterv6.4.test.tsx

@@ -122,6 +122,39 @@ describe('reactRouterV6BrowserTracingIntegration (v6.4)', () => {
       });
     });
 
+    it("updates the scope's `transactionName` on a pageload", () => {
+      const client = createMockBrowserClient();
+      setCurrentClient(client);
+
+      client.addIntegration(
+        reactRouterV6BrowserTracingIntegration({
+          useEffect: React.useEffect,
+          useLocation,
+          useNavigationType,
+          createRoutesFromChildren,
+          matchRoutes,
+        }),
+      );
+      const sentryCreateBrowserRouter = wrapCreateBrowserRouter(createMemoryRouter as CreateRouterFunction);
+
+      const router = sentryCreateBrowserRouter(
+        [
+          {
+            path: '/',
+            element: <div>TEST</div>,
+          },
+        ],
+        {
+          initialEntries: ['/'],
+        },
+      );
+
+      // @ts-expect-error router is fine
+      render(<RouterProvider router={router} />);
+
+      expect(getCurrentScope().getScopeData()?.transactionName).toEqual('/');
+    });
+
     it('starts a navigation transaction', () => {
       const client = createMockBrowserClient();
       setCurrentClient(client);
@@ -590,5 +623,42 @@ describe('reactRouterV6BrowserTracingIntegration (v6.4)', () => {
         },
       });
     });
+
+    it("updates the scope's `transactionName` on a navigation", () => {
+      const client = createMockBrowserClient();
+      setCurrentClient(client);
+
+      client.addIntegration(
+        reactRouterV6BrowserTracingIntegration({
+          useEffect: React.useEffect,
+          useLocation,
+          useNavigationType,
+          createRoutesFromChildren,
+          matchRoutes,
+        }),
+      );
+      const sentryCreateBrowserRouter = wrapCreateBrowserRouter(createMemoryRouter as CreateRouterFunction);
+
+      const router = sentryCreateBrowserRouter(
+        [
+          {
+            path: '/',
+            element: <Navigate to="/about" />,
+          },
+          {
+            path: 'about',
+            element: <div>About</div>,
+          },
+        ],
+        {
+          initialEntries: ['/'],
+        },
+      );
+
+      // @ts-expect-error router is fine
+      render(<RouterProvider router={router} />);
+
+      expect(getCurrentScope().getScopeData()?.transactionName).toEqual('/about');
+    });
   });
 });