Merge pull request #9921 from getsentry/feat/component-name-util

feat(utils): Add function to extract relevant component name

Author: 0Calories

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,10 +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 +86,14 @@ function _htmlElementAsString(el: unknown, keyAttrs?: string[]): string {
     return '';
   }
 
+  // @ts-expect-error WINDOW has HTMLElement
+  if (WINDOW.HTMLElement) {
+    // 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 +165,33 @@ 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 {
+  // @ts-expect-error WINDOW has HTMLElement
+  if (!WINDOW.HTMLElement) {
+    return 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;
+}

packages/utils/test/browser.test.ts

@@ -6,6 +6,8 @@ beforeAll(() => {
   const dom = new JSDOM();
   // @ts-expect-error need to override global document
   global.document = dom.window.document;
+  // @ts-expect-error need to add HTMLElement type or it will not be found
+  global.HTMLElement = new JSDOM().window.HTMLElement;
 });
 
 describe('htmlTreeAsString', () => {