feat: Refactor loading of snapshots

frontend/src/scenes/session-recordings/__mocks__/recording_snapshots.ts

@@ -1,5 +1,5 @@
 import { eventWithTime } from '@rrweb/types'
-import { prepareRecordingSnapshots } from 'scenes/session-recordings/player/sessionRecordingDataLogic'
+import { dedupeRecordingSnapshots } from 'scenes/session-recordings/player/sessionRecordingDataLogic'
 
 import { RecordingSnapshot } from '~/types'
 
@@ -27,7 +27,7 @@ export const convertSnapshotsResponse = (
     snapshotsByWindowId: { [key: string]: eventWithTime[] },
     existingSnapshots?: RecordingSnapshot[]
 ): RecordingSnapshot[] => {
-    return prepareRecordingSnapshots(convertSnapshotsByWindowId(snapshotsByWindowId), existingSnapshots)
+    return dedupeRecordingSnapshots([...convertSnapshotsByWindowId(snapshotsByWindowId), ...(existingSnapshots ?? [])])
 }
 
 export const sortedRecordingSnapshots = (): { snapshot_data_by_window_id: Record<string, RecordingSnapshot[]> } => {

frontend/src/scenes/session-recordings/file-playback/sessionRecordingFilePlaybackLogic.ts

@@ -1,5 +1,4 @@
 import { lemonToast } from '@posthog/lemon-ui'
-import { eventWithTime } from '@rrweb/types'
 import { BuiltLogic, connect, kea, listeners, path, reducers, selectors } from 'kea'
 import { loaders } from 'kea-loaders'
 import { beforeUnload } from 'kea-router'
@@ -11,51 +10,15 @@ import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { Scene } from 'scenes/sceneTypes'
 import { urls } from 'scenes/urls'
 
-import { Breadcrumb, PersonType, RecordingSnapshot, ReplayTabs, SessionRecordingType } from '~/types'
+import { Breadcrumb, ReplayTabs } from '~/types'
 
 import {
+    dedupeRecordingSnapshots,
     parseEncodedSnapshots,
-    prepareRecordingSnapshots,
     sessionRecordingDataLogic,
 } from '../player/sessionRecordingDataLogic'
-import type { sessionRecordingDataLogicType } from '../player/sessionRecordingDataLogicType'
 import type { sessionRecordingFilePlaybackLogicType } from './sessionRecordingFilePlaybackLogicType'
-
-export type ExportedSessionRecordingFileV1 = {
-    version: '2022-12-02'
-    data: {
-        person: PersonType | null
-        snapshotsByWindowId: Record<string, eventWithTime[]>
-    }
-}
-
-export type ExportedSessionRecordingFileV2 = {
-    version: '2023-04-28'
-    data: {
-        id: SessionRecordingType['id']
-        person: SessionRecordingType['person']
-        snapshots: RecordingSnapshot[]
-    }
-}
-
-export const createExportedSessionRecording = (
-    logic: BuiltLogic<sessionRecordingDataLogicType>,
-    // DEBUG signal only, to be removed before release
-    exportUntransformedMobileSnapshotData: boolean
-): ExportedSessionRecordingFileV2 => {
-    const { sessionPlayerMetaData, sessionPlayerSnapshotData } = logic.values
-
-    return {
-        version: '2023-04-28',
-        data: {
-            id: sessionPlayerMetaData?.id ?? '',
-            person: sessionPlayerMetaData?.person,
-            snapshots: exportUntransformedMobileSnapshotData
-                ? sessionPlayerSnapshotData?.untransformed_snapshots || []
-                : sessionPlayerSnapshotData?.snapshots || [],
-        },
-    }
-}
+import { ExportedSessionRecordingFileV1, ExportedSessionRecordingFileV2 } from './types'
 
 export const parseExportedSessionRecording = (fileData: string): ExportedSessionRecordingFileV2 => {
     const data = JSON.parse(fileData) as ExportedSessionRecordingFileV1 | ExportedSessionRecordingFileV2
@@ -177,14 +140,15 @@ export const sessionRecordingFilePlaybackLogic = kea<sessionRecordingFilePlaybac
                 return
             }
 
-            const snapshots = prepareRecordingSnapshots(
+            const snapshots = dedupeRecordingSnapshots(
                 await parseEncodedSnapshots(
                     values.sessionRecording.snapshots,
                     values.sessionRecording.id,
                     !!values.featureFlags[FEATURE_FLAGS.SESSION_REPLAY_MOBILE]
                 )
             )
 
+            // TODO: Change to `receiveFilePlaybackData`
             dataLogic.actions.loadRecordingSnapshotsSuccess({
                 snapshots,
             })

frontend/src/scenes/session-recordings/file-playback/types.ts

@@ -0,0 +1,20 @@
+import { eventWithTime } from '@rrweb/types'
+
+import { PersonType, RecordingSnapshot, SessionRecordingType } from '~/types'
+
+export type ExportedSessionRecordingFileV1 = {
+    version: '2022-12-02'
+    data: {
+        person: PersonType | null
+        snapshotsByWindowId: Record<string, eventWithTime[]>
+    }
+}
+
+export type ExportedSessionRecordingFileV2 = {
+    version: '2023-04-28'
+    data: {
+        id: SessionRecordingType['id']
+        person: SessionRecordingType['person']
+        snapshots: RecordingSnapshot[]
+    }
+}

frontend/src/scenes/session-recordings/player/inspector/playerInspectorLogic.ts

@@ -154,7 +154,7 @@ export const playerInspectorLogic = kea<playerInspectorLogicType>([
             [
                 'sessionPlayerData',
                 'sessionPlayerMetaDataLoading',
-                'sessionPlayerSnapshotDataLoading',
+                'snapshotsLoading',
                 'sessionEventsData',
                 'sessionEventsDataLoading',
                 'windowIds',
@@ -796,7 +796,7 @@ export const playerInspectorLogic = kea<playerInspectorLogicType>([
             (s) => [
                 s.sessionEventsDataLoading,
                 s.sessionPlayerMetaDataLoading,
-                s.sessionPlayerSnapshotDataLoading,
+                s.snapshotsLoading,
                 s.sessionEventsData,
                 s.consoleLogs,
                 s.allPerformanceEvents,
@@ -805,27 +805,27 @@ export const playerInspectorLogic = kea<playerInspectorLogicType>([
             (
                 sessionEventsDataLoading,
                 sessionPlayerMetaDataLoading,
-                sessionPlayerSnapshotDataLoading,
+                snapshotsLoading,
                 events,
                 logs,
                 performanceEvents,
                 doctorEvents
             ): Record<SessionRecordingPlayerTab, 'loading' | 'ready' | 'empty'> => {
                 const tabEventsState = sessionEventsDataLoading ? 'loading' : events?.length ? 'ready' : 'empty'
                 const tabConsoleState =
-                    sessionPlayerMetaDataLoading || sessionPlayerSnapshotDataLoading || !logs
+                    sessionPlayerMetaDataLoading || snapshotsLoading || !logs
                         ? 'loading'
                         : logs.length
                         ? 'ready'
                         : 'empty'
                 const tabNetworkState =
-                    sessionPlayerMetaDataLoading || sessionPlayerSnapshotDataLoading || !performanceEvents
+                    sessionPlayerMetaDataLoading || snapshotsLoading || !performanceEvents
                         ? 'loading'
                         : performanceEvents.length
                         ? 'ready'
                         : 'empty'
                 const tabDoctorState =
-                    sessionPlayerMetaDataLoading || sessionPlayerSnapshotDataLoading || !performanceEvents
+                    sessionPlayerMetaDataLoading || snapshotsLoading || !performanceEvents
                         ? 'loading'
                         : doctorEvents.length
                         ? 'ready'

frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.test.ts

@@ -6,7 +6,7 @@
     snapshotsAsRealTimeJSONPayload,
 } from 'scenes/session-recordings/__mocks__/recording_snapshots'
 import {
-    prepareRecordingSnapshots,
+    dedupeRecordingSnapshots,
     sessionRecordingDataLogic,
 } from 'scenes/session-recordings/player/sessionRecordingDataLogic'
 import { teamLogic } from 'scenes/teamLogic'
@@ -30,14 +30,14 @@
     start_timestamp: '2023-08-11T12:03:36.097000Z',
     end_timestamp: '2023-08-11T12:04:52.268000Z',
     blob_key: '1691755416097-1691755492268',
     loaded: false,
 }
 const REALTIME_SOURCE: SessionRecordingSnapshotSource = {
     source: 'realtime',
     start_timestamp: '2024-01-28T21:19:49.217000Z',
     end_timestamp: undefined,
     blob_key: undefined,
     loaded: false,
 }
 
 describe('sessionRecordingDataLogic', () => {
@@ -115,7 +115,7 @@
         it('loads all data', async () => {
             await expectLogic(logic, () => {
                 logic.actions.loadRecordingMeta()
                 logic.actions.loadRecordingSnapshots()
             })
                 .toDispatchActions([
                     'loadRecordingMetaSuccess',
@@ -174,7 +174,7 @@
             })
             logic.mount()
             logic.actions.loadRecordingMeta()
             logic.actions.loadRecordingSnapshots()
 
             await expectLogic(logic).toDispatchActions(['loadRecordingMetaSuccess', 'loadRecordingSnapshotsFailure'])
             expect(logic.values.sessionPlayerData).toMatchObject({
@@ -219,7 +219,7 @@
                 })
 
             await expectLogic(logic, () => {
                 logic.actions.loadRecordingSnapshots()
             }).toDispatchActions(['loadEvents', 'loadEventsSuccess'])
 
             expect(api.create).toHaveBeenCalledWith(
@@ -255,7 +255,7 @@
     describe('report usage', () => {
         it('sends `recording loaded` event only when entire recording has loaded', async () => {
             await expectLogic(logic, () => {
                 logic.actions.loadRecordingSnapshots()
             })
                 .toDispatchActionsInAnyOrder([
                     'loadRecordingSnapshots',
@@ -267,7 +267,7 @@
         })
         it('sends `recording viewed` and `recording analyzed` event on first contentful paint', async () => {
             await expectLogic(logic, () => {
                 logic.actions.loadRecordingSnapshots()
             })
                 .toDispatchActions(['loadRecordingSnapshotsSuccess'])
                 .toDispatchActionsInAnyOrder([
@@ -278,7 +278,7 @@
         })
         it('clears the cache after unmounting', async () => {
             await expectLogic(logic, () => {
                 logic.actions.loadRecordingSnapshots()
             })
             expect(Object.keys(logic.cache)).toEqual(
                 expect.arrayContaining(['metaStartTime', 'snapshotsStartTime', 'eventsStartTime'])
@@ -302,7 +302,7 @@
 
             expect(snapshotsWithDuplicates.length).toEqual(snapshots.length + 2)
 
-            expect(prepareRecordingSnapshots(snapshots)).toEqual(prepareRecordingSnapshots(snapshotsWithDuplicates))
+            expect(dedupeRecordingSnapshots(snapshots)).toEqual(dedupeRecordingSnapshots(snapshotsWithDuplicates))
         })
 
         it('should cope with two not duplicate snapshots with the same timestamp and delay', () => {
@@ -326,13 +326,13 @@
                 },
             ]
             // we call this multiple times and pass existing data in, so we need to make sure it doesn't change
-            expect(prepareRecordingSnapshots(verySimilarSnapshots, verySimilarSnapshots)).toEqual(verySimilarSnapshots)
+            expect(dedupeRecordingSnapshots(verySimilarSnapshots, verySimilarSnapshots)).toEqual(verySimilarSnapshots)
         })
 
         it('should match snapshot', () => {
             const snapshots = convertSnapshotsByWindowId(sortedRecordingSnapshotsJson.snapshot_data_by_window_id)
 
-            expect(prepareRecordingSnapshots(snapshots)).toMatchSnapshot()
+            expect(dedupeRecordingSnapshots(snapshots)).toMatchSnapshot()
         })
     })
 
@@ -351,7 +351,7 @@
 
         it('loads each source, and on success reports recording viewed', async () => {
             await expectLogic(logic, () => {
                 logic.actions.loadRecordingSnapshots()
                 // loading the snapshots will trigger a loadRecordingSnapshotsSuccess
                 // that will have the blob source
                 // that triggers loadRecordingSnapshots