8000 feat: Enable serialization of multiple DOM attributes for breadcrumbs… · GabrielCousin/sentry-javascript@a3f70d8 · GitHub
[go: up one dir, main page]
Skip to content
This repository was archived by the owner on Sep 30, 2024. It is now read-only.

Commit a3f70d8

Browse files
onurtemizkanonurtemizkan
authored
feat: Enable serialization of multiple DOM attributes for breadcrumbs. (getsentry#3755)
1 parent 61eda62 commit a3f70d8

File tree

3 files changed

+21
-11
lines changed

3 files changed

+21
-11
lines changed

‎packages/browser/src/integrations/breadcrumbs.ts

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
/** JSDoc */
1515
interface BreadcrumbsOptions {
1616
console: boolean;
17-
dom: boolean | { serializeAttribute: string };
17+
dom: boolean | { serializeAttribute: string | string[] };
1818
fetch: boolean;
1919
history: boolean;
2020
sentry: boolean;
@@ -162,13 +162,17 @@ export class Breadcrumbs implements Integration {
162162
// eslint-disable-next-line @typescript-eslint/no-explicit-any
163163
private _domBreadcrumb(handlerData: { [key: string]: any }): void {
164164
let target;
165-
const keyAttr = typeof this._options.dom === 'object' ? this._options.dom.serializeAttribute : undefined;
165+
let keyAttrs = typeof this._options.dom === 'object' ? this._options.dom.serializeAttribute : undefined;
166+
167+
if (typeof keyAttrs === 'string') {
168+
keyAttrs = [keyAttrs];
169+
}
166170

167171
// Accessing event.target can throw (see getsentry/raven-js#838, #768)
168172
try {
169173
target = handlerData.event.target
170-
? htmlTreeAsString(handlerData.event.target as Node, keyAttr)
171-
: htmlTreeAsString((handlerData.event as unknown) as Node, keyAttr);
174+
? htmlTreeAsString(handlerData.event.target as Node, keyAttrs)
175+
: htmlTreeAsString((handlerData.event as unknown) as Node, keyAttrs);
172176
} catch (e) {
173177
target = '<unknown>';
174178
}

‎packages/utils/src/browser.ts

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { isString } from './is';
66
* e.g. [HTMLElement] => body > div > input#foo.btn[name=baz]
77
* @returns generated DOM path
88
*/
9-
export function htmlTreeAsString(elem: unknown, keyAttr?: string): string {
9+
export function htmlTreeAsString(elem: unknown, keyAttrs?: string[]): string {
1010
type SimpleNode = {
1111
parentNode: SimpleNode;
1212
} | null;
@@ -28,7 +28,7 @@ export function htmlTreeAsString(elem: unknown, keyAttr?: string): string {
2828

2929
// eslint-disable-next-line no-plusplus
3030
while (currentElem && height++ < MAX_TRAVERSE_HEIGHT) {
31-
nextStr = _htmlElementAsString(currentElem, keyAttr);
31+
nextStr = _htmlElementAsString(currentElem, keyAttrs);
3232
// bail out if
3333
// - nextStr is the 'html' element
3434
// - the length of the string that would be created exceeds MAX_OUTPUT_LEN
@@ -54,7 +54,7 @@ export function htmlTreeAsString(elem: unknown, keyAttr?: string): string {
5454
* e.g. [HTMLElement] => input#foo.btn[name=baz]
5555
* @returns generated DOM path
5656
*/
57-
function _htmlElementAsString(el: unknown, keyAttr?: string): string {
57+
function _htmlElementAsString(el: unknown, keyAttrs?: string[]): string {
5858
const elem = el as {
5959
tagName?: string;
6060
id?: string;
@@ -75,9 +75,15 @@ function _htmlElementAsString(el: unknown, keyAttr?: string): string {
7575

7676
out.push(elem.tagName.toLowerCase());
7777

78-
const keyAttrValue = keyAttr ? elem.getAttribute(keyAttr) : null;
79-
if (keyAttrValue) {
80-
out.push(`[${keyAttr}="${keyAttrValue}"]`);
78+
// Pairs of attribute keys defined in `serializeAttribute` and their values on element.
79+
const keyAttrPairs = keyAttrs?.length
80+
? keyAttrs.filter(keyAttr => elem.getAttribute(keyAttr)).map(keyAttr => [keyAttr, elem.getAttribute(keyAttr)])
81+
: null;
82+
83+
if (keyAttrPairs?.length) {
84+
keyAttrPairs.forEach(keyAttrPair => {
85+
out.push(`[${keyAttrPair[0]}="${keyAttrPair[1]}"]`);
86+
});
8187
} else {
8288
if (elem.id) {
8389
out.push(`#${elem.id}`);

‎packages/utils/test/browser.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ describe('htmlTreeAsString', () => {
4040
</li>`;
4141
document.body.appendChild(el);
4242

43-
expect(htmlTreeAsString(document.getElementById('cat-2'), 'test-id')).toBe(
43+
expect(htmlTreeAsString(document.getElementById('cat-2'), ['test-id'])).toBe(
4444
'body > ul > li.li-class[title="li-title"] > img[test-id="cat-2-test-id"]',
4545
);
4646
});

0 commit comments

Comments
 (0)
0