Skip to content

Commit 8be4955

Browse files
committed
Create util function to access component names if available
1 parent ea02ee5 commit 8be4955

File tree

6 files changed

+32
-13
lines changed

6 files changed

+32
-13
lines changed

packages/browser/src/integrations/breadcrumbs.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ import type {
1010
} from '@sentry/types/build/types/breadcrumb';
1111
import {
1212
addInstrumentationHandler,
13+
getElementIdentifier,
1314
getEventDescription,
14-
htmlTreeAsString,
1515
logger,
1616
parseUrl,
1717
safeJoin,
@@ -153,8 +153,8 @@ function _domBreadcrumb(dom: BreadcrumbsOptions['dom']): (handlerData: HandlerDa
153153
try {
154154
const event = handlerData.event as Event | Node;
155155
target = _isEvent(event)
156-
? htmlTreeAsString(event.target, { keyAttrs, maxStringLength })
157-
: htmlTreeAsString(event, { keyAttrs, maxStringLength });
156+
? getElementIdentifier(event.target, { keyAttrs, maxStringLength })
157+
: getElementIdentifier(event, { keyAttrs, maxStringLength });
158158
} catch (e) {
159159
target = '<unknown>';
160160
}

packages/replay/src/coreHandlers/handleDom.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { record } from '@sentry-internal/rrweb';
22
import type { serializedElementNodeWithId, serializedNodeWithId } from '@sentry-internal/rrweb-snapshot';
33
import { NodeType } from '@sentry-internal/rrweb-snapshot';
44
import type { Breadcrumb } from '@sentry/types';
5-
import { htmlTreeAsString } from '@sentry/utils';
5+
import { getElementIdentifier } from '@sentry/utils';
66

77
import type { ReplayContainer } from '../types';
88
import { createBreadcrumb } from '../util/createBreadcrumb';
@@ -98,7 +98,7 @@ function getDomTarget(handlerData: DomHandlerData): { target: Node | null; messa
9898
// Accessing event.target can throw (see getsentry/raven-js#838, #768)
9999
try {
100100
target = isClick ? getClickTargetNode(handlerData.event) : getTargetNode(handlerData.event);
101-
message = htmlTreeAsString(target, { maxStringLength: 200 }) || '<unknown>';
101+
message = getElementIdentifier(target, { maxStringLength: 200 }) || '<unknown>';
102102
} catch (e) {
103103
message = '<unknown>';
104104
}

packages/replay/src/coreHandlers/handleKeyboardEvent.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Breadcrumb } from '@sentry/types';
2-
import { htmlTreeAsString } from '@sentry/utils';
2+
import { getElementIdentifier } from '@sentry/utils';
33

44
import type { ReplayContainer } from '../types';
55
import { createBreadcrumb } from '../util/createBreadcrumb';
@@ -45,7 +45,7 @@ export function getKeyboardBreadcrumb(event: KeyboardEvent): Breadcrumb | null {
4545
return null;
4646
}
4747

48-
const message = htmlTreeAsString(target, { maxStringLength: 200 }) || '<unknown>';
48+
const message = getElementIdentifier(target, { maxStringLength: 200 }) || '<unknown>';
4949
const baseBreadcrumb = getBaseDomBreadcrumb(target as Node, message);
5050

5151
return createBreadcrumb({

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import type { IdleTransaction, Transaction } from '@sentry/core';
33
import { getActiveTransaction } from '@sentry/core';
44
import type { Measurements } from '@sentry/types';
5-
import { browserPerformanceTimeOrigin, htmlTreeAsString, logger } from '@sentry/utils';
5+
import { browserPerformanceTimeOrigin, getElementIdentifier, logger } from '@sentry/utils';
66

77
import {
88
addClsInstrumentationHandler,
@@ -100,7 +100,7 @@ export function startTrackingInteractions(): void {
100100
const duration = msToSec(entry.duration);
101101

102102
transaction.startChild({
103-
description: htmlTreeAsString(entry.target),
103+
description: getElementIdentifier(entry.target),
104104
op: `ui.interaction.${entry.name}`,
105105
origin: 'auto.ui.browser.metrics',
106106
startTimestamp: startTime,
@@ -470,7 +470,7 @@ function _tagMetricInfo(transaction: Transaction): void {
470470
// Capture Properties of the LCP element that contributes to the LCP.
471471

472472
if (_lcpEntry.element) {
473-
transaction.setTag('lcp.element', htmlTreeAsString(_lcpEntry.element));
473+
transaction.setTag('lcp.element', getElementIdentifier(_lcpEntry.element));
474474
}
475475

476476
if (_lcpEntry.id) {
@@ -489,7 +489,7 @@ function _tagMetricInfo(transaction: Transaction): void {
489489
if (_clsEntry && _clsEntry.sources) {
490490
__DEBUG_BUILD__ && logger.log('[Measurements] Adding CLS Data');
491491
_clsEntry.sources.forEach((source, index) =>
492-
transaction.setTag(`cls.source.${index + 1}`, htmlTreeAsString(source.node)),
492+
transaction.setTag(`cls.source.${index + 1}`, getElementIdentifier(source.node)),
493493
);
494494
}
495495
}

packages/utils/src/browser.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,3 +157,22 @@ export function getDomElement<E = any>(selector: string): E | null {
157157
}
158158
return null;
159159
}
160+
161+
/**
162+
* Given
163+
*
164+
* Given a child DOM element, returns a query-selector statement describing that
165+
* and its ancestors
166+
* e.g. [HTMLElement] => body > div > input#foo.btn[name=baz]
167+
* @returns generated DOM path
168+
*/
169+
export function getElementIdentifier(
170+
elem: unknown,
171+
options: string[] | { keyAttrs?: string[]; maxStringLength?: number } = {},
172+
): string {
173+
if (elem instanceof HTMLElement && elem.dataset) {
174+
return elem.dataset['component'] || htmlTreeAsString(elem, options)
175+
}
176+
177+
return htmlTreeAsString(elem, options)
178+
}

packages/utils/src/object.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
/* eslint-disable @typescript-eslint/no-explicit-any */
33
import type { WrappedFunction } from '@sentry/types';
44

5-
import { htmlTreeAsString } from './browser';
5+
import { getElementIdentifier } from './browser';
66
import { isElement, isError, isEvent, isInstanceOf, isPlainObject, isPrimitive } from './is';
77
import { logger } from './logger';
88
import { truncate } from './string';
@@ -150,7 +150,7 @@ export function convertToPlainObject<V>(value: V):
150150
/** Creates a string representation of the target of an `Event` object */
151151
function serializeEventTarget(target: unknown): string {
152152
try {
153-
return isElement(target) ? htmlTreeAsString(target) : Object.prototype.toString.call(target);
153+
return isElement(target) ? getElementIdentifier(target) : Object.prototype.toString.call(target);
154154
} catch (_oO) {
155155
return '<unknown>';
156156
}

0 commit comments

Comments
 (0)