Replay click breadcrumbs capture stale element attributes when DOM attributes are mutated after initial snapshot

[InterstellarStella]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/react

SDK Version

7.120.4 (also verified present in latest 10.48.0)

Framework Version

React with MUI (Material UI) — though not framework-specific; any SPA that dynamically changes element attributes will trigger this.

Link to Sentry event

No response

Reproduction Example/SDK Setup

Any application where an interactive element's HTML attributes (e.g., id, class, data-testid) are changed dynamically after the initial page render. For example, a React component that conditionally renders a button with different IDs depending on state:

function ActionButton({ step }) {
  return (
    <Button
      id={step === 'review' ? 'save-note-button' : 'next-question-button'}
      data-testid={step === 'review' ? 'save-note-button' : 'next-question-button'}
    >
      {step === 'review' ? 'Save Note' : 'Next question'}
    </Button>
  );
}

Standard SDK init with Replay enabled:

Sentry.init({
  dsn: "...",
  integrations: [Sentry.replayIntegration()],
  replaysSessionSampleRate: 1.0,
});

Steps to Reproduce

1. Load a page where a button renders with id="next-question-button".
2. Interact with the page such that the application re-renders the same DOM node with id="save-note-button" (i.e., a React state change that mutates the element's attributes without unmounting/remounting the node).
3. Click the button after the id has changed to "save-note-button".
4. In the Sentry UI, open the Replays list and filter with click.id:save-note-button.

Expected Result

The replay should appear in the filtered results, since the user visibly clicked a button whose id attribute was "save-note-button" at the time of the click.

Actual Result

The replay does not appear when filtering by click.id:save-note-button. The click breadcrumb is indexed with the element's original attribute value (click.id:next-question-button) from when the node was first serialized in the full DOM snapshot, not the value at the time of the click.

Additional Context

Links to events will be provided in the internal Linear ticket.

Priority

_{React with 👍 to help prioritize this issue. Please use comments to provide useful context, avoiding +1 or me too, to help us triage it.}

[linear-code]

JS-2135