ref(react): Consolidate to use single setName call (#5681)

Remove usage `setMetadata` in favour of adding the source to `setName`

helps us get prepped for #5679

Author: AbhiPrasad

packages/react/src/reactrouter.tsx

@@ -167,8 +167,7 @@ export function withSentryRouting<P extends Record<string, any>, R extends React
 
   const WrappedRoute: React.FC<P> = (props: P) => {
     if (activeTransaction && props && props.computedMatch && props.computedMatch.isExact) {
-      activeTransaction.setName(props.computedMatch.path);
-      activeTransaction.setMetadata({ source: 'route' });
+      activeTransaction.setName(props.computedMatch.path, 'route');
     }
 
     // @ts-ignore Setting more specific React Component typing for `R` generic above

packages/react/src/reactrouterv6.tsx

@@ -145,9 +145,7 @@ function getNormalizedName(
 
 function updatePageloadTransaction(location: Location, routes: RouteObject[]): void {
   if (activeTransaction) {
-    const [name, source] = getNormalizedName(routes, location, _matchRoutes);
-    activeTransaction.setName(name);
-    activeTransaction.setMetadata({ source });
+    activeTransaction.setName(...getNormalizedName(routes, location, _matchRoutes));
   }
 }
 

packages/react/test/reactrouterv4.test.tsx

@@ -11,7 +11,7 @@ describe('React Router v4', () => {
     startTransactionOnPageLoad?: boolean;
     startTransactionOnLocationChange?: boolean;
     routes?: RouteConfig[];
-  }): [jest.Mock, any, { mockSetName: jest.Mock; mockFinish: jest.Mock; mockSetMetadata: jest.Mock }] {
+  }): [jest.Mock, any, { mockSetName: jest.Mock; mockFinish: jest.Mock }] {
     const options = {
       matchPath: _opts && _opts.routes !== undefined ? matchPath : undefined,
       routes: undefined,
@@ -22,16 +22,13 @@ describe('React Router v4', () => {
     const history = createMemoryHistory();
     const mockFinish = jest.fn();
     const mockSetName = jest.fn();
-    const mockSetMetadata = jest.fn();
-    const mockStartTransaction = jest
-      .fn()
-      .mockReturnValue({ setName: mockSetName, finish: mockFinish, setMetadata: mockSetMetadata });
+    const mockStartTransaction = jest.fn().mockReturnValue({ setName: mockSetName, finish: mockFinish });
     reactRouterV4Instrumentation(history, options.routes, options.matchPath)(
       mockStartTransaction,
       options.startTransactionOnPageLoad,
       options.startTransactionOnLocationChange,
     );
-    return [mockStartTransaction, history, { mockSetName, mockFinish, mockSetMetadata }];
+    return [mockStartTransaction, history, { mockSetName, mockFinish }];
   }
 
   it('starts a pageload transaction when instrumentation is started', () => {
@@ -164,7 +161,7 @@ describe('React Router v4', () => {
   });
 
   it('normalizes transaction name with custom Route', () => {
-    const [mockStartTransaction, history, { mockSetName, mockSetMetadata }] = createInstrumentation();
+    const [mockStartTransaction, history, { mockSetName }] = createInstrumentation();
     const SentryRoute = withSentryRouting(Route);
     const { getByText } = render(
       <Router history={history}>
@@ -189,12 +186,11 @@ describe('React Router v4', () => {
       metadata: { source: 'url' },
     });
     expect(mockSetName).toHaveBeenCalledTimes(2);
-    expect(mockSetName).toHaveBeenLastCalledWith('/users/:userid');
-    expect(mockSetMetadata).toHaveBeenLastCalledWith({ source: 'route' });
+    expect(mockSetName).toHaveBeenLastCalledWith('/users/:userid', 'route');
   });
 
   it('normalizes nested transaction names with custom Route', () => {
-    const [mockStartTransaction, history, { mockSetName, mockSetMetadata }] = createInstrumentation();
+    const [mockStartTransaction, history, { mockSetName }] = createInstrumentation();
     const SentryRoute = withSentryRouting(Route);
     const { getByText } = render(
       <Router history={history}>
@@ -219,8 +215,7 @@ describe('React Router v4', () => {
       metadata: { source: 'url' },
     });
     expect(mockSetName).toHaveBeenCalledTimes(2);
-    expect(mockSetName).toHaveBeenLastCalledWith('/organizations/:orgid/v1/:teamid');
-    expect(mockSetMetadata).toHaveBeenLastCalledWith({ source: 'route' });
+    expect(mockSetName).toHaveBeenLastCalledWith('/organizations/:orgid/v1/:teamid', 'route');
 
     act(() => {
       history.push('/organizations/543');
@@ -235,8 +230,7 @@ describe('React Router v4', () => {
       metadata: { source: 'url' },
     });
     expect(mockSetName).toHaveBeenCalledTimes(3);
-    expect(mockSetName).toHaveBeenLastCalledWith('/organizations/:orgid');
-    expect(mockSetMetadata).toHaveBeenLastCalledWith({ source: 'route' });
+    expect(mockSetName).toHaveBeenLastCalledWith('/organizations/:orgid', 'route');
   });
 
   it('matches with route object', () => {

packages/react/test/reactrouterv5.test.tsx

@@ -11,7 +11,7 @@ describe('React Router v5', () => {
     startTransactionOnPageLoad?: boolean;
     startTransactionOnLocationChange?: boolean;
     routes?: RouteConfig[];
-  }): [jest.Mock, any, { mockSetName: jest.Mock; mockFinish: jest.Mock; mockSetMetadata: jest.Mock }] {
+  }): [jest.Mock, any, { mockSetName: jest.Mock; mockFinish: jest.Mock }] {
     const options = {
       matchPath: _opts && _opts.routes !== undefined ? matchPath : undefined,
       routes: undefined,
@@ -22,16 +22,13 @@ describe('React Router v5', () => {
     const history = createMemoryHistory();
     const mockFinish = jest.fn();
     const mockSetName = jest.fn();
-    const mockSetMetadata = jest.fn();
-    const mockStartTransaction = jest
-      .fn()
-      .mockReturnValue({ setName: mockSetName, finish: mockFinish, setMetadata: mockSetMetadata });
+    const mockStartTransaction = jest.fn().mockReturnValue({ setName: mockSetName, finish: mockFinish });
     reactRouterV5Instrumentation(history, options.routes, options.matchPath)(
       mockStartTransaction,
       options.startTransactionOnPageLoad,
       options.startTransactionOnLocationChange,
     );
-    return [mockStartTransaction, history, { mockSetName, mockFinish, mockSetMetadata }];
+    return [mockStartTransaction, history, { mockSetName, mockFinish }];
   }
 
   it('starts a pageload transaction when instrumentation is started', () => {
@@ -164,7 +161,7 @@ describe('React Router v5', () => {
   });
 
   it('normalizes transaction name with custom Route', () => {
-    const [mockStartTransaction, history, { mockSetName, mockSetMetadata }] = createInstrumentation();
+    const [mockStartTransaction, history, { mockSetName }] = createInstrumentation();
     const SentryRoute = withSentryRouting(Route);
 
     const { getByText } = render(
@@ -189,12 +186,11 @@ describe('React Router v5', () => {
       metadata: { source: 'url' },
     });
     expect(mockSetName).toHaveBeenCalledTimes(2);
-    expect(mockSetName).toHaveBeenLastCalledWith('/users/:userid');
-    expect(mockSetMetadata).toHaveBeenLastCalledWith({ source: 'route' });
+    expect(mockSetName).toHaveBeenLastCalledWith('/users/:userid', 'route');
   });
 
   it('normalizes nested transaction names with custom Route', () => {
-    const [mockStartTransaction, history, { mockSetName, mockSetMetadata }] = createInstrumentation();
+    const [mockStartTransaction, history, { mockSetName }] = createInstrumentation();
     const SentryRoute = withSentryRouting(Route);
 
     const { getByText } = render(
@@ -220,8 +216,7 @@ describe('React Router v5', () => {
       metadata: { source: 'url' },
     });
     expect(mockSetName).toHaveBeenCalledTimes(2);
-    expect(mockSetName).toHaveBeenLastCalledWith('/organizations/:orgid/v1/:teamid');
-    expect(mockSetMetadata).toHaveBeenLastCalledWith({ source: 'route' });
+    expect(mockSetName).toHaveBeenLastCalledWith('/organizations/:orgid/v1/:teamid', 'route');
 
     act(() => {
       history.push('/organizations/543');
@@ -236,8 +231,7 @@ describe('React Router v5', () => {
       metadata: { source: 'url' },
     });
     expect(mockSetName).toHaveBeenCalledTimes(3);
-    expect(mockSetName).toHaveBeenLastCalledWith('/organizations/:orgid');
-    expect(mockSetMetadata).toHaveBeenLastCalledWith({ source: 'route' });
+    expect(mockSetName).toHaveBeenLastCalledWith('/organizations/:orgid', 'route');
   });
 
   it('matches with route object', () => {

packages/react/test/reactrouterv6.test.tsx

@@ -20,7 +20,7 @@ describe('React Router v6', () => {
   function createInstrumentation(_opts?: {
     startTransactionOnPageLoad?: boolean;
     startTransactionOnLocationChange?: boolean;
-  }): [jest.Mock, { mockSetName: jest.Mock; mockFinish: jest.Mock; mockSetMetadata: jest.Mock }] {
+  }): [jest.Mock, { mockSetName: jest.Mock; mockFinish: jest.Mock }] {
     const options = {
       matchPath: _opts ? matchPath : undefined,
       startTransactionOnLocationChange: true,
@@ -29,10 +29,7 @@ describe('React Router v6', () => {
     };
     const mockFinish = jest.fn();
     const mockSetName = jest.fn();
-    const mockSetMetadata = jest.fn();
-    const mockStartTransaction = jest
-      .fn()
-      .mockReturnValue({ setName: mockSetName, finish: mockFinish, setMetadata: mockSetMetadata });
+    const mockStartTransaction = jest.fn().mockReturnValue({ setName: mockSetName, finish: mockFinish });
 
     reactRouterV6Instrumentation(
       React.useEffect,
@@ -41,7 +38,7 @@ describe('React Router v6', () => {
       createRoutesFromChildren,
       matchRoutes,
     )(mockStartTransaction, options.startTransactionOnPageLoad, options.startTransactionOnLocationChange);
-    return [mockStartTransaction, { mockSetName, mockFinish, mockSetMetadata }];
+    return [mockStartTransaction, { mockSetName, mockFinish }];
   }
 
   describe('withSentryReactRouterV6Routing', () => {