feat: warn when messages were dropped (#23323)

PostHog · Jun 28, 2024 · 7cb2ac3 · 7cb2ac3
1 parent b51455b
commit 7cb2ac3
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 3 deletions.
diff --git a/frontend/src/scenes/session-recordings/player/PlayerMeta.tsx b/frontend/src/scenes/session-recordings/player/PlayerMeta.tsx
@@ -1,6 +1,6 @@
 import './PlayerMeta.scss'
 
-import { LemonSelect, LemonSelectOption, Link } from '@posthog/lemon-ui'
+import { LemonBanner, LemonSelect, LemonSelectOption, Link } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { CopyToClipboardInline } from 'lib/components/CopyToClipboard'
@@ -58,6 +58,25 @@ function URLOrScreen({ lastUrl }: { lastUrl: string | undefined }): JSX.Element
     )
 }
 
+function PlayerWarningsRow(): JSX.Element | null {
+    const { messageTooLargeWarnings } = useValues(sessionRecordingPlayerLogic)
+    return messageTooLargeWarnings.length ? (
+        <div>
+            <LemonBanner
+                type="error"
+                action={{
+                    children: 'Learn more',
+                    to: 'https://posthog.com/docs/session-replay/troubleshooting#message-too-large-warning',
+                    targetBlank: true,
+                }}
+            >
+                This session recording had recording data that was too large and could not be captured. This will mean
+                playback is not 100% accurate.{' '}
+            </LemonBanner>
+        </div>
+    ) : null
+}
+
 export function PlayerMeta(): JSX.Element {
     const { logicProps, isFullScreen } = useValues(sessionRecordingPlayerLogic)
 
@@ -189,6 +208,7 @@ export function PlayerMeta(): JSX.Element {
                     <div className={clsx('flex-1', isSmallPlayer ? 'min-w-[1rem]' : 'min-w-[5rem]')} />
                     {resolutionView}
                 </div>
+                <PlayerWarningsRow />
             </div>
         </DraggableToNotebook>
     )

diff --git a/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.ts b/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.ts
@@ -1,5 +1,5 @@
 import posthogEE from '@posthog/ee/exports'
-import { EventType, eventWithTime } from '@rrweb/types'
+import { customEvent, EventType, eventWithTime } from '@rrweb/types'
 import { captureException } from '@sentry/react'
 import {
     actions,
@@ -883,6 +883,13 @@ export const sessionRecordingDataLogic = kea<sessionRecordingDataLogicType>([
                 })
             },
         ],
+
+        customRRWebEvents: [
+            (s) => [s.snapshots],
+            (snapshots): customEvent[] => {
+                return snapshots.filter((snapshot) => snapshot.type === EventType.Custom).map((x) => x as customEvent)
+            },
+        ],
     })),
     afterMount(({ cache }) => {
         resetTimingsCache(cache)

diff --git a/frontend/src/scenes/session-recordings/player/sessionRecordingPlayerLogic.ts b/frontend/src/scenes/session-recordings/player/sessionRecordingPlayerLogic.ts
@@ -1,4 +1,5 @@
 import { lemonToast } from '@posthog/lemon-ui'
+import { customEvent } from '@rrweb/types'
 import { captureException } from '@sentry/react'
 import {
     actions,
@@ -107,6 +108,7 @@ export const sessionRecordingPlayerLogic = kea<sessionRecordingPlayerLogicType>(
                 'sessionPlayerMetaData',
                 'sessionPlayerMetaDataLoading',
                 'createExportJSON',
+                'customRRWebEvents',
             ],
             playerSettingsLogic,
             ['speed', 'skipInactivitySetting'],
@@ -178,7 +180,7 @@ export const sessionRecordingPlayerLogic = kea<sessionRecordingPlayerLogicType>(
         setIsFullScreen: (isFullScreen: boolean) => ({ isFullScreen }),
         skipPlayerForward: (rrWebPlayerTime: number, skip: number) => ({ rrWebPlayerTime, skip }),
         incrementClickCount: true,
-        // the error is emitted from code we don't control in rrweb so we can't guarantee it's really an Error
+        // the error is emitted from code we don't control in rrweb, so we can't guarantee it's really an Error
         playerErrorSeen: (error: any) => ({ error }),
         fingerprintReported: (fingerprint: string) => ({ fingerprint }),
     }),
@@ -465,6 +467,13 @@ export const sessionRecordingPlayerLogic = kea<sessionRecordingPlayerLogicType>(
                 }
             },
         ],
+
+        messageTooLargeWarnings: [
+            (s) => [s.customRRWebEvents],
+            (customRRWebEvents: customEvent[]) => {
+                return customRRWebEvents.filter((event) => event.data.tag === 'Message too large')
+            },
+        ],
     }),
     listeners(({ props, values, actions, cache }) => ({
         playerErrorSeen: ({ error }) => {