fix(replay): don't write the data-sentry-component fallback back onto the mirror

`getAttributesToRecord` is handed rrweb's serialized attributes, which are shared
with events that may not be serialized yet, and it was writing the
`data-sentry-element` -> `data-sentry-component` fallback back onto them. Derive
it on the returned object instead.

Author: logaretm

packages/replay-internal/src/coreHandlers/util/getAttributesToRecord.ts

@@ -27,9 +27,7 @@ export const BREADCRUMB_RELEVANT_ATTRIBUTES = new Set([...ATTRIBUTES_TO_RECORD,
  */
 export function getAttributesToRecord(attributes: Record<string, unknown>): Record<string, unknown> {
   const obj: Record<string, unknown> = {};
-  if (!attributes['data-sentry-component'] && attributes['data-sentry-element']) {
-    attributes['data-sentry-component'] = attributes['data-sentry-element'];
-  }
+
   for (const key in attributes) {
     if (ATTRIBUTES_TO_RECORD.has(key)) {
       let normalizedKey = key;
@@ -42,5 +40,11 @@ export function getAttributesToRecord(attributes: Record<string, unknown>): Reco
     }
   }
 
+  // `attributes` is the serialized node held by rrweb's mirror, which is the same object that was
+  // emitted in an earlier `adds` payload, so this fallback must not be written back onto it.
+  if (!obj['data-sentry-component'] && attributes['data-sentry-element']) {
+    obj['data-sentry-component'] = attributes['data-sentry-element'];
+  }
+
   return obj;
 }

packages/replay-internal/test/unit/coreHandlers/util/getAttributesToRecord.test.ts

@@ -49,3 +49,12 @@ it('records data-sentry-element as data-sentry-component when appropriate', func
     ['data-sentry-component']: 'element',
   });
 });
+
+it('does not write the data-sentry-component fallback back onto the passed attributes', function () {
+  // These are rrweb's serialized attributes, shared with events that may not be serialized yet.
+  const attributes = { ['data-sentry-element']: 'element' };
+
+  getAttributesToRecord(attributes);
+
+  expect(attributes).toEqual({ ['data-sentry-element']: 'element' });
+});