fix(replay): sync mirror attributes for click breadcrumbs

logaretm · claude · logaretm · commit 18f89cc5becb · 2026-04-14T10:48:23.000-04:00
Co-Authored-By: GPT-5 &lt;noreply@anthropic.com&gt;
diff --git a/packages/replay-internal/src/coreHandlers/handleDom.ts b/packages/replay-internal/src/coreHandlers/handleDom.ts
@@ -53,30 +53,24 @@ export function getBaseDomBreadcrumb(target: Node | null, message: string): Brea
   const node = nodeId && record.mirror.getNode(nodeId);
   const meta = node && record.mirror.getMeta(node);
   const element = meta && isElement(meta) ? meta : null;
-  const liveElement = target instanceof Element && nodeId > -1 ? target : null;
 
   return {
     message,
-    data:
-      element || liveElement
-        ? {
-            nodeId,
-            node: {
-              id: nodeId,
-              tagName: element?.tagName || liveElement?.tagName.toLowerCase() || '',
-              textContent: element
-                ? Array.from(element.childNodes)
-                    .map((node: serializedNodeWithId) => node.type === NodeType.Text && node.textContent)
-                    .filter(Boolean) // filter out empty values
-                    .map(text => (text as string).trim())
-                    .join('')
-                : '',
-              attributes: getAttributesToRecord(
-                liveElement ? getElementAttributes(liveElement) : element?.attributes || {},
-              ),
-            },
-          }
-        : {},
+    data: element
+      ? {
+          nodeId,
+          node: {
+            id: nodeId,
+            tagName: element.tagName,
+            textContent: Array.from(element.childNodes)
+              .map((node: serializedNodeWithId) => node.type === NodeType.Text && node.textContent)
+              .filter(Boolean) // filter out empty values
+              .map(text => (text as string).trim())
+              .join(''),
+            attributes: getAttributesToRecord(element.attributes),
+          },
+        }
+      : {},
   };
 }
 
@@ -113,10 +107,3 @@ function getDomTarget(handlerData: HandlerDataDom): { target: Node | null; messa
 function isElement(node: serializedNodeWithId): node is serializedElementNodeWithId {
   return node.type === NodeType.Element;
 }
-
-function getElementAttributes(element: Element): Record<string, string> {
-  return Array.from(element.attributes).reduce<Record<string, string>>((attributes, attribute) => {
-    attributes[attribute.name] = attribute.value;
-    return attributes;
-  }, {});
-}
diff --git a/packages/replay-internal/src/util/handleRecordingEmit.ts b/packages/replay-internal/src/util/handleRecordingEmit.ts
@@ -1,11 +1,17 @@
-import { EventType } from '@sentry-internal/rrweb';
+import { EventType, IncrementalSource, record } from '@sentry-internal/rrweb';
+import { NodeType } from '@sentry-internal/rrweb-snapshot';
 import { updateClickDetectorForRecordingEvent } from '../coreHandlers/handleClick';
 import { DEBUG_BUILD } from '../debug-build';
 import { saveSession } from '../session/saveSession';
 import type { RecordingEvent, ReplayContainer, ReplayOptionFrameEvent } from '../types';
 import { addEventSync } from './addEvent';
 import { debug } from './logger';
 
+type MutationAttributeData = {
+  id: number;
+  attributes: Record<string, string | number | true | null>;
+};
+
 type RecordingEmitCallback = (event: RecordingEvent, isCheckout?: boolean) => void;
 
 /**
@@ -29,6 +35,8 @@ export function getHandleRecordingEmit(replay: ReplayContainer): RecordingEmitCa
     const isCheckout = _isCheckout || !hadFirstEvent;
     hadFirstEvent = true;
 
+    syncMirrorAttributesFromMutationEvent(event);
+
     if (replay.clickDetector) {
       updateClickDetectorForRecordingEvent(replay.clickDetector, event);
     }
@@ -112,6 +120,40 @@ export function getHandleRecordingEmit(replay: ReplayContainer): RecordingEmitCa
   };
 }
 
+export function syncMirrorAttributesFromMutationEvent(event: RecordingEvent): void {
+  const data = event.data;
+
+  if (
+    event.type !== EventType.IncrementalSnapshot ||
+    !data ||
+    typeof data !== 'object' ||
+    !('source' in data) ||
+    data.source !== IncrementalSource.Mutation ||
+    !('attributes' in data) ||
+    !Array.isArray(data.attributes)
+  ) {
+    return;
+  }
+
+  for (const mutation of data.attributes as MutationAttributeData[]) {
+    const node = record.mirror.getNode(mutation.id);
+    const meta = node && record.mirror.getMeta(node);
+
+    if (!meta || meta.type !== NodeType.Element) {
+      continue;
+    }
+
+    for (const [attributeName, value] of Object.entries(mutation.attributes)) {
+      if (value === null) {
+        // oxlint-disable-next-line typescript/no-dynamic-delete
+        delete meta.attributes[attributeName];
+      } else {
+        meta.attributes[attributeName] = value;
+      }
+    }
+  }
+}
+
 /**
  * Exported for tests
  */
diff --git a/packages/replay-internal/test/unit/coreHandlers/handleDom.test.ts b/packages/replay-internal/test/unit/coreHandlers/handleDom.test.ts
@@ -3,15 +3,10 @@
  */
 
 import type { HandlerDataDom } from '@sentry/core';
-import { record } from '@sentry-internal/rrweb';
-import { afterEach, describe, expect, test, vi } from 'vitest';
+import { describe, expect, test } from 'vitest';
 import { handleDom } from '../../../src/coreHandlers/handleDom';
 
 describe('Unit | coreHandlers | handleDom', () => {
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
   test('it works with a basic click event on a div', () => {
     const parent = document.createElement('body');
     const target = document.createElement('div');
@@ -137,48 +132,4 @@ describe('Unit | coreHandlers | handleDom', () => {
       type: 'default',
     });
   });
-
-  test('prefers live element attributes over stale rrweb mirror metadata', () => {
-    const target = document.createElement('button');
-    target.setAttribute('id', 'save-note-button');
-    target.setAttribute('data-testid', 'save-note-button');
-    target.textContent = 'Save Note';
-
-    vi.spyOn(record.mirror, 'getId').mockReturnValue(42);
-    vi.spyOn(record.mirror, 'getNode').mockReturnValue(target);
-    vi.spyOn(record.mirror, 'getMeta').mockReturnValue({
-      id: 42,
-      type: 2,
-      tagName: 'button',
-      childNodes: [{ id: 43, type: 3, textContent: 'Save Note' }],
-      attributes: {
-        id: 'next-question-button',
-        'data-testid': 'next-question-button',
-      },
-    });
-
-    const actual = handleDom({
-      name: 'click',
-      event: { target },
-    });
-
-    expect(actual).toEqual({
-      category: 'ui.click',
-      data: {
-        nodeId: 42,
-        node: {
-          id: 42,
-          tagName: 'button',
-          textContent: 'Save Note',
-          attributes: {
-            id: 'save-note-button',
-            testId: 'save-note-button',
-          },
-        },
-      },
-      message: 'button#save-note-button',
-      timestamp: expect.any(Number),
-      type: 'default',
-    });
-  });
 });
diff --git a/packages/replay-internal/test/unit/util/handleRecordingEmit.test.ts b/packages/replay-internal/test/unit/util/handleRecordingEmit.test.ts
@@ -3,12 +3,18 @@
  */
 
 import '../../utils/mock-internal-setTimeout';
-import { EventType } from '@sentry-internal/rrweb';
+import { EventType, IncrementalSource, record } from '@sentry-internal/rrweb';
+import { NodeType, type serializedElementNodeWithId } from '@sentry-internal/rrweb-snapshot';
 import type { MockInstance } from 'vitest';
 import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
+import { handleDom } from '../../../src/coreHandlers/handleDom';
 import type { ReplayOptionFrameEvent } from '../../../src/types';
 import * as SentryAddEvent from '../../../src/util/addEvent';
-import { createOptionsEvent, getHandleRecordingEmit } from '../../../src/util/handleRecordingEmit';
+import {
+  createOptionsEvent,
+  getHandleRecordingEmit,
+  syncMirrorAttributesFromMutationEvent,
+} from '../../../src/util/handleRecordingEmit';
 import { BASE_TIMESTAMP } from '../..';
 import { setupReplayContainer } from '../../utils/setupReplayContainer';
 
@@ -30,6 +36,7 @@ describe('Unit | util | handleRecordingEmit', () => {
 
   afterEach(function () {
     addEventMock.mockReset();
+    vi.restoreAllMocks();
   });
 
   it('interprets first event as checkout event', async function () {
@@ -95,4 +102,106 @@ describe('Unit | util | handleRecordingEmit', () => {
     expect(addEventMock).toHaveBeenNthCalledWith(3, replay, event, true);
     expect(addEventMock).toHaveBeenLastCalledWith(replay, { ...optionsEvent, timestamp: BASE_TIMESTAMP }, false);
   });
+
+  it('syncs mirror attributes from mutation events', function () {
+    const target = document.createElement('button');
+    target.textContent = 'Save Note';
+
+    const meta = {
+      id: 42,
+      type: NodeType.Element,
+      tagName: 'button',
+      childNodes: [{ id: 43, type: NodeType.Text, textContent: 'Save Note' }],
+      attributes: {
+        id: 'next-question-button',
+        'data-testid': 'next-question-button',
+      },
+    };
+
+    vi.spyOn(record.mirror, 'getNode').mockReturnValue(target);
+    vi.spyOn(record.mirror, 'getMeta').mockReturnValue(meta as serializedElementNodeWithId);
+    vi.spyOn(record.mirror, 'getId').mockReturnValue(42);
+
+    syncMirrorAttributesFromMutationEvent({
+      type: EventType.IncrementalSnapshot,
+      timestamp: BASE_TIMESTAMP + 10,
+      data: {
+        source: IncrementalSource.Mutation,
+        texts: [],
+        attributes: [
+          {
+            id: 42,
+            attributes: {
+              id: 'save-note-button',
+              'data-testid': 'save-note-button',
+            },
+          },
+        ],
+        removes: [],
+        adds: [],
+      },
+    });
+
+    expect(
+      handleDom({
+        name: 'click',
+        event: { target },
+      }),
+    ).toEqual({
+      category: 'ui.click',
+      data: {
+        nodeId: 42,
+        node: {
+          id: 42,
+          tagName: 'button',
+          textContent: 'Save Note',
+          attributes: {
+            id: 'save-note-button',
+            testId: 'save-note-button',
+          },
+        },
+      },
+      message: 'button',
+      timestamp: expect.any(Number),
+      type: 'default',
+    });
+  });
+
+  it('preserves masked mutation attribute values', function () {
+    const target = document.createElement('button');
+
+    const meta = {
+      id: 42,
+      type: NodeType.Element,
+      tagName: 'button',
+      childNodes: [],
+      attributes: {
+        'aria-label': 'Save Note',
+      },
+    };
+
+    vi.spyOn(record.mirror, 'getNode').mockReturnValue(target);
+    vi.spyOn(record.mirror, 'getMeta').mockReturnValue(meta as serializedElementNodeWithId);
+
+    syncMirrorAttributesFromMutationEvent({
+      type: EventType.IncrementalSnapshot,
+      timestamp: BASE_TIMESTAMP + 10,
+      data: {
+        source: IncrementalSource.Mutation,
+        texts: [],
+        attributes: [
+          {
+            id: 42,
+            attributes: {
+              'aria-label': '*********',
+            },
+          },
+        ],
+        removes: [],
+        adds: [],
+      },
+    });
+
+    expect(meta.attributes['aria-label']).toBe('*********');
+  });
 });
