feat(browser): support dom.maxStringLength configuration (#6175)

Author: ZachGawlik

packages/browser/src/integrations/breadcrumbs.ts

@@ -15,7 +15,13 @@ import { WINDOW } from '../helpers';
 /** JSDoc */
 interface BreadcrumbsOptions {
   console: boolean;
-  dom: boolean | { serializeAttribute: string | string[] };
+  dom:
+    | boolean
+    | {
+        serializeAttribute?: string | string[];
+        /** maxStringLength gets capped at 1024 to prevent 100 breadcrumbs exceeding 1MB event payload size */
+        maxStringLength?: number;
+      };
   fetch: boolean;
   history: boolean;
   sentry: boolean;
@@ -97,6 +103,10 @@ 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 =
+      typeof dom === 'object' && typeof dom.maxStringLength === 'number'
+        ? Math.min(dom.maxStringLength, 1024)
+        : undefined;
 
     if (typeof keyAttrs === 'string') {
       keyAttrs = [keyAttrs];
@@ -105,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)
-        : htmlTreeAsString(handlerData.event as unknown as Node, keyAttrs);
+        ? htmlTreeAsString(handlerData.event.target as Node, keyAttrs, customMaxStringLength)
+        : htmlTreeAsString(handlerData.event as unknown as Node, keyAttrs, customMaxStringLength);
     } catch (e) {
       target = '<unknown>';
     }

packages/utils/src/browser.ts

@@ -4,13 +4,15 @@ import { getGlobalObject } from './worldwide';
 // eslint-disable-next-line deprecation/deprecation
 const WINDOW = getGlobalObject<Window>();
 
+const DEFAULT_MAX_STRING_LENGTH = 80;
+
 /**
  * Given a child DOM element, returns a query-selector statement describing that
  * and its ancestors
  * e.g. [HTMLElement] => body > div > input#foo.btn[name=baz]
  * @returns generated DOM path
  */
-export function htmlTreeAsString(elem: unknown, keyAttrs?: string[]): string {
+export function htmlTreeAsString(elem: unknown, keyAttrs?: string[], customMaxStringLength?: number): string {
   type SimpleNode = {
     parentNode: SimpleNode;
   } | null;
@@ -22,7 +24,7 @@ export function htmlTreeAsString(elem: unknown, keyAttrs?: string[]): string {
   try {
     let currentElem = elem as SimpleNode;
     const MAX_TRAVERSE_HEIGHT = 5;
-    const MAX_OUTPUT_LEN = 80;
+    const maxStringLength = customMaxStringLength || DEFAULT_MAX_STRING_LENGTH;
     const out = [];
     let height = 0;
     let len = 0;
@@ -35,9 +37,9 @@ export function htmlTreeAsString(elem: unknown, keyAttrs?: string[]): string {
       nextStr = _htmlElementAsString(currentElem, keyAttrs);
       // bail out if
       // - nextStr is the 'html' element
-      // - the length of the string that would be created exceeds MAX_OUTPUT_LEN
+      // - the length of the string that would be created exceeds maxStringLength
       //   (ignore this limit if we are on the first iteration)
-      if (nextStr === 'html' || (height > 1 && len + out.length * sepLength + nextStr.length >= MAX_OUTPUT_LEN)) {
+      if (nextStr === 'html' || (height > 1 && len + out.length * sepLength + nextStr.length >= maxStringLength)) {
         break;
       }
 

packages/utils/test/browser.test.ts

@@ -9,6 +9,10 @@ beforeAll(() => {
 });
 
 describe('htmlTreeAsString', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
   it('generates html tree for a simple element', () => {
     const el = document.createElement('ul');
     el.innerHTML = `<li class="container">
@@ -44,6 +48,23 @@ describe('htmlTreeAsString', () => {
       'body > ul > li.li-class[title="li-title"] > img[test-id="cat-2-test-id"]',
     );
   });
+
+  it('caps string output according to provided maxStringLength', () => {
+    const el = document.createElement('div');
+    el.innerHTML = `<div id="main-cta">
+      <div class="container">
+        <button class="bg-blue-500 hover:bg-blue-700 text-white hover:text-blue-100" />
+      </div>
+    </div>`;
+    document.body.appendChild(el);
+
+    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(
+      'div#main-cta > div.container > button.bg-blue-500.hover:bg-blue-700.text-white.hover:text-blue-100',
+    );
+  });
 });
 
 describe('getDomElement', () => {