feat(browser): Extract and send frontend component name when available

packages/browser/src/integrations/breadcrumbs.ts

@@ -10,6 +10,7 @@ import type {
   Integration,
 } from '@sentry/types';
 import type {
+  Breadcrumb,
   FetchBreadcrumbData,
   FetchBreadcrumbHint,
   XhrBreadcrumbData,
@@ -22,6 +23,7 @@ import {
   addFetchInstrumentationHandler,
   addHistoryInstrumentationHandler,
   addXhrInstrumentationHandler,
+  getComponentName,
   getEventDescription,
   htmlTreeAsString,
   logger,
@@ -143,6 +145,7 @@ function addSentryBreadcrumb(event: SentryEvent): void {
 function _domBreadcrumb(dom: BreadcrumbsOptions['dom']): (handlerData: HandlerDataDom) => void {
   function _innerDomBreadcrumb(handlerData: HandlerDataDom): void {
     let target;
+    let componentName;
     let keyAttrs = typeof dom === 'object' ? dom.serializeAttribute : undefined;
 
     let maxStringLength =
@@ -165,19 +168,30 @@ function _domBreadcrumb(dom: BreadcrumbsOptions['dom']): (handlerData: HandlerDa
       target = _isEvent(event)
         ? htmlTreeAsString(event.target, { keyAttrs, maxStringLength })
         : htmlTreeAsString(event, { keyAttrs, maxStringLength });
+
+      componentName = _isEvent(event)
+        ? getComponentName(event.target)
+        : getComponentName(event);
     } catch (e) {
       target = '<unknown>';
+      componentName = null;
     }
 
     if (target.length === 0) {
       return;
     }
 
+    const breadcrumb: Breadcrumb = {
+      category: `ui.${handlerData.name}`,
+      message: target,
+    }
+
+    if (componentName) {
+      breadcrumb.data = {componentName}
+    }
+
     getCurrentHub().addBreadcrumb(
-      {
-        category: `ui.${handlerData.name}`,
-        message: target,
-      },
+      breadcrumb,
       {
         event: handlerData.event,
         name: handlerData.name,

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/replay/src/coreHandlers/util/getAttributesToRecord.ts

@@ -12,6 +12,7 @@ const ATTRIBUTES_TO_RECORD = new Set([
   'data-testid',
   'disabled',
   'aria-disabled',
+  'data-sentry-component'
 ]);
 
 /**

packages/tracing-internal/src/browser/metrics/index.ts

@@ -1,8 +1,8 @@
 /* eslint-disable max-lines */
 import type { IdleTransaction, Transaction } from '@sentry/core';
 import { getActiveTransaction } from '@sentry/core';
-import type { Measurements } from '@sentry/types';
-import { browserPerformanceTimeOrigin, htmlTreeAsString, logger } from '@sentry/utils';
+import type { Measurements, SpanContext } from '@sentry/types';
+import { browserPerformanceTimeOrigin, getComponentName, htmlTreeAsString, logger } from '@sentry/utils';
 
 import { DEBUG_BUILD } from '../../common/debug-build';
 import {
@@ -102,13 +102,20 @@ export function startTrackingInteractions(): void {
         const startTime = msToSec((browserPerformanceTimeOrigin as number) + entry.startTime);
         const duration = msToSec(entry.duration);
 
-        transaction.startChild({
+        const span: SpanContext = {
           description: htmlTreeAsString(entry.target),
           op: `ui.interaction.${entry.name}`,
           origin: 'auto.ui.browser.metrics',
           startTimestamp: startTime,
           endTimestamp: startTime + duration,
-        });
+        }
+
+        const componentName = getComponentName(entry.target);
+        if (componentName) {
+          span.data = {'ui.component_name': componentName}
+        }
+
+        transaction.startChild(span);
       }
     }
   });

packages/utils/src/browser.ts

@@ -6,6 +6,10 @@ const WINDOW = getGlobalObject<Window>();
 
 const DEFAULT_MAX_STRING_LENGTH = 80;
 
+type SimpleNode = {
+  parentNode: SimpleNode;
+} | null;
+
 /**
  * Given a child DOM element, returns a query-selector statement describing that
  * and its ancestors
@@ -16,9 +20,6 @@ export function htmlTreeAsString(
   elem: unknown,
   options: string[] | { keyAttrs?: string[]; maxStringLength?: number } = {},
 ): string {
-  type SimpleNode = {
-    parentNode: SimpleNode;
-  } | null;
 
   if (!elem) {
     return '<unknown>';
@@ -86,6 +87,11 @@ function _htmlElementAsString(el: unknown, keyAttrs?: string[]): string {
     return '';
   }
 
+  // If using the component name annotation plugin, this value may be available on the DOM node
+  if (elem instanceof HTMLElement && elem.dataset && elem.dataset['sentryComponent']) {
+    return elem.dataset['sentryComponent']
+  }
+
   out.push(elem.tagName.toLowerCase());
 
   // Pairs of attribute keys defined in `serializeAttribute` and their values on element.
@@ -157,3 +163,29 @@ export function getDomElement<E = any>(selector: string): E | null {
   }
   return null;
 }
+
+/**
+ * Given a DOM element, traverses up the tree until it finds the first ancestor node
+ * that has the `data-sentry-component` attribute. This attribute is added at build-time
+ * by projects that have the component name annotation plugin installed.
+ *
+ * @returns a string representation of the component for the provided DOM element, or `null` if not found
+ */
+export function getComponentName(elem: unknown): string | null {
+  let currentElem = elem as SimpleNode;
+  const MAX_TRAVERSE_HEIGHT = 5;
+
+  for (let i = 0; i < MAX_TRAVERSE_HEIGHT; i++) {
+    if (!currentElem) {
+      return null;
+    }
+
+    if (currentElem instanceof HTMLElement && currentElem.dataset['sentryComponent']) {
+      return currentElem.dataset['sentryComponent'];
+    }
+
+    currentElem = currentElem.parentNode
+  }
+
+  return null;
+}