|
| 1 | +import { isString } from '@sentry/core'; |
| 2 | + |
| 3 | +const DEFAULT_MAX_STRING_LENGTH = 80; |
| 4 | + |
| 5 | +type SimpleNode = { |
| 6 | + parentNode: SimpleNode; |
| 7 | +} | null; |
| 8 | + |
| 9 | +/** |
| 10 | + * Given a child DOM element, returns a query-selector statement describing that |
| 11 | + * and its ancestors |
| 12 | + * e.g. [HTMLElement] => body > div > input#foo.btn[name=baz] |
| 13 | + * @returns generated DOM path |
| 14 | + */ |
| 15 | +export function htmlTreeAsString( |
| 16 | + elem: unknown, |
| 17 | + options: string[] | { keyAttrs?: string[]; maxStringLength?: number } = {}, |
| 18 | +): string { |
| 19 | + if (!elem) { |
| 20 | + return '<unknown>'; |
| 21 | + } |
| 22 | + |
| 23 | + // try/catch both: |
| 24 | + // - accessing event.target (see getsentry/raven-js#838, #768) |
| 25 | + // - `htmlTreeAsString` because it's complex, and just accessing the DOM incorrectly |
| 26 | + // - can throw an exception in some circumstances. |
| 27 | + try { |
| 28 | + let currentElem = elem as SimpleNode; |
| 29 | + const MAX_TRAVERSE_HEIGHT = 5; |
| 30 | + const out = []; |
| 31 | + let height = 0; |
| 32 | + let len = 0; |
| 33 | + const separator = ' > '; |
| 34 | + const sepLength = separator.length; |
| 35 | + let nextStr; |
| 36 | + const keyAttrs = Array.isArray(options) ? options : options.keyAttrs; |
| 37 | + const maxStringLength = (!Array.isArray(options) && options.maxStringLength) || DEFAULT_MAX_STRING_LENGTH; |
| 38 | + |
| 39 | + while (currentElem && height++ < MAX_TRAVERSE_HEIGHT) { |
| 40 | + nextStr = _htmlElementAsString(currentElem, keyAttrs); |
| 41 | + // bail out if |
| 42 | + // - nextStr is the 'html' element |
| 43 | + // - the length of the string that would be created exceeds maxStringLength |
| 44 | + // (ignore this limit if we are on the first iteration) |
| 45 | + if (nextStr === 'html' || (height > 1 && len + out.length * sepLength + nextStr.length >= maxStringLength)) { |
| 46 | + break; |
| 47 | + } |
| 48 | + |
| 49 | + out.push(nextStr); |
| 50 | + |
| 51 | + len += nextStr.length; |
| 52 | + currentElem = currentElem.parentNode; |
| 53 | + } |
| 54 | + |
| 55 | + return out.reverse().join(separator); |
| 56 | + } catch { |
| 57 | + return '<unknown>'; |
| 58 | + } |
| 59 | +} |
| 60 | + |
| 61 | +/** |
| 62 | + * Returns a simple, query-selector representation of a DOM element |
| 63 | + * e.g. [HTMLElement] => input#foo.btn[name=baz] |
| 64 | + * @returns generated DOM path |
| 65 | + */ |
| 66 | +function _htmlElementAsString(el: unknown, keyAttrs?: string[]): string { |
| 67 | + const elem = el as { |
| 68 | + tagName?: string; |
| 69 | + id?: string; |
| 70 | + className?: string; |
| 71 | + getAttribute(key: string): string; |
| 72 | + }; |
| 73 | + |
| 74 | + const out = []; |
| 75 | + |
| 76 | + if (!elem?.tagName) { |
| 77 | + return ''; |
| 78 | + } |
| 79 | + |
| 80 | + if (typeof HTMLElement !== 'undefined') { |
| 81 | + // If using the component name annotation plugin, this value may be available on the DOM node |
| 82 | + if (elem instanceof HTMLElement && elem.dataset) { |
| 83 | + if (elem.dataset['sentryComponent']) { |
| 84 | + return elem.dataset['sentryComponent']; |
| 85 | + } |
| 86 | + if (elem.dataset['sentryElement']) { |
| 87 | + return elem.dataset['sentryElement']; |
| 88 | + } |
| 89 | + } |
| 90 | + } |
| 91 | + |
| 92 | + out.push(elem.tagName.toLowerCase()); |
| 93 | + |
| 94 | + // Pairs of attribute keys defined in `serializeAttribute` and their values on element. |
| 95 | + const keyAttrPairs = keyAttrs?.length |
| 96 | + ? keyAttrs.filter(keyAttr => elem.getAttribute(keyAttr)).map(keyAttr => [keyAttr, elem.getAttribute(keyAttr)]) |
| 97 | + : null; |
| 98 | + |
| 99 | + if (keyAttrPairs?.length) { |
| 100 | + keyAttrPairs.forEach(keyAttrPair => { |
| 101 | + out.push(`[${keyAttrPair[0]}="${keyAttrPair[1]}"]`); |
| 102 | + }); |
| 103 | + } else { |
| 104 | + if (elem.id) { |
| 105 | + out.push(`#${elem.id}`); |
| 106 | + } |
| 107 | + |
| 108 | + const className = elem.className; |
| 109 | + if (className && isString(className)) { |
| 110 | + const classes = className.split(/\s+/); |
| 111 | + for (const c of classes) { |
| 112 | + out.push(`.${c}`); |
| 113 | + } |
| 114 | + } |
| 115 | + } |
| 116 | + for (const k of ['aria-label', 'type', 'name', 'title', 'alt']) { |
| 117 | + const attr = elem.getAttribute(k); |
| 118 | + if (attr) { |
| 119 | + out.push(`[${k}="${attr}"]`); |
| 120 | + } |
| 121 | + } |
| 122 | + |
| 123 | + return out.join(''); |
| 124 | +} |
0 commit comments