Skip to content

Commit

Permalink
feat: report when player state is error
Browse files Browse the repository at this point in the history
  • Loading branch information
@pauldambra
pauldambra committed Dec 17, 2024
1 parent 9b7b519 commit f4e59f0
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 20 deletions.
12 changes: 11 additions & 1 deletion frontend/src/scenes/session-recordings/player/sessionRecordingPlayerLogic.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1018,7 +1018,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 = []
},

Expand Down Expand Up @@ -1143,6 +1143,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 }) => {
Expand Down
64 changes: 46 additions & 18 deletions frontend/src/toolbar/debug/EventDebugMenu.tsx
View file
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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 {
Expand All @@ -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,
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand All @@ -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}
Expand Down
52 changes: 51 additions & 1 deletion frontend/src/toolbar/debug/eventDebugMenuLogic.ts
View file
Original file line number Diff line number Diff line change
@@ -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'

Expand All @@ -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,
{
Expand Down Expand Up @@ -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) => {
Expand Down

0 comments on commit f4e59f0

Please sign in to comment.