restore message in breadcrumb for now

Author: billyvg

packages/browser-integration-tests/suites/replay/clickBreadcrumbs/test.ts

@@ -39,6 +39,7 @@ for (let i = 0; i < 100; i++) {
         expect.arrayContaining([
           {
             ...expectedClickBreadcrumb,
+            message: 'body > div#error.btn.btn-error[aria-label="An Error"]',
             data: {
               nodeId: expect.any(Number),
               node: {
@@ -61,6 +62,7 @@ for (let i = 0; i < 100; i++) {
         expect.arrayContaining([
           {
             ...expectedClickBreadcrumb,
+            message: 'body > button > img#img[alt="Alt Text"]',
             data: {
               nodeId: expect.any(Number),
               node: {
@@ -81,6 +83,7 @@ for (let i = 0; i < 100; i++) {
         expect.arrayContaining([
           {
             ...expectedClickBreadcrumb,
+            message: 'body > button.sentry-unmask[aria-label="Unmasked label"]',
             data: {
               nodeId: expect.any(Number),
               node: {

packages/browser-integration-tests/suites/replay/errors/errorMode/test.ts

@@ -98,6 +98,7 @@ sentryTest(
       expect.arrayContaining([
         {
           ...expectedClickBreadcrumb,
+          message: 'body > button#error',
           data: {
             nodeId: expect.any(Number),
             node: {
@@ -143,6 +144,7 @@ sentryTest(
       expect.arrayContaining([
         {
           ...expectedClickBreadcrumb,
+          message: 'body > button#log',
           data: {
             node: {
               attributes: { id: 'log' },

packages/browser-integration-tests/suites/replay/errors/errorsInSession/test.ts

@@ -65,6 +65,7 @@ sentryTest(
       expect.arrayContaining([
         {
           ...expectedClickBreadcrumb,
+          message: 'body > button#error',
           data: {
             node: {
               attributes: {
@@ -126,6 +127,7 @@ sentryTest(
       expect.arrayContaining([
         {
           ...expectedClickBreadcrumb,
+          message: 'body > button#drop',
           data: {
             node: {
               attributes: {

packages/browser-integration-tests/utils/replayEventTemplates.ts

@@ -158,6 +158,7 @@ export const expectedClickBreadcrumb = {
   timestamp: expect.any(Number),
   type: 'default',
   category: 'ui.click',
+  message: expect.any(String),
   data: {
     nodeId: expect.any(Number),
     node: {

packages/replay/src/coreHandlers/handleDom.ts

@@ -1,6 +1,7 @@
 import type { INode } from '@sentry-internal/rrweb-snapshot';
 import { NodeType } from '@sentry-internal/rrweb-snapshot';
 import type { Breadcrumb } from '@sentry/types';
+import { htmlTreeAsString } from '@sentry/utils';
 
 import type { ReplayContainer } from '../types';
 import { createBreadcrumb } from '../util/createBreadcrumb';
@@ -32,17 +33,15 @@ export const handleDomListener: (replay: ReplayContainer) => (handlerData: DomHa
  * An event handler to react to DOM events.
  */
 function handleDom(handlerData: DomHandlerData): Breadcrumb | null {
+  let target;
   let targetNode: Node | INode | undefined;
 
   // Accessing event.target can throw (see getsentry/raven-js#838, #768)
   try {
     targetNode = getTargetNode(handlerData);
+    target = htmlTreeAsString(targetNode);
   } catch (e) {
-    // Nothing to do
-  }
-
-  if (!targetNode) {
-    return null;
+    target = '<unknown>';
   }
 
   // `__sn` property is the serialized node created by rrweb
@@ -51,6 +50,7 @@ function handleDom(handlerData: DomHandlerData): Breadcrumb | null {
 
   return createBreadcrumb({
     category: `ui.${handlerData.name}`,
+    message: target,
     data: serializedNode
       ? {
           nodeId: serializedNode.id,

packages/replay/test/integration/errorSampleRate.test.ts

@@ -54,7 +54,7 @@ describe('Integration | errorSampleRate', () => {
     expect(mockRecord.takeFullSnapshot).not.toHaveBeenCalled();
     expect(replay).not.toHaveLastSentReplay();
 
-    // Does not capture mouse click
+    // Does not capture on mouse click
     domHandler({
       name: 'click',
     });