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',
  });