fix(react): Use ui category for operations (#4218)

As per the new spec in https://develop.sentry.dev/sdk/performance/span-operations/#js-frameworks, we now want to prefix our react spans operations with `ui`.

Author: AbhiPrasad

packages/react/src/constants.ts

@@ -0,0 +1,5 @@
+export const REACT_RENDER_OP = 'ui.react.render';
+
+export const REACT_UPDATE_OP = 'ui.react.update';
+
+export const REACT_MOUNT_OP = 'ui.react.mount';

packages/react/src/profiler.tsx

@@ -6,6 +6,8 @@ import { timestampWithMs } from '@sentry/utils';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import * as React from 'react';
 
+import { REACT_MOUNT_OP, REACT_RENDER_OP, REACT_UPDATE_OP } from './constants';
+
 export const UNKNOWN_COMPONENT = 'unknown';
 
 const TRACING_GETTER = ({
@@ -36,7 +38,7 @@ function pushActivity(name: string, op: string): number | null {
 
   return (globalTracingIntegration as any).constructor.pushActivity(name, {
     description: `<${name}>`,
-    op: `react.${op}`,
+    op,
   });
 }
 
@@ -115,13 +117,13 @@ class Profiler extends React.Component<ProfilerProps> {
     // eslint-disable-next-line deprecation/deprecation
     if (getTracingIntegration()) {
       // eslint-disable-next-line deprecation/deprecation
-      this._mountActivity = pushActivity(name, 'mount');
+      this._mountActivity = pushActivity(name, REACT_MOUNT_OP);
     } else {
       const activeTransaction = getActiveTransaction();
       if (activeTransaction) {
         this._mountSpan = activeTransaction.startChild({
           description: `<${name}>`,
-          op: 'react.mount',
+          op: REACT_MOUNT_OP,
         });
       }
     }
@@ -158,7 +160,7 @@ class Profiler extends React.Component<ProfilerProps> {
           },
           description: `<${this.props.name}>`,
           endTimestamp: now,
-          op: `react.update`,
+          op: REACT_UPDATE_OP,
           startTimestamp: now,
         });
       }
@@ -176,7 +178,7 @@ class Profiler extends React.Component<ProfilerProps> {
       this._mountSpan.startChild({
         description: `<${name}>`,
         endTimestamp: timestampWithMs(),
-        op: `react.render`,
+        op: REACT_RENDER_OP,
         startTimestamp: this._mountSpan.endTimestamp,
       });
     }
@@ -240,7 +242,7 @@ function useProfiler(
     if (activeTransaction) {
       return activeTransaction.startChild({
         description: `<${name}>`,
-        op: 'react.mount',
+        op: REACT_MOUNT_OP,
       });
     }
 
@@ -257,7 +259,7 @@ function useProfiler(
         mountSpan.startChild({
           description: `<${name}>`,
           endTimestamp: timestampWithMs(),
-          op: `react.render`,
+          op: REACT_RENDER_OP,
           startTimestamp: mountSpan.endTimestamp,
         });
       }

packages/react/test/profiler.test.tsx

@@ -3,6 +3,7 @@ import { render } from '@testing-library/react';
 import { renderHook } from '@testing-library/react-hooks';
 import * as React from 'react';
 
+import { REACT_MOUNT_OP, REACT_RENDER_OP, REACT_UPDATE_OP } from '../src/constants';
 import { UNKNOWN_COMPONENT, useProfiler, withProfiler } from '../src/profiler';
 
 const mockStartChild = jest.fn((spanArgs: SpanContext) => ({ ...spanArgs }));
@@ -76,7 +77,7 @@ describe('withProfiler', () => {
       expect(mockStartChild).toHaveBeenCalledTimes(1);
       expect(mockStartChild).toHaveBeenLastCalledWith({
         description: `<${UNKNOWN_COMPONENT}>`,
-        op: 'react.mount',
+        op: REACT_MOUNT_OP,
       });
     });
   });
@@ -93,7 +94,7 @@ describe('withProfiler', () => {
       expect(mockStartChild).toHaveBeenLastCalledWith({
         description: `<${UNKNOWN_COMPONENT}>`,
         endTimestamp: expect.any(Number),
-        op: 'react.render',
+        op: REACT_RENDER_OP,
         startTimestamp: undefined,
       });
     });
@@ -122,7 +123,7 @@ describe('withProfiler', () => {
         data: { changedProps: ['num'] },
         description: `<${UNKNOWN_COMPONENT}>`,
         endTimestamp: expect.any(Number),
-        op: 'react.update',
+        op: REACT_UPDATE_OP,
         startTimestamp: expect.any(Number),
       });
 
@@ -133,7 +134,7 @@ describe('withProfiler', () => {
         data: { changedProps: ['num'] },
         description: `<${UNKNOWN_COMPONENT}>`,
         endTimestamp: expect.any(Number),
-        op: 'react.update',
+        op: REACT_UPDATE_OP,
         startTimestamp: expect.any(Number),
       });
 
@@ -169,7 +170,7 @@ describe('useProfiler()', () => {
       expect(mockStartChild).toHaveBeenCalledTimes(1);
       expect(mockStartChild).toHaveBeenLastCalledWith({
         description: '<Example>',
-        op: 'react.mount',
+        op: REACT_MOUNT_OP,
       });
     });
   });
@@ -191,7 +192,7 @@ describe('useProfiler()', () => {
       expect(mockStartChild).toHaveBeenLastCalledWith(
         expect.objectContaining({
           description: '<Example>',
-          op: 'react.render',
+          op: REACT_RENDER_OP,
         }),
       );
     });