refactor(utils): move htmlTreeAsString args to object

Author: ZachGawlik

packages/browser/src/integrations/breadcrumbs.ts

@@ -103,7 +103,7 @@ function _domBreadcrumb(dom: BreadcrumbsOptions['dom']): (handlerData: { [key: s
   function _innerDomBreadcrumb(handlerData: { [key: string]: any }): void {
     let target;
     let keyAttrs = typeof dom === 'object' ? dom.serializeAttribute : undefined;
-    const customMaxStringLength =
+    const maxStringLength =
       typeof dom === 'object' && typeof dom.maxStringLength === 'number'
         ? Math.min(dom.maxStringLength, 1024)
         : undefined;
@@ -115,8 +115,8 @@ function _domBreadcrumb(dom: BreadcrumbsOptions['dom']): (handlerData: { [key: s
     // Accessing event.target can throw (see getsentry/raven-js#838, #768)
     try {
       target = handlerData.event.target
-        ? htmlTreeAsString(handlerData.event.target as Node, keyAttrs, customMaxStringLength)
-        : htmlTreeAsString(handlerData.event as unknown as Node, keyAttrs, customMaxStringLength);
+        ? htmlTreeAsString(handlerData.event.target as Node, { keyAttrs, maxStringLength })
+        : htmlTreeAsString(handlerData.event as unknown as Node, { keyAttrs, maxStringLength });
     } catch (e) {
       target = '<unknown>';
     }

packages/utils/src/browser.ts

@@ -12,7 +12,10 @@ const DEFAULT_MAX_STRING_LENGTH = 80;
  * e.g. [HTMLElement] => body > div > input#foo.btn[name=baz]
  * @returns generated DOM path
  */
-export function htmlTreeAsString(elem: unknown, keyAttrs?: string[], customMaxStringLength?: number): string {
+export function htmlTreeAsString(
+  elem: unknown,
+  options: { keyAttrs?: string[]; maxStringLength?: number } = {},
+): string {
   type SimpleNode = {
     parentNode: SimpleNode;
   } | null;
@@ -24,13 +27,13 @@ export function htmlTreeAsString(elem: unknown, keyAttrs?: string[], customMaxSt
   try {
     let currentElem = elem as SimpleNode;
     const MAX_TRAVERSE_HEIGHT = 5;
-    const maxStringLength = customMaxStringLength || DEFAULT_MAX_STRING_LENGTH;
     const out = [];
     let height = 0;
     let len = 0;
     const separator = ' > ';
     const sepLength = separator.length;
     let nextStr;
+    const { keyAttrs, maxStringLength = DEFAULT_MAX_STRING_LENGTH } = options;
 
     // eslint-disable-next-line no-plusplus
     while (currentElem && height++ < MAX_TRAVERSE_HEIGHT) {

packages/utils/test/browser.test.ts

@@ -44,7 +44,7 @@ describe('htmlTreeAsString', () => {
     </li>`;
     document.body.appendChild(el);
 
-    expect(htmlTreeAsString(document.getElementById('cat-2'), ['test-id'])).toBe(
+    expect(htmlTreeAsString(document.getElementById('cat-2'), { keyAttrs: ['test-id'] })).toBe(
       'body > ul > li.li-class[title="li-title"] > img[test-id="cat-2-test-id"]',
     );
   });
@@ -61,7 +61,7 @@ describe('htmlTreeAsString', () => {
     expect(htmlTreeAsString(document.querySelector('button'))).toBe(
       'button.bg-blue-500.hover:bg-blue-700.text-white.hover:text-blue-100',
     );
-    expect(htmlTreeAsString(document.querySelector('button'), undefined, 100)).toBe(
+    expect(htmlTreeAsString(document.querySelector('button'), { maxStringLength: 100 })).toBe(
       'div#main-cta > div.container > button.bg-blue-500.hover:bg-blue-700.text-white.hover:text-blue-100',
     );
   });