Create util function to access component names if available

Author: 0Calories

packages/browser/src/integrations/breadcrumbs.ts

@@ -10,8 +10,8 @@ import type {
 } from '@sentry/types/build/types/breadcrumb';
 import {
   addInstrumentationHandler,
+  getElementIdentifier,
   getEventDescription,
-  htmlTreeAsString,
   logger,
   parseUrl,
   safeJoin,
@@ -153,8 +153,8 @@ function _domBreadcrumb(dom: BreadcrumbsOptions['dom']): (handlerData: HandlerDa
     try {
       const event = handlerData.event as Event | Node;
       target = _isEvent(event)
-        ? htmlTreeAsString(event.target, { keyAttrs, maxStringLength })
-        : htmlTreeAsString(event, { keyAttrs, maxStringLength });
+        ? getElementIdentifier(event.target, { keyAttrs, maxStringLength })
+        : getElementIdentifier(event, { keyAttrs, maxStringLength });
     } catch (e) {
       target = '<unknown>';
     }

packages/replay/src/coreHandlers/handleDom.ts

@@ -2,7 +2,7 @@ import { record } from '@sentry-internal/rrweb';
 import type { serializedElementNodeWithId, serializedNodeWithId } from '@sentry-internal/rrweb-snapshot';
 import { NodeType } from '@sentry-internal/rrweb-snapshot';
 import type { Breadcrumb } from '@sentry/types';
-import { htmlTreeAsString } from '@sentry/utils';
+import { getElementIdentifier } from '@sentry/utils';
 
 import type { ReplayContainer } from '../types';
 import { createBreadcrumb } from '../util/createBreadcrumb';
@@ -98,7 +98,7 @@ function getDomTarget(handlerData: DomHandlerData): { target: Node | null; messa
   // Accessing event.target can throw (see getsentry/raven-js#838, #768)
   try {
     target = isClick ? getClickTargetNode(handlerData.event) : getTargetNode(handlerData.event);
-    message = htmlTreeAsString(target, { maxStringLength: 200 }) || '<unknown>';
+    message = getElementIdentifier(target, { maxStringLength: 200 }) || '<unknown>';
   } catch (e) {
     message = '<unknown>';
   }

packages/replay/src/coreHandlers/handleKeyboardEvent.ts

@@ -1,5 +1,5 @@
 import type { Breadcrumb } from '@sentry/types';
-import { htmlTreeAsString } from '@sentry/utils';
+import { getElementIdentifier } from '@sentry/utils';
 
 import type { ReplayContainer } from '../types';
 import { createBreadcrumb } from '../util/createBreadcrumb';
@@ -45,7 +45,7 @@ export function getKeyboardBreadcrumb(event: KeyboardEvent): Breadcrumb | null {
     return null;
   }
 
-  const message = htmlTreeAsString(target, { maxStringLength: 200 }) || '<unknown>';
+  const message = getElementIdentifier(target, { maxStringLength: 200 }) || '<unknown>';
   const baseBreadcrumb = getBaseDomBreadcrumb(target as Node, message);
 
   return createBreadcrumb({

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

@@ -2,7 +2,7 @@
 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 { browserPerformanceTimeOrigin, getElementIdentifier, logger } from '@sentry/utils';
 
 import {
   addClsInstrumentationHandler,
@@ -100,7 +100,7 @@ export function startTrackingInteractions(): void {
         const duration = msToSec(entry.duration);
 
         transaction.startChild({
-          description: htmlTreeAsString(entry.target),
+          description: getElementIdentifier(entry.target),
           op: `ui.interaction.${entry.name}`,
           origin: 'auto.ui.browser.metrics',
           startTimestamp: startTime,
@@ -470,7 +470,7 @@ function _tagMetricInfo(transaction: Transaction): void {
     // Capture Properties of the LCP element that contributes to the LCP.
 
     if (_lcpEntry.element) {
-      transaction.setTag('lcp.element', htmlTreeAsString(_lcpEntry.element));
+      transaction.setTag('lcp.element', getElementIdentifier(_lcpEntry.element));
     }
 
     if (_lcpEntry.id) {
@@ -489,7 +489,7 @@ function _tagMetricInfo(transaction: Transaction): void {
   if (_clsEntry && _clsEntry.sources) {
     __DEBUG_BUILD__ && logger.log('[Measurements] Adding CLS Data');
     _clsEntry.sources.forEach((source, index) =>
-      transaction.setTag(`cls.source.${index + 1}`, htmlTreeAsString(source.node)),
+      transaction.setTag(`cls.source.${index + 1}`, getElementIdentifier(source.node)),
     );
   }
 }

packages/utils/src/browser.ts

@@ -157,3 +157,22 @@ export function getDomElement<E = any>(selector: string): E | null {
   }
   return null;
 }
+
+/**
+ * Given
+ *
+ * Given a child DOM element, returns a query-selector statement describing that
+ * and its ancestors
+ * e.g. [HTMLElement] => body > div > input#foo.btn[name=baz]
+ * @returns generated DOM path
+ */
+export function getElementIdentifier(
+  elem: unknown,
+  options: string[] | { keyAttrs?: string[]; maxStringLength?: number } = {},
+): string {
+  if (elem instanceof HTMLElement && elem.dataset) {
+    return elem.dataset['component'] || htmlTreeAsString(elem, options)
+  }
+
+  return htmlTreeAsString(elem, options)
+ }

packages/utils/src/object.ts

@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { WrappedFunction } from '@sentry/types';
 
-import { htmlTreeAsString } from './browser';
+import { getElementIdentifier } from './browser';
 import { isElement, isError, isEvent, isInstanceOf, isPlainObject, isPrimitive } from './is';
 import { logger } from './logger';
 import { truncate } from './string';
@@ -150,7 +150,7 @@ export function convertToPlainObject<V>(value: V):
 /** Creates a string representation of the target of an `Event` object */
 function serializeEventTarget(target: unknown): string {
   try {
-    return isElement(target) ? htmlTreeAsString(target) : Object.prototype.toString.call(target);
+    return isElement(target) ? getElementIdentifier(target) : Object.prototype.toString.call(target);
   } catch (_oO) {
     return '<unknown>';
   }