ReactRouter 4 and 5

Author: Lms24

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/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');
+  });
 });