fix(replay): Fixes Firefox playback issues (#81199)

... due to shared object references in `replayStepper`. This happens on
Replay details page where we have the replayer as well as a tab that
uses `replayStepper` (e.g. Breadcrumbs). Both `Replayer` instances were
access the same rrweb event object references and because
`replayStepper` plays through the entire replay as fast as possible, it
ends up mutating the event objects that the player instance later reads.
This ends up causing issues in the playback (like screens not updating
so the replay appears frozen and broken). I don't know exactly what
mutations are happening that cause the playback issues, nor do I know
why it only affects Firefox and not Chrome.

We now deep clone the events in `createHiddenPlayer` to avoid the above
situation.

We first realized this was an issue with `replayStepper` due to
#80681 and [its
fix](#80697). The events in our
hidden replayer were affecting our main playback which indicates that
there was some shared state happening. h/t @ryan953 for the suggestion
re: object mutations!

Closes getsentry/sentry-javascript#14381
Closes getsentry/sentry-javascript#12978

static/app/utils/replays/createHiddenPlayer.tsx

@@ -26,16 +26,24 @@ export function createHiddenPlayer(rrwebEvents: RecordingFrame[]): {
     hiddenIframe.contentDocument.body.appendChild(domRoot);
   }
 
-  const replayer = new Replayer(rrwebEvents, {
-    root: domRoot,
-    loadTimeout: 1,
-    showWarning: false,
-    blockClass: 'sentry-block',
-    speed: 99999,
-    skipInactive: true,
-    triggerFocus: false,
-    mouseTail: false,
-  });
+  const replayer = new Replayer(
+    // We need to deep clone the events since `Replayer` can mutate the event
+    // objects. This means that having multiple Replayer instances (e.g. the
+    // Replay details player and a hidden player via `replayStepper`) can cause
+    // playback issues as the object references are the same, even though the
+    // arrays are not.
+    structuredClone(rrwebEvents),
+    {
+      root: domRoot,
+      loadTimeout: 1,
+      showWarning: false,
+      blockClass: 'sentry-block',
+      speed: 99999,
+      skipInactive: true,
+      triggerFocus: false,
+      mouseTail: false,
+    }
+  );
 
   const cleanupReplayer = () => {
     hiddenIframe.remove();