@@ -129,7 +114,10 @@ export function ItemEvent({ item, expanded, setExpanded }: ItemEventProps): JSX.
item.data.event === '$exception' ? (
) : (
-
+
)
) : (
diff --git a/frontend/src/scenes/session-recordings/player/inspector/components/SimpleKeyValueList.tsx b/frontend/src/scenes/session-recordings/player/inspector/components/SimpleKeyValueList.tsx
index 7f51b758bd253..9b530fce41d81 100644
--- a/frontend/src/scenes/session-recordings/player/inspector/components/SimpleKeyValueList.tsx
+++ b/frontend/src/scenes/session-recordings/player/inspector/components/SimpleKeyValueList.tsx
@@ -1,6 +1,8 @@
// A React component that renders a list of key-value pairs in a simple way.
import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
+import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
+import { getCoreFilterDefinition } from 'lib/taxonomy'
import { useEffect, useState } from 'react'
export interface SimpleKeyValueListProps {
@@ -22,10 +24,14 @@ export function SimpleKeyValueList({
useEffect(() => {
const sortedItems = Object.entries(item).sort((a, b) => {
- if (a[0] < b[0]) {
+ // if this is a posthog property we want to sort by its label
+ const left = getCoreFilterDefinition(a[0], TaxonomicFilterGroupType.EventProperties)?.label || a[0]
+ const right = getCoreFilterDefinition(b[0], TaxonomicFilterGroupType.EventProperties)?.label || b[0]
+
+ if (left < right) {
return -1
}
- if (a[0] > b[0]) {
+ if (left > right) {
return 1
}
return 0
diff --git a/frontend/src/scenes/session-recordings/player/inspector/components/eventPropertyFilteringLogic.ts b/frontend/src/scenes/session-recordings/player/inspector/components/eventPropertyFilteringLogic.ts
new file mode 100644
index 0000000000000..2f3ca7b84ae6c
--- /dev/null
+++ b/frontend/src/scenes/session-recordings/player/inspector/components/eventPropertyFilteringLogic.ts
@@ -0,0 +1,61 @@
+import { connect, kea, path, selectors } from 'kea'
+import { userPreferencesLogic } from 'lib/logic/userPreferencesLogic'
+import { NON_DOLLAR_POSTHOG_PROPERTY_KEYS, PROPERTY_KEYS } from 'lib/taxonomy'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
+
+import type { eventPropertyFilteringLogicType } from './eventPropertyFilteringLogicType'
+
+export const eventPropertyFilteringLogic = kea([
+ path(['scenes', 'session-recordings', 'player', 'inspector', 'components', 'eventPropertyFilteringLogic']),
+ connect({
+ values: [userPreferencesLogic, ['hidePostHogPropertiesInTable'], preflightLogic, ['isCloudOrDev']],
+ }),
+ selectors({
+ promoteProperties: [
+ () => [],
+ () => {
+ return (event: string): string[] | undefined => {
+ if (['$pageview', '$pageleave'].includes(event)) {
+ return ['$current_url', '$title', '$referrer']
+ } else if (event === '$groupidentify') {
+ return ['$group_type', '$group_key', '$group_set']
+ } else if (event === '$screen') {
+ return ['$screen_name']
+ } else if (event === '$web_vitals') {
+ return [
+ '$web_vitals_FCP_value',
+ '$web_vitals_CLS_value',
+ '$web_vitals_INP_value',
+ '$web_vitals_LCP_value',
+ '$web_vitals_FCP_event',
+ '$web_vitals_CLS_event',
+ '$web_vitals_INP_event',
+ '$web_vitals_LCP_event',
+ ]
+ } else if (event === '$set') {
+ return ['$set', '$set_once']
+ }
+ }
+ },
+ ],
+ filterProperties: [
+ (s) => [s.hidePostHogPropertiesInTable, s.isCloudOrDev],
+ (hidePostHogPropertiesInTable, isCloudOrDev) => {
+ return (props: Record) => {
+ if (!hidePostHogPropertiesInTable) {
+ return props
+ }
+
+ return Object.fromEntries(
+ Object.entries(props).filter(([key]) => {
+ const isPostHogProperty = key.startsWith('$') && PROPERTY_KEYS.includes(key)
+ const isNonDollarPostHogProperty =
+ isCloudOrDev && NON_DOLLAR_POSTHOG_PROPERTY_KEYS.includes(key)
+ return !isPostHogProperty && !isNonDollarPostHogProperty
+ })
+ )
+ }
+ },
+ ],
+ }),
+])