+ 
-
- )
- }
-
- return null
-}
-
export function ItemEvent({ item }: ItemEventProps): JSX.Element {
const subValue =
item.data.event === '$pageview' ? (
@@ -110,7 +64,7 @@ export function ItemEvent({ item }: ItemEventProps): JSX.Element {
) : item.data.event === '$web_vitals' ? (
{editable && !!parsedElements.length && (
)}
@@ -161,7 +176,10 @@ export function HTMLElementsDisplay({
<>
{elementsToShowDepth ? (
- }
- >
- Selector:
-
{chosenSelector}
+ {chosenSelector}
@@ -177,8 +195,9 @@ export function HTMLElementsDisplay({
parsedCSSSelectors={parsedSelectors}
onChange={(index, s) => setParsedSelectors({ ...parsedSelectors, [index]: s })}
selectedText={selectedText}
+ size={size}
/>
-
{indent}
diff --git a/frontend/src/lib/taxonomy.tsx b/frontend/src/lib/taxonomy.tsx
index ff5184cff43cf..79b1284b72a1f 100644
--- a/frontend/src/lib/taxonomy.tsx
+++ b/frontend/src/lib/taxonomy.tsx
@@ -279,16 +279,13 @@ export const CORE_FILTER_DEFINITIONS_BY_GROUP = {
},
$lib_rate_limit_remaining_tokens: {
label: 'Clientside rate limit remaining tokens',
- description: (
-
- Remaining rate limit tokens for the posthog-js library client-side rate limiting implementation.
-
- ),
+ description:
+ 'Remaining rate limit tokens for the posthog-js library client-side rate limiting implementation.',
examples: ['100'],
},
token: {
label: 'Token',
- description: Token used for authentication.,
+ description: 'Token used for authentication.',
examples: ['ph_abcdefg'],
},
$ce_version: {
@@ -335,12 +332,12 @@ export const CORE_FILTER_DEFINITIONS_BY_GROUP = {
// session recording
$replay_minimum_duration: {
label: 'Replay config - minimum duration',
- description: Config for minimum duration before emitting a session recording.,
+ description: 'Config for minimum duration before emitting a session recording.',
examples: ['1000'],
},
$replay_sample_rate: {
label: 'Replay config - sample rate',
- description: Config for sampling rate of session recordings.,
+ description: 'Config for sampling rate of session recordings.',
examples: ['0.1'],
},
$console_log_recording_enabled_server_side: {
@@ -356,40 +353,39 @@ export const CORE_FILTER_DEFINITIONS_BY_GROUP = {
},
$session_recording_start_reason: {
label: 'Session recording start reason',
- description: (
-
- Reason for starting the session recording. Useful for e.g. if you have sampling enabled and want to
- see on batch exported events which sessions have recordings available.
-
- ),
+ description:
+ 'Reason for starting the session recording. Useful for e.g. if you have sampling enabled and want to see on batch exported events which sessions have recordings available.',
examples: ['sampling_override', 'recording_initialized', 'linked_flag_match'],
},
$session_recording_canvas_recording: {
label: 'Session recording canvas recording',
- description: Session recording canvas capture config.,
+ description: 'Session recording canvas capture config.',
examples: ['{"enabled": false}'],
},
$session_recording_network_payload_capture: {
label: 'Session recording network payload capture',
- description: Session recording network payload capture config.,
+ description: 'Session recording network payload capture config.',
examples: ['{"recordHeaders": false}'],
},
+ $configured_session_timeout_ms: {
+ label: 'Configured session timeout',
+ description: 'Configured session timeout in milliseconds.',
+ examples: ['1800000'],
+ },
+ $replay_script_config: {
+ label: 'Replay script config',
+ description: 'Sets an alternative recorder script for the web sdk.',
+ examples: ['{"script": "recorder-next""}'],
+ },
$session_recording_url_trigger_activated_session: {
label: 'Session recording URL trigger activated session',
- description: (
-
- Session recording URL trigger activated session config. Used by posthog-js to track URL activation
- of session replay.
-
- ),
+ description:
+ 'Session recording URL trigger activated session config. Used by posthog-js to track URL activation of session replay.',
},
$session_recording_url_trigger_status: {
label: 'Session recording URL trigger status',
- description: (
-
- Session recording URL trigger status. Used by posthog-js to track URL activation of session replay.
-
- ),
+ description:
+ 'Session recording URL trigger status. Used by posthog-js to track URL activation of session replay.',
},
$recording_status: {
label: 'Session recording status',
@@ -464,17 +460,17 @@ export const CORE_FILTER_DEFINITIONS_BY_GROUP = {
},
$exception_capture_endpoint: {
label: 'Exception capture endpoint',
- description: Endpoint used by posthog-js exception autocapture.,
+ description: 'Endpoint used by posthog-js exception autocapture.',
examples: ['/e/'],
},
$exception_capture_endpoint_suffix: {
label: 'Exception capture endpoint',
- description: Endpoint used by posthog-js exception autocapture.,
+ description: 'Endpoint used by posthog-js exception autocapture.',
examples: ['/e/'],
},
$exception_capture_enabled_server_side: {
label: 'Exception capture enabled server side',
- description: Whether exception autocapture was enabled in remote config.,
+ description: 'Whether exception autocapture was enabled in remote config.',
},
// GeoIP
@@ -1193,7 +1189,7 @@ export const CORE_FILTER_DEFINITIONS_BY_GROUP = {
},
$web_vitals_allowed_metrics: {
label: 'Web vitals allowed metrics',
- description: Allowed web vitals metrics config.,
+ description: 'Allowed web vitals metrics config.',
examples: ['["LCP", "CLS"]'],
},
@@ -1319,72 +1315,72 @@ export const CORE_FILTER_DEFINITIONS_BY_GROUP = {
},
$start_timestamp: {
label: 'Start timestamp',
- description: The timestamp of the first event from this session.,
+ description: 'The timestamp of the first event from this session.',
examples: [new Date().toISOString()],
},
$end_timestamp: {
label: 'End timestamp',
- description: The timestamp of the last event from this session,
+ description: 'The timestamp of the last event from this session',
examples: [new Date().toISOString()],
},
$entry_current_url: {
label: 'Entry URL',
- description: The first URL visited in this session,
+ description: 'The first URL visited in this session.',
examples: ['https://example.com/interesting-article?parameter=true'],
},
$entry_pathname: {
label: 'Entry pathname',
- description: The first pathname visited in this session,
+ description: 'The first pathname visited in this session.',
examples: ['/interesting-article?parameter=true'],
},
$end_current_url: {
label: 'Entry URL',
- description: The first URL visited in this session,
+ description: 'The first URL visited in this session.',
examples: ['https://example.com/interesting-article?parameter=true'],
},
$end_pathname: {
label: 'Entry pathname',
- description: The first pathname visited in this session,
+ description: 'The first pathname visited in this session.',
examples: ['/interesting-article?parameter=true'],
},
$exit_current_url: {
label: 'Exit URL',
- description: The last URL visited in this session,
+ description: 'The last URL visited in this session.',
examples: ['https://example.com/interesting-article?parameter=true'],
},
$exit_pathname: {
label: 'Exit pathname',
- description: The last pathname visited in this session,
+ description: 'The last pathname visited in this session.',
examples: ['https://example.com/interesting-article?parameter=true'],
},
$pageview_count: {
label: 'Pageview count',
- description: The number of page view events in this session,
+ description: 'The number of page view events in this session.',
examples: ['123'],
},
$autocapture_count: {
label: 'Autocapture count',
- description: The number of autocapture events in this session,
+ description: 'The number of autocapture events in this session.',
examples: ['123'],
},
$screen_count: {
label: 'Screen count',
- description: The number of screen events in this session,
+ description: 'The number of screen events in this session.',
examples: ['123'],
},
$channel_type: {
label: 'Channel type',
- description: What type of acquisition channel this traffic came from.,
+ description: 'What type of acquisition channel this traffic came from.',
examples: ['Paid Search', 'Organic Video', 'Direct'],
},
$is_bounce: {
label: 'Is bounce',
- description: Whether the session was a bounce.,
+ description: 'Whether the session was a bounce.',
examples: ['true', 'false'],
},
$last_external_click_url: {
label: 'Last external click URL',
- description: The last external URL clicked in this session,
+ description: 'The last external URL clicked in this session.',
examples: ['https://example.com/interesting-article?parameter=true'],
},
$vitals_lcp: {
diff --git a/frontend/src/lib/utils/event-property-utls.tsx b/frontend/src/lib/utils/event-property-utls.tsx
new file mode 100644
index 0000000000000..bd9ffbacb63ae
--- /dev/null
+++ b/frontend/src/lib/utils/event-property-utls.tsx
@@ -0,0 +1,78 @@
+import { Tooltip } from 'lib/lemon-ui/Tooltip'
+
+import { ElementType } from '~/types'
+
+interface AutocapturedImage {
+ src: string | undefined
+ width: string | undefined
+ height: string | undefined
+}
+
+export function autocaptureToImage(elements: ElementType[]): null | AutocapturedImage {
+ const find = elements.find((el) => el.tag_name === 'img')
+ const image = {
+ src: find?.attributes?.attr__src,
+ width: find?.attributes?.attr__width,
+ height: find?.attributes?.attr__height,
+ }
+ return image.src ? image : null
+}
+
+export function AutocaptureImage({ img }: { img: AutocapturedImage }): JSX.Element | null {
+ if (img) {
+ return (
+
+ {/* Transparent grid background */}
+
+
+
+
+ )
+ }
+
+ return null
+}
+
+export function AutocaptureImageTab({ elements }: { elements: ElementType[] }): JSX.Element | null {
+ const img = autocaptureToImage(elements)
+ if (img) {
+ return (
+
+ setActiveTab(newKey)}
tabs={[
diff --git a/frontend/src/scenes/session-recordings/player/inspector/components/ItemEvent.tsx b/frontend/src/scenes/session-recordings/player/inspector/components/ItemEvent.tsx
index 6cd133ea5d92d..d5236311b6a47 100644
--- a/frontend/src/scenes/session-recordings/player/inspector/components/ItemEvent.tsx
+++ b/frontend/src/scenes/session-recordings/player/inspector/components/ItemEvent.tsx
@@ -1,23 +1,24 @@
import './ImagePreview.scss'
-import { LemonButton, LemonDivider, Tooltip } from '@posthog/lemon-ui'
+import { LemonButton, LemonDivider, LemonTabs } from '@posthog/lemon-ui'
import { useValues } from 'kea'
import { ErrorDisplay } from 'lib/components/Errors/ErrorDisplay'
+import { HTMLElementsDisplay } from 'lib/components/HTMLElementsDisplay/HTMLElementsDisplay'
import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
import { TitledSnack } from 'lib/components/TitledSnack'
import { IconOpenInNew } from 'lib/lemon-ui/icons'
import { Spinner } from 'lib/lemon-ui/Spinner'
-import { POSTHOG_EVENT_PROMOTED_PROPERTIES } from 'lib/taxonomy'
+import { CORE_FILTER_DEFINITIONS_BY_GROUP, POSTHOG_EVENT_PROMOTED_PROPERTIES } from 'lib/taxonomy'
import { autoCaptureEventToDescription, capitalizeFirstLetter, isString } from 'lib/utils'
+import { AutocaptureImageTab, AutocapturePreviewImage, autocaptureToImage } from 'lib/utils/event-property-utls'
+import { useState } from 'react'
import { insightUrlForEvent } from 'scenes/insights/utils'
import { eventPropertyFilteringLogic } from 'scenes/session-recordings/player/inspector/components/eventPropertyFilteringLogic'
-import { DEFAULT_INSPECTOR_ROW_HEIGHT } from 'scenes/session-recordings/player/inspector/PlayerInspectorList'
-
-import { ElementType } from '~/types'
import { InspectorListItemEvent } from '../playerInspectorLogic'
import { SimpleKeyValueList } from './SimpleKeyValueList'
+
export interface ItemEventProps {
item: InspectorListItemEvent
}
@@ -54,53 +55,6 @@ function SummarizeWebVitals({ properties }: { properties: Record })
)
}
-function autocaptureToImage(
- elements: ElementType[]
-): null | { src: string | undefined; width: string | undefined; height: string | undefined } {
- const find = elements.find((el) => el.tag_name === 'img')
- const image = {
- src: find?.attributes?.attr__src,
- width: find?.attributes?.attr__width,
- height: find?.attributes?.attr__height,
- }
- return image.src ? image : null
-}
-
-function AutocaptureImage({ item }: ItemEventProps): JSX.Element | null {
- const img = autocaptureToImage(item.data.elements)
- if (img) {
- return (
-
- {/* Transparent grid background */}
-
-
- {/* Image preview */}
-
-
@@ -168,7 +137,59 @@ export function ItemEventDetail({ item }: ItemEventProps): JSX.Element {
item.data.event === '$exception' ? (
setActiveTab(newKey)}
+ tabs={[
+ {
+ key: 'properties',
+ label: 'Properties',
+ content: (
+
+ {JSON.stringify(item.data.properties, null, 2)}
+
+ ),
+ },
+ ]}
+ />
)
) : (