feat: Refactor loading of snapshots

PostHog · Feb 29, 2024 · a633392 · a633392
1 parent a9496ea
commit a633392
Show file tree

Hide file tree

Showing 10 changed files with 284 additions and 288 deletions.
diff --git a/frontend/src/scenes/session-recordings/__mocks__/recording_snapshots.ts b/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[]> } => {

diff --git a/frontend/src/scenes/session-recordings/file-playback/sessionRecordingFilePlaybackLogic.ts b/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,
             })

diff --git a/frontend/src/scenes/session-recordings/file-playback/types.ts b/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[]
+    }
+}
diff --git a/frontend/src/scenes/session-recordings/player/inspector/playerInspectorLogic.ts b/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'

diff --git a/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.test.ts b/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.test.ts
@@ -6,7 +6,7 @@ import {
     snapshotsAsRealTimeJSONPayload,
 } from 'scenes/session-recordings/__mocks__/recording_snapshots'
 import {
-    prepareRecordingSnapshots,
+    dedupeRecordingSnapshots,
     sessionRecordingDataLogic,
 } from 'scenes/session-recordings/player/sessionRecordingDataLogic'
 import { teamLogic } from 'scenes/teamLogic'
@@ -302,7 +302,7 @@ describe('sessionRecordingDataLogic', () => {
 
             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 @@ describe('sessionRecordingDataLogic', () => {
                 },
             ]
             // 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()
         })
     })