Merge pull request #9949 from getsentry/feat/react-send-component-name-on-spans

feat(react): Send component name on spans

Author: 0Calories

packages/react/src/profiler.tsx

@@ -63,6 +63,7 @@ class Profiler extends React.Component<ProfilerProps> {
         description: `<${name}>`,
         op: REACT_MOUNT_OP,
         origin: 'auto.ui.react.profiler',
+        data: { 'ui.component_name': name },
       });
     }
   }
@@ -87,6 +88,7 @@ class Profiler extends React.Component<ProfilerProps> {
         this._updateSpan = this._mountSpan.startChild({
           data: {
             changedProps,
+            'ui.component_name': this.props.name,
           },
           description: `<${this.props.name}>`,
           op: REACT_UPDATE_OP,
@@ -120,6 +122,7 @@ class Profiler extends React.Component<ProfilerProps> {
         op: REACT_RENDER_OP,
         origin: 'auto.ui.react.profiler',
         startTimestamp: this._mountSpan.endTimestamp,
+        data: { 'ui.component_name': name },
       });
     }
   }
@@ -184,6 +187,7 @@ function useProfiler(
         description: `<${name}>`,
         op: REACT_MOUNT_OP,
         origin: 'auto.ui.react.profiler',
+        data: { 'ui.component_name': name },
       });
     }
 
@@ -203,6 +207,7 @@ function useProfiler(
           op: REACT_RENDER_OP,
           origin: 'auto.ui.react.profiler',
           startTimestamp: mountSpan.endTimestamp,
+          data: { 'ui.component_name': name },
         });
       }
     };

packages/react/test/profiler.test.tsx

@@ -80,6 +80,7 @@ describe('withProfiler', () => {
         description: `<${UNKNOWN_COMPONENT}>`,
         op: REACT_MOUNT_OP,
         origin: 'auto.ui.react.profiler',
+        data: { 'ui.component_name': 'unknown' },
       });
     });
   });
@@ -99,6 +100,7 @@ describe('withProfiler', () => {
         op: REACT_RENDER_OP,
         origin: 'auto.ui.react.profiler',
         startTimestamp: undefined,
+        data: { 'ui.component_name': 'unknown' },
       });
     });
 
@@ -114,7 +116,6 @@ describe('withProfiler', () => {
       expect(mockStartChild).toHaveBeenCalledTimes(1);
     });
   });
-
   describe('update span', () => {
     it('is created when component is updated', () => {
       const ProfiledComponent = withProfiler((props: { num: number }) => <div>{props.num}</div>);
@@ -126,7 +127,7 @@ describe('withProfiler', () => {
       rerender(<ProfiledComponent num={1} />);
       expect(mockStartChild).toHaveBeenCalledTimes(2);
       expect(mockStartChild).toHaveBeenLastCalledWith({
-        data: { changedProps: ['num'] },
+        data: { changedProps: ['num'], 'ui.component_name': 'unknown' },
         description: `<${UNKNOWN_COMPONENT}>`,
         op: REACT_UPDATE_OP,
         origin: 'auto.ui.react.profiler',
@@ -137,7 +138,7 @@ describe('withProfiler', () => {
       rerender(<ProfiledComponent num={2} />);
       expect(mockStartChild).toHaveBeenCalledTimes(3);
       expect(mockStartChild).toHaveBeenLastCalledWith({
-        data: { changedProps: ['num'] },
+        data: { changedProps: ['num'], 'ui.component_name': 'unknown' },
         description: `<${UNKNOWN_COMPONENT}>`,
         op: REACT_UPDATE_OP,
         origin: 'auto.ui.react.profiler',
@@ -180,6 +181,7 @@ describe('useProfiler()', () => {
         description: '<Example>',
         op: REACT_MOUNT_OP,
         origin: 'auto.ui.react.profiler',
+        data: { 'ui.component_name': 'Example' },
       });
     });
   });
@@ -203,6 +205,7 @@ describe('useProfiler()', () => {
           description: '<Example>',
           op: REACT_RENDER_OP,
           origin: 'auto.ui.react.profiler',
+          data: { 'ui.component_name': 'Example' },
         }),
       );
     });