getsentry · logaretm · Apr 14, 2026 · Apr 13, 2026 · Apr 13, 2026 · Apr 13, 2026
diff --git a/.size-limit.js b/.size-limit.js
@@ -269,7 +269,7 @@ module.exports = [
     path: createCDNPath('bundle.tracing.replay.min.js'),
     gzip: false,
     brotli: false,
-    limit: '247 KB',
+    limit: '248 KB',
   },
   {
     name: 'CDN Bundle (incl. Tracing, Replay, Logs, Metrics) - uncompressed',

@@ -56,6 +56,66 @@ sentryTest('mutation after threshold results in slow click', async ({ forceFlush
   expect(slowClickBreadcrumbs[0]?.data?.timeAfterClickMs).toBeLessThan(3501);
 });
 
+sentryTest(
+  'uses updated attributes for click breadcrumbs after mutation',
+  async ({ forceFlushReplay, getLocalTestUrl, page }) => {
+    if (shouldSkipReplayTest()) {
+      sentryTest.skip();
+    }
+
+    const url = await getLocalTestUrl({ testDir: __dirname });
+
+    const replayRequestPromise = waitForReplayRequest(page, 0);
+    const segmentReqWithClickBreadcrumbPromise = waitForReplayRequest(page, (_event, res) => {
+      const { breadcrumbs } = getCustomRecordingEvents(res);
+
+      return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.click');
+    });
+
+    await page.goto(url);
+    await replayRequestPromise;
+
+    await forceFlushReplay();
+
+    await page.evaluate(() => {
+      const target = document.getElementById('next-question-button');
+      if (!target) {
+        throw new Error('Could not find target button');
+      }
+
+      target.id = 'save-note-button';
+      target.setAttribute('data-testid', 'save-note-button');
+    });
+
+    await page.getByRole('button', { name: 'Next question' }).click();
+    await forceFlushReplay();
+
+    const segmentReqWithClickBreadcrumb = await segmentReqWithClickBreadcrumbPromise;
+
+    const { breadcrumbs } = getCustomRecordingEvents(segmentReqWithClickBreadcrumb);
+    const updatedClickBreadcrumb = breadcrumbs.find(breadcrumb => breadcrumb.category === 'ui.click');
+
+    expect(updatedClickBreadcrumb).toEqual({
+      category: 'ui.click',
+      data: {
+        node: {
+          attributes: {
+            id: 'save-note-button',
+            testId: 'save-note-button',
+          },
+          id: expect.any(Number),
+          tagName: 'button',
+          textContent: '**** ********',
+        },
+        nodeId: expect.any(Number),
+      },
+      message: 'body > button#save-note-button',
+      timestamp: expect.any(Number),
+      type: 'default',
+    });
+  },
+);
+
 sentryTest('multiple clicks are counted', async ({ getLocalTestUrl, page }) => {
   if (shouldSkipReplayTest()) {
     sentryTest.skip();

@@ -6,6 +6,7 @@
   <body>
     <button id="mutationButton">Trigger mutation</button>
     <div id="mutationDiv">Trigger mutation</div>
+    <button id="next-question-button" data-testid="next-question-button">Next question</button>
     <button id="mutationButtonImmediately">Trigger mutation immediately</button>
     <button
       id="mutationButtonInline"

@@ -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?.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
  */

@@ -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('*********');
+  });
 });