fix(utils): Normalize HTML elements as string (#7916)

Currently, we do not special-case html elements in normalization. This means they are still normalized as objects, leading to potentially deeply nested stuff, and to problems with e.g. replay.

Author: mydea

packages/browser-integration-tests/suites/public-api/setContext/non_serializable_context/test.ts

@@ -9,6 +9,6 @@ sentryTest('should normalize non-serializable context', async ({ getLocalTestPat
 
   const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
 
-  expect(eventData.contexts?.non_serializable).toMatchObject({});
+  expect(eventData.contexts?.non_serializable).toEqual('[HTMLElement: HTMLBodyElement]');
   expect(eventData.message).toBe('non_serializable');
 });

packages/utils/src/normalize.ts

@@ -170,6 +170,7 @@ function visit(
 // TODO remove this in v7 (this means the method will no longer be exported, under any name)
 export { visit as walk };
 
+/* eslint-disable complexity */
 /**
  * Stringify the given value. Handles various known special values and types.
  *
@@ -242,11 +243,19 @@ function stringifyValue(
     // them to strings means that instances of classes which haven't defined their `toStringTag` will just come out as
     // `"[object Object]"`. If we instead look at the constructor's name (which is the same as the name of the class),
     // we can make sure that only plain objects come out that way.
-    return `[object ${getConstructorName(value)}]`;
+    const objName = getConstructorName(value);
+
+    // Handle HTML Elements
+    if (/^HTML(\w*)Element$/.test(objName)) {
+      return `[HTMLElement: ${objName}]`;
+    }
+
+    return `[object ${objName}]`;
   } catch (err) {
     return `**non-serializable** (${err})`;
   }
 }
+/* eslint-enable complexity */
 
 function getConstructorName(value: unknown): string {
   const prototype: Prototype | null = Object.getPrototypeOf(value);

packages/utils/test/normalize.test.ts

@@ -263,6 +263,32 @@ describe('normalize()', () => {
     });
   });
 
+  describe('handles HTML elements', () => {
+    test('HTMLDivElement', () => {
+      expect(
+        normalize({
+          div: document.createElement('div'),
+          div2: document.createElement('div'),
+        }),
+      ).toEqual({
+        div: '[HTMLElement: HTMLDivElement]',
+        div2: '[HTMLElement: HTMLDivElement]',
+      });
+    });
+
+    test('input elements', () => {
+      expect(
+        normalize({
+          input: document.createElement('input'),
+          select: document.createElement('select'),
+        }),
+      ).toEqual({
+        input: '[HTMLElement: HTMLInputElement]',
+        select: '[HTMLElement: HTMLSelectElement]',
+      });
+    });
+  });
+
   describe('calls toJSON if implemented', () => {
     test('primitive values', () => {
       const a = new Number(1) as any;