fix: report when player state is error

frontend/src/lib/utils/eventUsageLogic.ts

@@ -441,8 +441,6 @@ export const eventUsageLogic = kea<eventUsageLogicType>([
         reportRecordingsListPropertiesFetched: (loadTime: number) => ({ loadTime }),
         reportRecordingsListFilterAdded: (filterType: SessionRecordingFilterType) => ({ filterType }),
         reportRecordingPlayerSeekbarEventHovered: true,
-        reportRecordingPlayerSpeedChanged: (newSpeed: number) => ({ newSpeed }),
-        reportRecordingPlayerSkipInactivityToggled: (skipInactivity: boolean) => ({ skipInactivity }),
         reportRecordingInspectorItemExpanded: (tab: InspectorListItemType, index: number) => ({ tab, index }),
         reportRecordingInspectorMiniFilterViewed: (minifilterKey: MiniFilterKey, enabled: boolean) => ({
             minifilterKey,
@@ -948,12 +946,6 @@ export const eventUsageLogic = kea<eventUsageLogicType>([
         reportRecordingPlayerSeekbarEventHovered: () => {
             posthog.capture('recording player seekbar event hovered')
         },
-        reportRecordingPlayerSpeedChanged: ({ newSpeed }) => {
-            posthog.capture('recording player speed changed', { new_speed: newSpeed })
-        },
-        reportRecordingPlayerSkipInactivityToggled: ({ skipInactivity }) => {
-            posthog.capture('recording player skip inactivity toggled', { skip_inactivity: skipInactivity })
-        },
         reportRecordingInspectorItemExpanded: ({ tab, index }) => {
             posthog.capture('recording inspector item expanded', { tab: 'replay-4000', type: tab, index })
         },

frontend/src/scenes/session-recordings/player/playerSettingsLogic.ts

@@ -1,4 +1,5 @@
-import { actions, connect, kea, path, reducers, selectors } from 'kea'
+import { actions, connect, kea, listeners, path, reducers, selectors } from 'kea'
+import posthog from 'posthog-js'
 import { teamLogic } from 'scenes/teamLogic'
 
 import { AutoplayDirection, SessionRecordingSidebarStacking } from '~/types'
@@ -122,4 +123,13 @@ export const playerSettingsLogic = kea<playerSettingsLogicType>([
             (preferredSidebarStacking) => preferredSidebarStacking === SessionRecordingSidebarStacking.Vertical,
         ],
     }),
+
+    listeners({
+        setSpeed: ({ speed }) => {
+            posthog.capture('recording player speed changed', { new_speed: speed })
+        },
+        setSkipInactivitySetting: ({ skipInactivitySetting }) => {
+            posthog.capture('recording player skip inactivity toggled', { skip_inactivity: skipInactivitySetting })
+        },
+    }),
 ])

frontend/src/scenes/session-recordings/player/sessionRecordingPlayerLogic.ts

@@ -138,12 +138,7 @@ export const sessionRecordingPlayerLogic = kea<sessionRecordingPlayerLogicType>(
             playerSettingsLogic,
             ['setSpeed', 'setSkipInactivitySetting'],
             eventUsageLogic,
-            [
-                'reportNextRecordingTriggered',
-                'reportRecordingPlayerSkipInactivityToggled',
-                'reportRecordingPlayerSpeedChanged',
-                'reportRecordingExportedToFile',
-            ],
+            ['reportNextRecordingTriggered', 'reportRecordingExportedToFile'],
         ],
     })),
     actions({
@@ -672,7 +667,6 @@ export const sessionRecordingPlayerLogic = kea<sessionRecordingPlayerLogicType>(
             }
         },
         setSkipInactivitySetting: ({ skipInactivitySetting }) => {
-            actions.reportRecordingPlayerSkipInactivityToggled(skipInactivitySetting)
             if (!values.currentSegment?.isActive && skipInactivitySetting) {
                 actions.setSkippingInactivity(true)
             } else {
@@ -848,9 +842,10 @@ export const sessionRecordingPlayerLogic = kea<sessionRecordingPlayerLogicType>(
         startScrub: () => {
             actions.stopAnimation()
         },
-        setSpeed: ({ speed }) => {
-            actions.reportRecordingPlayerSpeedChanged(speed)
-            actions.syncPlayerSpeed()
+        setSpeed: () => {
+            if (props.mode !== SessionRecordingPlayerMode.Preview) {
+                actions.syncPlayerSpeed()
+            }
         },
         seekToTimestamp: ({ timestamp, forcePlay }, breakpoint) => {
             actions.stopAnimation()
@@ -1018,7 +1013,7 @@ export const sessionRecordingPlayerLogic = kea<sessionRecordingPlayerLogicType>(
             cache.pausedMediaElements = values.endReached ? [] : playingElements
         },
         restartIframePlayback: () => {
-            cache.pausedMediaElements.forEach((el: HTMLMediaElement) => el.play())
+            cache.pausedMediaElements?.forEach((el: HTMLMediaElement) => el.play())
             cache.pausedMediaElements = []
         },
 
@@ -1143,6 +1138,16 @@ export const sessionRecordingPlayerLogic = kea<sessionRecordingPlayerLogicType>(
                 actions.reportMessageTooLargeWarningSeen(values.sessionRecordingId)
             }
         },
+        currentPlayerState: (prev, next) => {
+            if (next === SessionPlayerState.ERROR && prev !== SessionPlayerState.ERROR) {
+                posthog.capture('recording player error', {
+                    watchedSessionId: values.sessionRecordingId,
+                    currentTimestamp: values.currentTimestamp,
+                    currentSegment: values.currentSegment,
+                    currentPlayerTime: values.currentPlayerTime,
+                })
+            }
+        },
     })),
 
     beforeUnmount(({ values, actions, cache, props }) => {

frontend/src/toolbar/debug/EventDebugMenu.tsx

@@ -1,4 +1,4 @@
-import { BaseIcon, IconCheck, IconEye, IconLogomark, IconSearch, IconVideoCamera } from '@posthog/icons'
+import { BaseIcon, IconCheck, IconEye, IconHide, IconLogomark, IconSearch, IconVideoCamera } from '@posthog/icons'
 import { useActions, useValues } from 'kea'
 import { AnimatedCollapsible } from 'lib/components/AnimatedCollapsible'
 import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
@@ -15,10 +15,10 @@ import { EventType } from '~/types'
 
 import { ToolbarMenu } from '../bar/ToolbarMenu'
 
-function showEventMenuItem(
+function checkableMenuItem(
     label: string,
-    count: number,
-    icon: JSX.Element,
+    count: number | null,
+    icon: JSX.Element | null,
     isActive: boolean,
     onClick: () => void
 ): LemonMenuItem {
@@ -30,13 +30,15 @@ function showEventMenuItem(
                     {icon}
                     {label}
                 </div>
-                <span
-                    // without setting fontVariant to none a single digit number between brackets gets rendered as a ligature 🤷
-                    // eslint-disable-next-line react/forbid-dom-props
-                    style={{ fontVariant: 'none' }}
-                >
-                    ({count})
-                </span>
+                {count !== null && (
+                    <span
+                        // without setting fontVariant to none a single digit number between brackets gets rendered as a ligature 🤷
+                        // eslint-disable-next-line react/forbid-dom-props
+                        style={{ fontVariant: 'none' }}
+                    >
+                        ({count})
+                    </span>
+                )}
             </div>
         ),
         active: isActive,
@@ -70,39 +72,59 @@ export const EventDebugMenu = (): JSX.Element => {
         searchFilteredEventsCount,
         expandedEvent,
         selectedEventTypes,
+        hidePostHogProperties,
+        hidePostHogFlags,
+        expandedProperties,
     } = useValues(eventDebugMenuLogic)
-    const { markExpanded, setSelectedEventType, setSearchText, setSearchVisible } = useActions(eventDebugMenuLogic)
+    const {
+        markExpanded,
+        setSelectedEventType,
+        setSearchText,
+        setSearchVisible,
+        setHidePostHogProperties,
+        setHidePostHogFlags,
+    } = useActions(eventDebugMenuLogic)
 
     const showEventsMenuItems = [
-        showEventMenuItem(
+        checkableMenuItem(
             'PostHog Events',
             searchFilteredEventsCount['posthog'],
             <IconLogomark />,
             selectedEventTypes.includes('posthog'),
             () => setSelectedEventType('posthog', !selectedEventTypes.includes('posthog'))
         ),
-        showEventMenuItem(
+        checkableMenuItem(
             'Custom Events',
             searchFilteredEventsCount['custom'],
             <IconVideoCamera />,
             selectedEventTypes.includes('custom'),
             () => setSelectedEventType('custom', !selectedEventTypes.includes('custom'))
         ),
-        showEventMenuItem(
+        checkableMenuItem(
             'Replay Events',
             searchFilteredEventsCount['snapshot'],
             <IconUnverifiedEvent />,
             selectedEventTypes.includes('snapshot'),
             () => setSelectedEventType('snapshot', !selectedEventTypes.includes('snapshot'))
         ),
     ]
+
+    const hideThingsMenuItems = [
+        checkableMenuItem('Hide PostHog properties', null, null, hidePostHogProperties, () =>
+            setHidePostHogProperties(!hidePostHogProperties)
+        ),
+        checkableMenuItem('Hide PostHog flags', null, null, hidePostHogFlags, () =>
+            setHidePostHogFlags(!hidePostHogFlags)
+        ),
+    ]
+
     return (
         <ToolbarMenu>
             <ToolbarMenu.Header noPadding>
                 <div className="flex flex-col pb-2 space-y-1">
                     <div className="flex justify-center flex-col">
                         <SettingsBar border="bottom" className="justify-end">
-                            <div className="flex-1 text-sm">
+                            <div className="flex-1 text-sm pl-1">
                                 View events from this page as they are sent to PostHog.
                             </div>
                             <SettingsToggle
@@ -149,7 +171,7 @@ export const EventDebugMenu = (): JSX.Element => {
                                     >
                                         <div className="my-1 ml-1 pl-2 border-l-2">
                                             <SimpleKeyValueList
-                                                item={e.properties}
+                                                item={expandedProperties}
                                                 emptyMessage={searchText ? 'No matching properties' : 'No properties'}
                                             />
                                         </div>
@@ -167,7 +189,13 @@ export const EventDebugMenu = (): JSX.Element => {
                 </div>
             </ToolbarMenu.Body>
             <ToolbarMenu.Footer noPadding>
-                <SettingsBar border="top" className="justify-end">
+                <SettingsBar border="top" className="justify-between">
+                    <SettingsMenu
+                        items={hideThingsMenuItems}
+                        highlightWhenActive={false}
+                        icon={<IconHide />}
+                        label="Hide properties"
+                    />
                     <SettingsMenu
                         items={showEventsMenuItems}
                         highlightWhenActive={false}

frontend/src/toolbar/debug/eventDebugMenuLogic.ts

@@ -1,5 +1,5 @@
 import { actions, afterMount, connect, kea, path, reducers, selectors } from 'kea'
-import { CORE_FILTER_DEFINITIONS_BY_GROUP } from 'lib/taxonomy'
+import { CLOUD_INTERNAL_POSTHOG_PROPERTY_KEYS, CORE_FILTER_DEFINITIONS_BY_GROUP, PROPERTY_KEYS } from 'lib/taxonomy'
 import { uuid } from 'lib/utils'
 import { permanentlyMount } from 'lib/utils/kea-logic-builders'
 
@@ -22,8 +22,22 @@ export const eventDebugMenuLogic = kea<eventDebugMenuLogicType>([
             eventType,
             enabled,
         }),
+        setHidePostHogProperties: (hide: boolean) => ({ hide }),
+        setHidePostHogFlags: (hide: boolean) => ({ hide }),
     }),
     reducers({
+        hidePostHogProperties: [
+            false,
+            {
+                setHidePostHogProperties: (_, { hide }) => hide,
+            },
+        ],
+        hidePostHogFlags: [
+            false,
+            {
+                setHidePostHogFlags: (_, { hide }) => hide,
+            },
+        ],
         searchVisible: [
             false,
             {
@@ -123,6 +137,42 @@ export const eventDebugMenuLogic = kea<eventDebugMenuLogicType>([
                 })
             },
         ],
+
+        expandedProperties: [
+            (s) => [s.expandedEvent, s.events, s.hidePostHogProperties, s.hidePostHogFlags],
+            (expandedEvent, events, hidePostHogProperties, hidePostHogFlags) => {
+                if (!expandedEvent) {
+                    return []
+                }
+                const theExpandedEvent = events.find((e) => e.uuid === expandedEvent)
+                if (!theExpandedEvent) {
+                    return []
+                }
+
+                const propsFiltered = hidePostHogProperties
+                    ? Object.fromEntries(
+                          Object.entries(theExpandedEvent.properties).filter(([key]) => {
+                              const isPostHogProperty = key.startsWith('$') && PROPERTY_KEYS.includes(key)
+                              const isNonDollarPostHogProperty = CLOUD_INTERNAL_POSTHOG_PROPERTY_KEYS.includes(key)
+                              return !isPostHogProperty && !isNonDollarPostHogProperty
+                          })
+                      )
+                    : theExpandedEvent.properties
+
+                return Object.fromEntries(
+                    Object.entries(propsFiltered).filter(([key]) => {
+                        if (hidePostHogFlags) {
+                            if (key === '$active_feature_flags') {
+                                return false
+                            } else if (key.startsWith('$feature/')) {
+                                return false
+                            }
+                        }
+                        return true
+                    })
+                )
+            },
+        ],
     }),
     afterMount(({ values, actions }) => {
         values.posthog?.on('eventCaptured', (e) => {