spike: web performance

frontend/src/scenes/session-recordings/player/PlayerController.tsx

@@ -11,22 +11,14 @@ import { LemonButton, LemonButtonWithPopup } from 'lib/components/LemonButton'
 import { IconExport, IconFullScreen, IconPause, IconPlay, IconSkipInactivity } from 'lib/components/icons'
 import { Tooltip } from 'lib/components/Tooltip'
 import clsx from 'clsx'
-import { PlayerInspectorPicker } from './PlayerInspector'
 import { playerSettingsLogic } from './playerSettingsLogic'
 import { More } from 'lib/components/LemonButton/More'
 import { LemonCheckbox } from '@posthog/lemon-ui'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { FEATURE_FLAGS } from 'lib/constants'
+import { PlayerMetaLinks } from './PlayerMetaLinks'
 
-interface PlayerControllerProps extends SessionRecordingPlayerLogicProps {
-    hideInspectorPicker?: boolean
-}
-
-export function PlayerController({
-    sessionRecordingId,
-    playerKey,
-    hideInspectorPicker = false,
-}: PlayerControllerProps): JSX.Element {
+export function PlayerController({ sessionRecordingId, playerKey }: SessionRecordingPlayerLogicProps): JSX.Element {
     const logic = sessionRecordingPlayerLogic({ sessionRecordingId, playerKey })
     const { togglePlayPause, exportRecordingToFile } = useActions(logic)
     const { currentPlayerState } = useValues(logic)
@@ -41,10 +33,8 @@ export function PlayerController({
         <div className="p-3 bg-light flex flex-col select-none space-y-2">
             <Seekbar sessionRecordingId={sessionRecordingId} playerKey={playerKey} />
             <div className="flex justify-between items-center h-8 gap-2">
-                <div className="flex items-center gap-2 flex-1">
-                    {!hideInspectorPicker && !isFullScreen && (
-                        <PlayerInspectorPicker sessionRecordingId={sessionRecordingId} playerKey={playerKey} />
-                    )}
+                <div className="flex-1">
+                    <PlayerMetaLinks sessionRecordingId={sessionRecordingId} playerKey={playerKey} />
                 </div>
                 <div className="flex items-center gap-1">
                     <SeekSkip sessionRecordingId={sessionRecordingId} playerKey={playerKey} direction="backward" />

frontend/src/scenes/session-recordings/player/PlayerMetaLinks.tsx

@@ -34,13 +34,8 @@ export function PlayerMetaLinks({ sessionRecordingId, playerKey }: SessionRecord
     }
 
     return (
-        <div className="flex flex-row justify-end gap-2">
-            <LemonButton
-                icon={<IconLink />}
-                onClick={onShare}
-                tooltip="Share recording"
-                size={isFullScreen ? 'small' : 'medium'}
-            >
+        <div className="flex flex-row gap-2">
+            <LemonButton icon={<IconLink />} onClick={onShare} tooltip="Share recording" size={'small'}>
                 Share
             </LemonButton>
             <LemonButton
@@ -50,7 +45,7 @@ export function PlayerMetaLinks({ sessionRecordingId, playerKey }: SessionRecord
                         <IconPlus />
                     </IconWithCount>
                 }
-                size={isFullScreen ? 'small' : 'medium'}
+                size={'small'}
                 tooltip="Save recording to static playlist"
             >
                 Save

frontend/src/scenes/session-recordings/player/SessionRecordingPlayer.tsx

@@ -10,8 +10,7 @@ import {
 import { PlayerFrame } from 'scenes/session-recordings/player/PlayerFrame'
 import { PlayerController } from 'scenes/session-recordings/player/PlayerController'
 import { LemonDivider } from 'lib/components/LemonDivider'
-import { PlayerInspector, PlayerInspectorPicker } from 'scenes/session-recordings/player/PlayerInspector'
-import { PlayerFilter } from 'scenes/session-recordings/player/list/PlayerFilter'
+import { PlayerInspector } from 'scenes/session-recordings/player/PlayerInspector'
 import { PlayerMeta } from './PlayerMeta'
 import { sessionRecordingDataLogic } from './sessionRecordingDataLogic'
 import clsx from 'clsx'
@@ -155,22 +154,11 @@ export function SessionRecordingPlayer({
                     />
                 </div>
                 <LemonDivider className="my-0" />
-                <PlayerController
-                    sessionRecordingId={sessionRecordingId}
-                    playerKey={playerKey}
-                    hideInspectorPicker={size !== 'small'}
-                />
+                <PlayerController sessionRecordingId={sessionRecordingId} playerKey={playerKey} />
             </div>
             {!isFullScreen && (
                 <div className="SessionRecordingPlayer__inspector">
-                    {size !== 'small' && (
-                        <div className="border-b p-2">
-                            <PlayerInspectorPicker sessionRecordingId={sessionRecordingId} playerKey={playerKey} />
-                        </div>
-                    )}
-                    <PlayerFilter sessionRecordingId={sessionRecordingId} playerKey={playerKey} matching={matching} />
-                    <LemonDivider className="my-0" />
-                    <PlayerInspector sessionRecordingId={sessionRecordingId} playerKey={playerKey} />
+                    <PlayerInspector {...logicProps} />
                 </div>
             )}
         </div>

frontend/src/scenes/session-recordings/player/list/PlayerFilter.tsx

@@ -11,90 +11,3 @@ import { LemonInput } from 'lib/components/LemonInput/LemonInput'
 import { eventsListLogic } from 'scenes/session-recordings/player/list/eventsListLogic'
 import { consoleLogsListLogic } from 'scenes/session-recordings/player/list/consoleLogsListLogic'
 import { SessionRecordingPlayerLogicProps } from '../sessionRecordingPlayerLogic'
-
-export function PlayerFilter({
-    sessionRecordingId,
-    playerKey,
-    matching,
-}: SessionRecordingPlayerLogicProps): JSX.Element {
-    const logicProps = { sessionRecordingId, playerKey }
-    const { windowIdFilter, showOnlyMatching, tab } = useValues(sharedListLogic(logicProps))
-    const { setWindowIdFilter, setShowOnlyMatching } = useActions(sharedListLogic(logicProps))
-    const { eventListLocalFilters } = useValues(eventsListLogic(logicProps))
-    const { setEventListLocalFilters } = useActions(eventsListLogic(logicProps))
-    const { consoleListLocalFilters } = useValues(consoleLogsListLogic(logicProps))
-    const { setConsoleListLocalFilters } = useActions(consoleLogsListLogic(logicProps))
-    const { windowIds } = useValues(playerMetaLogic(logicProps))
-
-    return (
-        <div className="PlayerFilter flex justify-between gap-2 bg-side p-2 flex-wrap">
-            <div className="flex items-center gap-2 flex-wrap">
-                {tab === SessionRecordingPlayerTab.EVENTS ? (
-                    <>
-                        <LemonInput
-                            key="event-list-search-input"
-                            onChange={(query) => setEventListLocalFilters({ query })}
-                            placeholder="Search events"
-                            type="search"
-                            value={eventListLocalFilters.query}
-                        />
-                        {matching?.length ? (
-                            <LemonSwitch
-                                checked={showOnlyMatching}
-                                bordered
-                                label={
-                                    <span className="flex items-center gap-2 whitespace-nowrap">
-                                        Only show matching events
-                                        <Tooltip
-                                            title="Display only the events that match the global filter."
-                                            className="text-base text-muted-alt mr-2"
-                                        >
-                                            <IconInfo />
-                                        </Tooltip>
-                                    </span>
-                                }
-                                onChange={setShowOnlyMatching}
-                            />
-                        ) : null}
-                    </>
-                ) : (
-                    <LemonInput
-                        key="console-list-search-input"
-                        onChange={(query) => setConsoleListLocalFilters({ query })}
-                        placeholder="Search console logs"
-                        type="search"
-                        value={consoleListLocalFilters.query}
-                    />
-                )}
-            </div>
-
-            {windowIds.length > 1 ? (
-                <div className="flex items-center gap-2 flex-wrap">
-                    <LemonSelect
-                        data-attr="player-window-select"
-                        value={windowIdFilter ?? undefined}
-                        onChange={(val) => setWindowIdFilter(val as WindowOption)}
-                        options={[
-                            {
-                                value: RecordingWindowFilter.All,
-                                label: 'All windows',
-                                icon: <IconWindow value="A" className="text-muted" />,
-                            },
-                            ...windowIds.map((windowId, index) => ({
-                                value: windowId,
-                                label: `Window ${index + 1}`,
-                                icon: <IconWindow value={index + 1} className="text-muted" />,
-                            })),
-                        ]}
-                    />
-                    <Tooltip
-                        title="Each recording window translates to a distinct browser tab or window."
-                        className="text-base text-muted-alt mr-2"
-                    >
-                        <IconInfo />
-                    </Tooltip>
-                </div>
-            ) : null}
-        </div>
-    )
-}

frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.scss

@@ -18,9 +18,7 @@
         width: 100%;
 
         @include screen($md) {
-            width: 30%;
-            min-width: 350px;
-            max-width: 400px;
+            width: 350px;
         }
 
         .SessionRecordingsPlaylist__list-item {

frontend/src/types.ts

@@ -566,6 +566,7 @@ export enum SessionRecordingUsageType {
 export enum SessionRecordingPlayerTab {
     EVENTS = 'events',
     CONSOLE = 'console',
+    PERFORMANCE = 'performance',
 }
 
 export enum SessionPlayerState {

plugin-server/src/config/kafka-topics.ts

@@ -10,6 +10,7 @@ export const KAFKA_PERSON = `${prefix}clickhouse_person${suffix}`
 export const KAFKA_PERSON_UNIQUE_ID = `${prefix}clickhouse_person_unique_id${suffix}`
 export const KAFKA_PERSON_DISTINCT_ID = `${prefix}clickhouse_person_distinct_id${suffix}`
 export const KAFKA_SESSION_RECORDING_EVENTS = `${prefix}clickhouse_session_recording_events${suffix}`
+export const KAFKA_PERFORMANCE_EVENTS = `${prefix}clickhouse_performance_events${suffix}`
 export const KAFKA_EVENTS_PLUGIN_INGESTION = `${prefix}events_plugin_ingestion${suffix}`
 export const KAFKA_PLUGIN_LOG_ENTRIES = `${prefix}plugin_log_entries${suffix}`
 export const KAFKA_EVENTS_DEAD_LETTER_QUEUE = `${prefix}events_dead_letter_queue${suffix}`

plugin-server/src/types.ts

@@ -838,6 +838,112 @@ export interface RawSessionRecordingEvent {
     created_at: string
 }
 
+export interface RawPerformanceEvent {
+    uuid: string
+    team_id: number
+    distinct_id: string
+    session_id: string
+    window_id: string
+    pageview_id: string
+    current_url: string
+
+    // BASE_EVENT_COLUMNS
+    time_origin: number
+    origin_timestamp: string
+    entry_type: string
+    name: string
+
+    // RESOURCE_EVENT_COLUMNS
+    start_time: number
+    redirect_start: number
+    redirect_end: number
+    worker_start: number
+    fetch_start: number
+    domain_lookup_start: number
+    domain_lookup_end: number
+    connect_start: number
+    secure_connection_start: number
+    connect_end: number
+    request_start: number
+    response_start: number
+    response_end: number
+    decoded_body_size: number
+    encoded_body_size: number
+
+    initiator_type: string
+    next_hop_protocol: string
+    render_blocking_status: string
+    response_status: number
+    transfer_size: number
+
+    // LARGEST_CONTENTFUL_PAINT_EVENT_COLUMNS
+    largest_contentful_paint_element: string
+    largest_contentful_paint_render_time: number
+    largest_contentful_paint_load_time: number
+    largest_contentful_paint_size: number
+    largest_contentful_paint_id: string
+    largest_contentful_paint_url: string
+
+    // NAVIGATION_EVENT_COLUMNS
+    dom_complete: number
+    dom_content_loaded_event: number
+    dom_interactive: number
+    load_event_end: number
+    load_event_start: number
+    redirect_count: number
+    navigation_type: string
+    unload_event_end: number
+    unload_event_start: number
+}
+
+export const PerformanceEventReverseMapping: { [key: number]: keyof RawPerformanceEvent } = {
+    // BASE_PERFORMANCE_EVENT_COLUMNS
+    0: 'entry_type',
+    1: 'time_origin',
+    2: 'name',
+
+    // RESOURCE_EVENT_COLUMNS
+    3: 'start_time',
+    4: 'redirect_start',
+    5: 'redirect_end',
+    6: 'worker_start',
+    7: 'fetch_start',
+    8: 'domain_lookup_start',
+    9: 'domain_lookup_end',
+    10: 'connect_start',
+    11: 'secure_connection_start',
+    12: 'connect_end',
+    13: 'request_start',
+    14: 'response_start',
+    15: 'response_end',
+    16: 'decoded_body_size',
+    17: 'encoded_body_size',
+    18: 'initiator_type',
+    19: 'next_hop_protocol',
+    20: 'render_blocking_status',
+    21: 'response_status',
+    22: 'transfer_size',
+
+    // LARGEST_CONTENTFUL_PAINT_EVENT_COLUMNS
+    23: 'largest_contentful_paint_element',
+    24: 'largest_contentful_paint_render_time',
+    25: 'largest_contentful_paint_load_time',
+    26: 'largest_contentful_paint_size',
+    27: 'largest_contentful_paint_id',
+    28: 'largest_contentful_paint_url',
+
+    // NAVIGATION_EVENT_COLUMNS
+    29: 'dom_complete',
+    30: 'dom_content_loaded_event',
+    31: 'dom_interactive',
+    32: 'load_event_end',
+    33: 'load_event_start',
+    34: 'redirect_count',
+    35: 'navigation_type',
+    36: 'unload_event_end',
+    37: 'unload_event_start',
+}
+
 export enum TimestampFormat {
     ClickHouseSecondPrecision = 'clickhouse-second-precision',
     ClickHouse = 'clickhouse',

plugin-server/src/worker/ingestion/event-pipeline/3-pluginsProcessEventStep.ts

@@ -5,6 +5,8 @@ import { runProcessEvent } from '../../plugins/run'
 import { LazyPersonContainer } from '../lazy-person-container'
 import { EventPipelineRunner, StepResult } from './runner'
 
+const EVENTS_TO_IGNORE = ['$snapshot', '$performance_event']
+
 export async function pluginsProcessEventStep(
     runner: EventPipelineRunner,
     event: PluginEvent,
@@ -13,7 +15,7 @@ export async function pluginsProcessEventStep(
     let processedEvent: PluginEvent | null = event
 
     // run processEvent on all events that are not $snapshot
-    if (event.event !== '$snapshot') {
+    if (!EVENTS_TO_IGNORE.includes(event.event)) {
         processedEvent = await runInstrumentedFunction({
             server: runner.hub,
             event,