From 7cb2ac3998feac29393879ffddc8b06412fb81d2 Mon Sep 17 00:00:00 2001
From: Paul D'Ambra <paul@posthog.com>
Date: Fri, 28 Jun 2024 14:53:48 +0100
Subject: [PATCH] feat: warn when messages were dropped (#23323)

---
 .../session-recordings/player/PlayerMeta.tsx  | 22 ++++++++++++++++++-
 .../player/sessionRecordingDataLogic.ts       |  9 +++++++-
 .../player/sessionRecordingPlayerLogic.ts     | 11 +++++++++-
 3 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/frontend/src/scenes/session-recordings/player/PlayerMeta.tsx b/frontend/src/scenes/session-recordings/player/PlayerMeta.tsx
index 6f08a928b1cb9..80b32e14b17c8 100644
--- 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
index ba6615a88ee80..d49d5294fc5d2 100644
--- 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
index 2eacc5ccf5392..dba0e5aa35614 100644
--- 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 }) => {