fix: add visual regression test (#18998)

* fix: api errors aren't errors which i think breaks sentry

* fix: not early return before using a hook, silly react

* remove unnecessary change

* visual regression test that would have protected us

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* we shouldn't say posthog is offline if we get a 404

* Update UI snapshots for `chromium` (1)

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

frontend/src/initKea.ts

@@ -23,6 +23,7 @@ const ERROR_FILTER_ALLOW_LIST = [
     'loadLatestVersion',
     'loadBilling', // Gracefully handled if it fails
     'loadData', // Gracefully handled in the data table
+    'loadRecordingMeta', // Gracefully handled in the recording player
 ]
 
 interface InitKeaProps {
@@ -83,9 +84,13 @@ export function initKea({ routerHistory, routerLocation, beforePlugins }: InitKe
                     (error?.message === 'Failed to fetch' || // Likely CORS headers errors (i.e. request failing without reaching Django)
                         (error?.status !== undefined && ![200, 201, 204].includes(error.status)))
                 ) {
+                    let errorMessageFallback = 'PostHog may be offline'
+                    if (error.status === 404) {
+                        errorMessageFallback = 'URL not found'
+                    }
                     lemonToast.error(
                         `${identifierToHuman(actionKey)} failed: ${
-                            error.detail || error.statusText || 'PostHog may be offline'
+                            error.detail || error.statusText || errorMessageFallback
                         }`
                     )
                 }

frontend/src/scenes/session-recordings/SessionsRecordings-player-failure.stories.tsx

@@ -0,0 +1,135 @@
+import { Meta } from '@storybook/react'
+import { router } from 'kea-router'
+import { useEffect } from 'react'
+import { App } from 'scenes/App'
+import recordingEventsJson from 'scenes/session-recordings/__mocks__/recording_events_query'
+import { snapshotsAsJSONLines } from 'scenes/session-recordings/__mocks__/recording_snapshots'
+import { urls } from 'scenes/urls'
+
+import { mswDecorator } from '~/mocks/browser'
+
+import recording_playlists from './__mocks__/recording_playlists.json'
+import recordings from './__mocks__/recordings.json'
+
+const meta: Meta = {
+    title: 'Replay/Player/Failure',
+    parameters: {
+        layout: 'fullscreen',
+        viewMode: 'story',
+        mockDate: '2023-02-01',
+        waitForSelector: '.PlayerFrame__content .replayer-wrapper iframe',
+    },
+    decorators: [
+        // API is set up so that everything except the call to load session recording metadata succeeds
+        mswDecorator({
+            get: {
+                '/api/projects/:team_id/session_recordings': (req) => {
+                    const version = req.url.searchParams.get('version')
+                    return [
+                        200,
+                        {
+                            has_next: false,
+                            results: recordings,
+                            version,
+                        },
+                    ]
+                },
+                '/api/projects/:team_id/session_recording_playlists': recording_playlists,
+                '/api/projects/:team_id/session_recording_playlists/:playlist_id': (req) => {
+                    const playlistId = req.params.playlist_id
+
+                    return [
+                        200,
+                        {
+                            id: 29,
+                            short_id: playlistId,
+                            name: 'I am a playlist',
+                            derived_name: '(Untitled)',
+                            description: '',
+                            pinned: false,
+                            created_at: '2023-07-31T16:24:38.956943Z',
+                            created_by: {
+                                id: 1,
+                                uuid: '01896512-b4e6-0000-3add-7143ff5174c5',
+                                distinct_id: 'qs3Sp9pxE3nC827IbjDB6qNW6pD22X4tmGWwonM20p7',
+                                first_name: 'paul',
+                                email: '[email protected]',
+                                is_email_verified: true,
+                            },
+                            deleted: false,
+                            filters: {
+                                events: [],
+                                actions: [],
+                                date_to: null,
+                                date_from: '-7d',
+                                properties: [],
+                                console_logs: [],
+                                session_recording_duration: {
+                                    key: 'duration',
+                                    type: 'recording',
+                                    value: 60,
+                                    operator: 'gt',
+                                },
+                            },
+                            last_modified_at: '2023-07-31T16:34:15.297322Z',
+                            last_modified_by: {
+                                id: 1,
+                                uuid: '01896512-b4e6-0000-3add-7143ff5174c5',
+                                distinct_id: 'qs3Sp9pxE3nC827IbjDB6qNW6pD22X4tmGWwonM20p7',
+                                first_name: 'paul',
+                                email: '[email protected]',
+                                is_email_verified: true,
+                            },
+                        },
+                    ]
+                },
+                '/api/projects/:team_id/session_recording_playlists/:playlist_id/recordings': (req) => {
+                    const playlistId = req.params.playlist_id
+                    const response = playlistId === '1234567' ? recordings : []
+                    return [200, { has_next: false, results: response, version: 1 }]
+                },
+                // without the session-recording-blob-replay feature flag, we only load via ClickHouse
+                '/api/projects/:team/session_recordings/:id/snapshots': (req, res, ctx) => {
+                    // with no sources, returns sources...
+                    if (req.url.searchParams.get('source') === 'blob') {
+                        return res(ctx.text(snapshotsAsJSONLines()))
+                    }
+                    // with no source requested should return sources
+                    return [
+                        200,
+                        {
+                            sources: [
+                                {
+                                    source: 'blob',
+                                    start_timestamp: '2023-08-11T12:03:36.097000Z',
+                                    end_timestamp: '2023-08-11T12:04:52.268000Z',
+                                    blob_key: '1691755416097-1691755492268',
+                                },
+                            ],
+                        },
+                    ]
+                },
+                '/api/projects/:team/session_recordings/:id': () => {
+                    return [404, {}]
+                },
+                'api/projects/:team/notebooks': {
+                    count: 0,
+                    next: null,
+                    previous: null,
+                    results: [],
+                },
+            },
+            post: {
+                '/api/projects/:team/query': recordingEventsJson,
+            },
+        }),
+    ],
+}
+export default meta
+
+export function RecentRecordings404(): JSX.Element {
+    useEffect(() => {
+        router.actions.push(urls.replay())
+    }, [])
+    return <App />
+}

frontend/src/scenes/session-recordings/SessionsRecordings-player-success.stories.tsx

@@ -13,7 +13,7 @@ import recording_playlists from './__mocks__/recording_playlists.json'
 import recordings from './__mocks__/recordings.json'
 
 const meta: Meta = {
-    title: 'Scenes-App/Recordings',
+    title: 'Replay/Player/Success',
     tags: ['test-skip'], // TODO: Fix the flakey rendering due to player playback
     parameters: {
         layout: 'fullscreen',

frontend/src/scenes/session-recordings/SessionsRecordings-playlist-listing.stories.tsx

@@ -12,7 +12,7 @@ import { ReplayTabs } from '~/types'
 import recording_playlists from './__mocks__/recording_playlists.json'
 
 const meta: Meta = {
-    title: 'Scenes-App/Recordings',
+    title: 'Replay/Listings',
     parameters: {
         layout: 'fullscreen',
         viewMode: 'story',