From 055625b8ccb46b158633ec95a5802860c60f3aa6 Mon Sep 17 00:00:00 2001 From: David Newell Date: Thu, 28 Mar 2024 12:55:10 +0000 Subject: [PATCH 1/3] chore: renaming and moving snapshot loading --- .../sessionRecordingFilePlaybackLogic.ts | 23 +++---------------- .../session-recordings/file-playback/types.ts | 20 ++++++++++++++++ .../player/PlayerFrameOverlay.tsx | 11 ++++----- .../player/sessionRecordingDataLogic.test.ts | 4 ++-- .../player/sessionRecordingDataLogic.ts | 10 ++------ 5 files changed, 31 insertions(+), 37 deletions(-) create mode 100644 frontend/src/scenes/session-recordings/file-playback/types.ts diff --git a/frontend/src/scenes/session-recordings/file-playback/sessionRecordingFilePlaybackLogic.ts b/frontend/src/scenes/session-recordings/file-playback/sessionRecordingFilePlaybackLogic.ts index b6f547603114b..2c3ab70fab516 100644 --- 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' @@ -10,7 +9,7 @@ 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 { deduplicateSnapshots, @@ -19,23 +18,7 @@ import { } 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 - } -} - -export type ExportedSessionRecordingFileV2 = { - version: '2023-04-28' - data: { - id: SessionRecordingType['id'] - person: SessionRecordingType['person'] - snapshots: RecordingSnapshot[] - } -} +import { ExportedSessionRecordingFileV1, ExportedSessionRecordingFileV2 } from './types' export const createExportedSessionRecording = ( logic: BuiltLogic, @@ -95,7 +78,7 @@ export const parseExportedSessionRecording = (fileData: string): ExportedSession * in practice, it will only wait for 1-2 retries * but a timeout is provided to avoid waiting forever when something breaks */ -const waitForDataLogic = async (playerKey: string): Promise> => { +const waitForDataLogic = async (playerKey: string): Promise> => { const maxRetries = 20 // 2 seconds / 100 ms per retry let retries = 0 let dataLogic = null diff --git a/frontend/src/scenes/session-recordings/file-playback/types.ts b/frontend/src/scenes/session-recordings/file-playback/types.ts new file mode 100644 index 0000000000000..61f609f904d4e --- /dev/null +++ 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 + } +} + +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/PlayerFrameOverlay.tsx b/frontend/src/scenes/session-recordings/player/PlayerFrameOverlay.tsx index 0dbdd8d628a95..570a245c377e6 100644 --- a/frontend/src/scenes/session-recordings/player/PlayerFrameOverlay.tsx +++ b/frontend/src/scenes/session-recordings/player/PlayerFrameOverlay.tsx @@ -15,11 +15,8 @@ import { SessionPlayerState } from '~/types' import { PlayerUpNext } from './PlayerUpNext' import { SimilarRecordings } from './SimilarRecordings' -const PlayerFrameOverlayContent = ({ - currentPlayerState, -}: { - currentPlayerState: SessionPlayerState -}): JSX.Element | null => { +const PlayerFrameOverlayContent = (): JSX.Element | null => { + const { currentPlayerState } = useValues(sessionRecordingPlayerLogic) let content = null const pausedState = currentPlayerState === SessionPlayerState.PAUSE || currentPlayerState === SessionPlayerState.READY @@ -81,7 +78,7 @@ const PlayerFrameOverlayContent = ({ } export function PlayerFrameOverlay(): JSX.Element { - const { currentPlayerState, playlistLogic } = useValues(sessionRecordingPlayerLogic) + const { playlistLogic } = useValues(sessionRecordingPlayerLogic) const { togglePlayPause } = useActions(sessionRecordingPlayerLogic) const hasSimilarRecordings = useFeatureFlag('REPLAY_SIMILAR_RECORDINGS') @@ -94,7 +91,7 @@ export function PlayerFrameOverlay(): JSX.Element { onMouseMove={() => setInterrupted(true)} onMouseOut={() => setInterrupted(false)} > - + {hasSimilarRecordings && } {playlistLogic ? ( { }) }) - describe('prepareRecordingSnapshots', () => { + describe('deduplicateSnapshots', () => { it('should remove duplicate snapshots and sort by timestamp', () => { const snapshots = convertSnapshotsByWindowId(sortedRecordingSnapshotsJson.snapshot_data_by_window_id) const snapshotsWithDuplicates = snapshots @@ -309,7 +309,7 @@ describe('sessionRecordingDataLogic', () => { // these two snapshots are not duplicates but have the same timestamp and delay // this regression test proves that we deduplicate them against themselves // prior to https://github.com/PostHog/posthog/pull/20019 - // each time prepareRecordingSnapshots was called with this input + // each time deduplicateSnapshots was called with this input // the result would be one event longer, introducing, instead of removing, a duplicate const verySimilarSnapshots: RecordingSnapshot[] = [ { diff --git a/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.ts b/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.ts index 0aff48444a7e9..55963563fd2c1 100644 --- a/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.ts +++ b/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.ts @@ -53,10 +53,6 @@ import { createSegments, mapSnapshotsToWindowId } from './utils/segmenter' const IS_TEST_MODE = process.env.NODE_ENV === 'test' const BUFFER_MS = 60000 // +- before and after start and end of a recording to query for. const DEFAULT_REALTIME_POLLING_MILLIS = 3000 -const REALTIME_POLLING_PARAMS = { - source: SnapshotSourceType.realtime, - version: '2', -} let postHogEEModule: PostHogEE @@ -475,10 +471,8 @@ export const sessionRecordingDataLogic = kea([ null as SessionPlayerSnapshotData | null, { pollRecordingSnapshots: async (_, breakpoint: BreakPointFunction) => { - const params = { ...REALTIME_POLLING_PARAMS } - - if (values.featureFlags[FEATURE_FLAGS.SESSION_REPLAY_V3_INGESTION_PLAYBACK]) { - params.version = '3' + const params = { + version: values.featureFlags[FEATURE_FLAGS.SESSION_REPLAY_V3_INGESTION_PLAYBACK] ? '3' : '2', } await breakpoint(1) // debounce From 3748073163be772ac046fbe1fddfddc1c9254893 Mon Sep 17 00:00:00 2001 From: David Newell Date: Thu, 28 Mar 2024 13:15:10 +0000 Subject: [PATCH 2/3] Update frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.ts --- .../session-recordings/player/sessionRecordingDataLogic.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.ts b/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.ts index 55963563fd2c1..d71d860d5a568 100644 --- a/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.ts +++ b/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.ts @@ -473,6 +473,7 @@ export const sessionRecordingDataLogic = kea([ pollRecordingSnapshots: async (_, breakpoint: BreakPointFunction) => { const params = { version: values.featureFlags[FEATURE_FLAGS.SESSION_REPLAY_V3_INGESTION_PLAYBACK] ? '3' : '2', + source: SnapshotSourceType.realtime, } await breakpoint(1) // debounce From 92e86bc7f785c8a1817967f925bbe5993a9fa2ca Mon Sep 17 00:00:00 2001 From: David Newell Date: Thu, 28 Mar 2024 13:38:10 +0000 Subject: [PATCH 3/3] update snapshot --- .../player/__snapshots__/sessionRecordingDataLogic.test.ts.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/scenes/session-recordings/player/__snapshots__/sessionRecordingDataLogic.test.ts.snap b/frontend/src/scenes/session-recordings/player/__snapshots__/sessionRecordingDataLogic.test.ts.snap index 1941ebe103f3a..6fda01f36439f 100644 --- a/frontend/src/scenes/session-recordings/player/__snapshots__/sessionRecordingDataLogic.test.ts.snap +++ b/frontend/src/scenes/session-recordings/player/__snapshots__/sessionRecordingDataLogic.test.ts.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`sessionRecordingDataLogic prepareRecordingSnapshots should match snapshot 1`] = ` +exports[`sessionRecordingDataLogic deduplicateSnapshots should match snapshot 1`] = ` [ { "data": {