fix(replay): use live click attributes in breadcrumbs

Co-Authored-By: GPT-5 <noreply@anthropic.com>

Author: logaretm

packages/replay-internal/src/coreHandlers/handleDom.ts

@@ -53,24 +53,30 @@ 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
-      ? {
-          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),
-          },
-        }
-      : {},
+    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 || {},
+              ),
+            },
+          }
+        : {},
   };
 }
 
@@ -107,3 +113,10 @@ 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;
+  }, {});
+}

packages/replay-internal/test/unit/coreHandlers/handleDom.test.ts

@@ -3,10 +3,15 @@
  */
 
 import type { HandlerDataDom } from '@sentry/core';
-import { describe, expect, test } from 'vitest';
+import { record } from '@sentry-internal/rrweb';
+import { afterEach, describe, expect, test, vi } 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');
@@ -132,4 +137,48 @@ describe('Unit | coreHandlers | handleDom', () => {
       type: 'default',
     });
   });
+
+  test('it 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',
+    });
+  });
 });