Keep html string for replays, add componentName as additional field

Author: 0Calories

packages/replay/src/coreHandlers/handleDom.ts

@@ -2,7 +2,7 @@ import { record } from '@sentry-internal/rrweb';
 import type { serializedElementNodeWithId, serializedNodeWithId } from '@sentry-internal/rrweb-snapshot';
 import { NodeType } from '@sentry-internal/rrweb-snapshot';
 import type { Breadcrumb } from '@sentry/types';
-import { getElementIdentifier } from '@sentry/utils';
+import { getElementIdentifier, htmlTreeAsString } from '@sentry/utils';
 
 import type { ReplayContainer } from '../types';
 import { createBreadcrumb } from '../util/createBreadcrumb';
@@ -70,6 +70,7 @@ export function getBaseDomBreadcrumb(target: Node | null, message: string): Brea
               .map(text => (text as string).trim())
               .join(''),
             attributes: getAttributesToRecord(element.attributes),
+            componentName: getElementIdentifier(target),
           },
         }
       : {},
@@ -98,7 +99,7 @@ function getDomTarget(handlerData: DomHandlerData): { target: Node | null; messa
   // Accessing event.target can throw (see getsentry/raven-js#838, #768)
   try {
     target = isClick ? getClickTargetNode(handlerData.event) : getTargetNode(handlerData.event);
-    message = getElementIdentifier(target, { maxStringLength: 200 }) || '<unknown>';
+    message = htmlTreeAsString(target, { maxStringLength: 200 }) || '<unknown>';
   } catch (e) {
     message = '<unknown>';
   }

packages/replay/src/coreHandlers/handleKeyboardEvent.ts

@@ -1,5 +1,5 @@
 import type { Breadcrumb } from '@sentry/types';
-import { getElementIdentifier } from '@sentry/utils';
+import { getElementIdentifier, htmlTreeAsString } from '@sentry/utils';
 
 import type { ReplayContainer } from '../types';
 import { createBreadcrumb } from '../util/createBreadcrumb';
@@ -45,7 +45,7 @@ export function getKeyboardBreadcrumb(event: KeyboardEvent): Breadcrumb | null {
     return null;
   }
 
-  const message = getElementIdentifier(target, { maxStringLength: 200 }) || '<unknown>';
+  const message = htmlTreeAsString(target, { maxStringLength: 200 }) || '<unknown>';
   const baseBreadcrumb = getBaseDomBreadcrumb(target as Node, message);
 
   return createBreadcrumb({
@@ -58,6 +58,7 @@ export function getKeyboardBreadcrumb(event: KeyboardEvent): Breadcrumb | null {
       ctrlKey,
       altKey,
       key,
+      componentName: getElementIdentifier(target),
     },
   });
 }