Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Dec 20, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
da1ccb2
feat(utils): Add function to extract relevant component name
0Calories Dec 19, 2023
5bc6f96
Add HTMLElement type to tests to prevent failures
0Calories Dec 19, 2023
61094d4
Check if HTMLElement exists first
0Calories Dec 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 42 additions & 4 deletions packages/utils/src/browser.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>';
}
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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++) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The issue with this traversing is that it might pick the wrong element, maybe we should do 2-3 to be even more conservative.

But sticky with 5 sounds fine, we can test more in different codebases and see what it looks like.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I left a comment on the first PR talking about this as well. Looking to test it with 5 at the moment, and we can decrease the value later on if we find that it is too aggressive

if (!currentElem) {
return null;
}

if (currentElem instanceof HTMLElement && currentElem.dataset['sentryComponent']) {
return currentElem.dataset['sentryComponent'];
}

currentElem = currentElem.parentNode;
}

return null;
}
2 changes: 2 additions & 0 deletions packages/utils/test/browser.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down