ref(replay): Accept replay attachments in-order so we do not have to manually sort later (#50901)

This is a followup from #50707

Fixes #50891

Author: ryan953

static/app/components/replays/replayContext.tsx

@@ -222,7 +222,7 @@ export function Provider({
 }: Props) {
   const config = useLegacyStore(ConfigStore);
   const organization = useOrganization();
-  const events = replay?.getRRWebEvents();
+  const events = replay?.getRRWebFrames();
   const savedReplayConfigRef = useRef<ReplayConfig>(
     JSON.parse(localStorage.getItem(ReplayLocalstorageKeys.REPLAY_CONFIG) || '{}')
   );

static/app/utils/replays/hooks/useReplayData.tsx

@@ -1,4 +1,4 @@
-import {useCallback, useEffect, useMemo, useState} from 'react';
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import * as Sentry from '@sentry/react';
 
 import {Client} from 'sentry/api';
@@ -104,6 +104,7 @@ function useReplayData({
 
   const [state, setState] = useState<State>(INITIAL_STATE);
   const [attachments, setAttachments] = useState<unknown[]>([]);
+  const attachmentMap = useRef<Map<string, unknown[]>>(new Map()); // Map keys are always iterated by insertion order
   const [errors, setErrors] = useState<ReplayError[]>([]);
   const [replayRecord, setReplayRecord] = useState<ReplayRecord>();
 
@@ -134,6 +135,7 @@ function useReplayData({
 
     const pages = Math.ceil(replayRecord.count_segments / segmentsPerPage);
     const cursors = new Array(pages).fill(0).map((_, i) => `0:${segmentsPerPage * i}:0`);
+    cursors.forEach(cursor => attachmentMap.current.set(cursor, []));
 
     await Promise.allSettled(
       cursors.map(cursor => {
@@ -148,7 +150,9 @@ function useReplayData({
           }
         );
         promise.then(response => {
-          setAttachments(prev => (prev ?? []).concat(...response));
+          attachmentMap.current.set(cursor, response);
+          const flattened = Array.from(attachmentMap.current.values()).flat(2);
+          setAttachments(flattened);
         });
         return promise;
       })

static/app/utils/replays/replayReader.spec.tsx

@@ -115,7 +115,7 @@ describe('ReplayReader', () => {
 
     it.each([
       {
-        method: 'getSortedRRWebFrames',
+        method: 'getRRWebFrames',
         expected: [
           {
             type: EventType.Custom,

static/app/utils/replays/replayReader.tsx

@@ -132,14 +132,9 @@ export default class ReplayReader {
 
     // Insert extra records to satisfy minimum requirements for the UI
     this._breadcrumbFrames.push(replayInitBreadcrumb(replayRecord));
-    this._rrwebEvents.push(recordingStartFrame(replayRecord));
+    this._rrwebEvents.unshift(recordingStartFrame(replayRecord));
     this._rrwebEvents.push(recordingEndFrame(replayRecord));
 
-    // Sort what needs sorting
-    // TODO(replay): We could remove this sort call if useReplayData was more
-    // careful about maintaining cursor order when calling setAttachments()
-    this._rrwebEvents.sort((a, b) => a.timestamp - b.timestamp);
-
     /*********************/
     /** OLD STUFF BELOW **/
     /*********************/
@@ -206,10 +201,6 @@ export default class ReplayReader {
 
   getRRWebFrames = () => this._rrwebEvents;
 
-  getSortedRRWebFrames = memoize(() =>
-    this.getRRWebFrames().sort((a, b) => a.timestamp - b.timestamp)
-  );
-
   getConsoleFrames = memoize(() =>
     this._breadcrumbFrames.filter(frame => frame.category === 'console')
   );
@@ -265,11 +256,6 @@ export default class ReplayReader {
   /*********************/
   /** OLD STUFF BELOW **/
   /*********************/
-
-  getRRWebEvents = () => {
-    return this.rrwebEvents;
-  };
-
   getCrumbsWithRRWebNodes = memoize(() =>
     this.breadcrumbs.filter(
       crumb => crumb.data && typeof crumb.data === 'object' && 'nodeId' in crumb.data
@@ -314,7 +300,7 @@ export default class ReplayReader {
   getDomNodes = memoize(() =>
     extractDomNodes({
       crumbs: this.getCrumbsWithRRWebNodes(),
-      rrwebEvents: this.getRRWebEvents(),
+      rrwebEvents: this.getRRWebFrames(),
       finishedAt: this.replayRecord.finished_at,
     })
   );

static/app/views/replays/details.tsx

@@ -110,7 +110,7 @@ function ReplayDetails({params: {replaySlug}}: Props) {
     );
   }
 
-  if (!fetching && replay && replay.getRRWebEvents().length < 2) {
+  if (!fetching && replay && replay.getRRWebFrames().length < 2) {
     return (
       <Page
         orgSlug={orgSlug}