getsentry · billyvg · Mar 16, 2023 · Mar 9, 2023 · Mar 9, 2023 · Mar 9, 2023
diff --git a/packages/browser-integration-tests/suites/replay/customEvents/init.js b/packages/browser-integration-tests/suites/replay/customEvents/init.js
@@ -5,6 +5,7 @@ window.Replay = new Sentry.Replay({
   flushMinDelay: 500,
   flushMaxDelay: 500,
   useCompression: false,
+  blockAllMedia: false,
 });
 
 Sentry.init({

diff --git a/packages/browser-integration-tests/suites/replay/customEvents/template.html b/packages/browser-integration-tests/suites/replay/customEvents/template.html
@@ -4,6 +4,14 @@
     <meta charset="utf-8" />
   </head>
   <body>
-    <button id="go-background">New Tab</button>
+    <div role="button" id="error" class="btn btn-error" aria-label="An Error">An Error</div>
+    <button>
+      <img id="img"
+        alt="Alt Text"
+      />
+    </button>
+    <button class="sentry-unmask" aria-label="Unmasked label">
+      Unmasked
+    </button>
   </body>
 </html>
diff --git a/packages/browser-integration-tests/suites/replay/customEvents/test.ts b/packages/browser-integration-tests/suites/replay/customEvents/test.ts
@@ -14,6 +14,7 @@ import type { PerformanceSpan } from '../../../utils/replayHelpers';
 import {
   getCustomRecordingEvents,
   getReplayEvent,
+  getReplayRecordingContent,
   shouldSkipReplayTest,
   waitForReplayRequest,
 } from '../../../utils/replayHelpers';
@@ -81,8 +82,9 @@ sentryTest(
 
 sentryTest(
   'replay recording should contain a click breadcrumb when a button is clicked',
-  async ({ getLocalTestPath, page }) => {
-    if (shouldSkipReplayTest()) {
+  async ({ forceFlushReplay, getLocalTestPath, page, browserName }) => {
+    // TODO(replay): This is flakey on firefox and webkit where clicks are flakey
+    if (shouldSkipReplayTest() || ['firefox', 'webkit'].includes(browserName)) {
       sentryTest.skip();
     }
 
@@ -100,21 +102,80 @@ sentryTest(
     const url = await getLocalTestPath({ testDir: __dirname });
 
     await page.goto(url);
-    const replayEvent0 = getReplayEvent(await reqPromise0);
-    const { breadcrumbs: breadcrumbs0 } = getCustomRecordingEvents(await reqPromise0);
-
-    expect(replayEvent0).toEqual(getExpectedReplayEvent({ segment_id: 0 }));
-    expect(breadcrumbs0.length).toEqual(0);
-
-    await page.click('button');
-
-    const replayEvent1 = getReplayEvent(await reqPromise1);
-    const { breadcrumbs: breadcrumbs1 } = getCustomRecordingEvents(await reqPromise1);
+    await reqPromise0;
+
+    await page.click('#error');
+    await page.click('#img');
+    await page.click('.sentry-unmask');
+    await forceFlushReplay();
+    const req1 = await reqPromise1;
+    const content1 = getReplayRecordingContent(req1);
+    expect(content1.breadcrumbs).toEqual(
+      expect.arrayContaining([
+        {
+          ...expectedClickBreadcrumb,
+          message: 'body > div#error.btn.btn-error[aria-label="An Error"]',
+          data: {
+            nodeId: expect.any(Number),
+            node: {
+              attributes: {
+                'aria-label': '** *****',
+                class: 'btn btn-error',
+                id: 'error',
+                role: 'button',
+              },
+              id: expect.any(Number),
+              tagName: 'div',
+              textContent: '** *****',
+            },
+          },
+        },
+      ]),
+    );
 
-    expect(replayEvent1).toEqual(
-      getExpectedReplayEvent({ segment_id: 1, urls: [], replay_start_timestamp: undefined }),
+    expect(content1.breadcrumbs).toEqual(
+      expect.arrayContaining([
+        {
+          ...expectedClickBreadcrumb,
+          message: 'body > button > img#img[alt="Alt Text"]',
+          data: {
+            nodeId: expect.any(Number),
+            node: {
+              attributes: {
+                alt: 'Alt Text',
+                id: 'img',
+              },
+              id: expect.any(Number),
+              tagName: 'img',
+              textContent: '',
+            },
+          },
+        },
+      ]),
     );
 
-    expect(breadcrumbs1).toEqual([expectedClickBreadcrumb]);
+    expect(content1.breadcrumbs).toEqual(
+      expect.arrayContaining([
+        {
+          ...expectedClickBreadcrumb,
+          message: 'body > button.sentry-unmask[aria-label="Unmasked label"]',
+          data: {
+            nodeId: expect.any(Number),
+            node: {
+              attributes: {
+                // TODO(rrweb): This is a bug in our rrweb fork!
+                // This attribute should be unmasked.
+                // 'aria-label': 'Unmasked label',
+                'aria-label': '******** *****',
+                class: 'sentry-unmask',
+              },
+              id: expect.any(Number),
+              tagName: 'button',
+              textContent: 'Unmasked',
+            },
+          },
+        },
+      ]),
+    );
   },
 );
diff --git a/packages/browser-integration-tests/suites/replay/errors/errorMode/test.ts b/packages/browser-integration-tests/suites/replay/errors/errorMode/test.ts
@@ -99,6 +99,17 @@ sentryTest(
         {
           ...expectedClickBreadcrumb,
           message: 'body > button#error',
+          data: {
+            nodeId: expect.any(Number),
+            node: {
+              attributes: {
+                id: 'error',
+              },
+              id: expect.any(Number),
+              tagName: 'button',
+              textContent: '***** *****',
+            },
+          },
         },
       ]),
     );
@@ -131,7 +142,19 @@ sentryTest(
 
     expect(content2.breadcrumbs).toEqual(
       expect.arrayContaining([
-        { ...expectedClickBreadcrumb, message: 'body > button#log' },
+        {
+          ...expectedClickBreadcrumb,
+          message: 'body > button#log',
+          data: {
+            node: {
+              attributes: { id: 'log' },
+              id: expect.any(Number),
+              tagName: 'button',
+              textContent: '*** ***** ** *** *******',
+            },
+            nodeId: expect.any(Number),
+          },
+        },
         { ...expectedConsoleBreadcrumb, level: 'log', message: 'Some message' },
       ]),
     );

diff --git a/packages/browser-integration-tests/suites/replay/errors/errorsInSession/test.ts b/packages/browser-integration-tests/suites/replay/errors/errorsInSession/test.ts
@@ -12,8 +12,9 @@ import {
 
 sentryTest(
   '[session-mode] replay event should contain an error id of an error that occurred during session recording',
-  async ({ getLocalTestPath, page }) => {
-    if (shouldSkipReplayTest()) {
+  async ({ getLocalTestPath, page, browserName }) => {
+    // TODO(replay): This is flakey on firefox where clicks are flakey
+    if (shouldSkipReplayTest() || ['firefox'].includes(browserName)) {
       sentryTest.skip();
     }
 
@@ -62,7 +63,23 @@ sentryTest(
     );
 
     expect(content1.breadcrumbs).toEqual(
-      expect.arrayContaining([{ ...expectedClickBreadcrumb, message: 'body > button#error' }]),
+      expect.arrayContaining([
+        {
+          ...expectedClickBreadcrumb,
+          message: 'body > button#error',
+          data: {
+            node: {
+              attributes: {
+                id: 'error',
+              },
+              id: expect.any(Number),
+              tagName: 'button',
+              textContent: '***** *****',
+            },
+            nodeId: expect.any(Number),
+          },
+        },
+      ]),
     );
   },
 );
@@ -108,7 +125,23 @@ sentryTest(
 
     // The button click that triggered the error should still be recorded
     expect(content1.breadcrumbs).toEqual(
-      expect.arrayContaining([{ ...expectedClickBreadcrumb, message: 'body > button#drop' }]),
+      expect.arrayContaining([
+        {
+          ...expectedClickBreadcrumb,
+          message: 'body > button#drop',
+          data: {
+            node: {
+              attributes: {
+                id: 'drop',
+              },
+              id: expect.any(Number),
+              tagName: 'button',
+              textContent: '***** ***** *** **** **',
+            },
+            nodeId: expect.any(Number),
+          },
+        },
+      ]),
     );
   },
 );
diff --git a/packages/browser-integration-tests/utils/replayEventTemplates.ts b/packages/browser-integration-tests/utils/replayEventTemplates.ts
@@ -161,6 +161,14 @@ export const expectedClickBreadcrumb = {
   message: expect.any(String),
   data: {
     nodeId: expect.any(Number),
+    node: {
+      attributes: {
+        id: expect.any(String),
+      },
+      id: expect.any(Number),
+      tagName: expect.any(String),
+      textContent: expect.any(String),
+    },
   },
 };
 

diff --git a/packages/replay/package.json b/packages/replay/package.json
@@ -45,6 +45,7 @@
     "@babel/core": "^7.17.5",
     "@sentry-internal/replay-worker": "7.43.0",
     "@sentry-internal/rrweb": "1.105.0",
+    "@sentry-internal/rrweb-snapshot": "1.105.0",
     "jsdom-worker": "^0.2.1",
     "tslib": "^1.9.3"
   },

diff --git a/packages/replay/src/coreHandlers/handleDom.ts b/packages/replay/src/coreHandlers/handleDom.ts
@@ -1,10 +1,12 @@
-import { record } from '@sentry-internal/rrweb';
+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';
 import { addBreadcrumbEvent } from './addBreadcrumbEvent';
+import { getAttributesToRecord } from './util/getAttributesToRecord';
 
 interface DomHandlerData {
   name: string;
@@ -31,9 +33,8 @@ export const handleDomListener: (replay: ReplayContainer) => (handlerData: DomHa
  * An event handler to react to DOM events.
  */
 function handleDom(handlerData: DomHandlerData): Breadcrumb | null {
-  // Taken from https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/integrations/breadcrumbs.ts#L112
   let target;
-  let targetNode;
+  let targetNode: Node | INode | undefined;
 
   // Accessing event.target can throw (see getsentry/raven-js#838, #768)
   try {
@@ -43,18 +44,32 @@ function handleDom(handlerData: DomHandlerData): Breadcrumb | null {
     target = '<unknown>';
   }
 
-  if (target.length === 0) {
-    return null;
-  }
+  // `__sn` property is the serialized node created by rrweb
+  const serializedNode =
+    targetNode && '__sn' in targetNode && targetNode.__sn.type === NodeType.Element ? targetNode.__sn : null;
 
   return createBreadcrumb({
     category: `ui.${handlerData.name}`,
     message: target,
-    data: {
-      // Not sure why this errors, Node should be correct (Argument of type 'Node' is not assignable to parameter of type 'INode')
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      ...(targetNode ? { nodeId: record.mirror.getId(targetNode as any) } : {}),
-    },
+    data: serializedNode
+      ? {
+          nodeId: serializedNode.id,
+          node: {
+            id: serializedNode.id,
+            tagName: serializedNode.tagName,
+            textContent: targetNode
+              ? Array.from(targetNode.childNodes)
+                  .map(
+                    (node: Node | INode) => '__sn' in node && node.__sn.type === NodeType.Text && node.__sn.textContent,
+                  )
+                  .filter(Boolean) // filter out empty values
+                  .map(text => (text as string).trim())
+                  .join('')
+              : '',
+            attributes: getAttributesToRecord(serializedNode.attributes),
+          },
+        }
+      : {},
   });
 }
 

diff --git a/packages/replay/src/coreHandlers/util/getAttributesToRecord.ts b/packages/replay/src/coreHandlers/util/getAttributesToRecord.ts
@@ -0,0 +1,33 @@
+// Note that these are the serialized attributes and not attributes directly on
+// the DOM Node. Attributes we are interested in:
+const ATTRIBUTES_TO_RECORD = new Set([
+  'id',
+  'class',
+  'aria-label',
+  'role',
+  'name',
+  'alt',
+  'title',
+  'data-test-id',
+  'data-testid',
+]);
+
+/**
+ * Inclusion list of attributes that we want to record from the DOM element
+ */
+export function getAttributesToRecord(attributes: Record<string, unknown>): Record<string, unknown> {
+  const obj: Record<string, unknown> = {};
+  for (const key in attributes) {
+    if (ATTRIBUTES_TO_RECORD.has(key)) {
+      let normalizedKey = key;
+
+      if (key === 'data-testid' || key === 'data-test-id') {
+        normalizedKey = 'testId';
+      }
+
+      obj[normalizedKey] = attributes[key];
+    }
+  }
+
+  return obj;
+}
diff --git a/packages/replay/test/integration/errorSampleRate.test.ts b/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',
     });