feat: a little doctor tab tidying (#25306)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
PostHog · Oct 1, 2024 · 4008edf · 4008edf
1 parent 954852f
commit 4008edf
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 16 deletions.
diff --git a/frontend/__snapshots__/lemon-ui-lemon-input-select--default--dark.png b/frontend/__snapshots__/lemon-ui-lemon-input-select--default--dark.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-input-select--default--light.png b/frontend/__snapshots__/lemon-ui-lemon-input-select--default--light.png
diff --git a/frontend/src/scenes/session-recordings/player/inspector/components/ItemDoctor.tsx b/frontend/src/scenes/session-recordings/player/inspector/components/ItemDoctor.tsx
@@ -1,5 +1,5 @@
 import { LemonButton } from '@posthog/lemon-ui'
-import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
+import { SimpleKeyValueList } from 'scenes/session-recordings/player/inspector/components/SimpleKeyValueList'
 
 import { InspectorListItemDoctor } from '../playerInspectorLogic'
 
@@ -23,13 +23,7 @@ export function ItemDoctor({ item, expanded, setExpanded }: ItemDoctorProps): JS
             </LemonButton>
 
             {expanded && (
-                <div className="p-2 text-xs border-t">
-                    {item.data && (
-                        <CodeSnippet language={Language.JSON} wrap thing={`custom event - ${item.tag}`}>
-                            {JSON.stringify(item.data, null, 2)}
-                        </CodeSnippet>
-                    )}
-                </div>
+                <div className="p-2 text-xs border-t">{item.data && <SimpleKeyValueList item={item.data} />}</div>
             )}
         </>
     )

diff --git a/frontend/src/scenes/session-recordings/player/inspector/playerInspectorLogic.ts b/frontend/src/scenes/session-recordings/player/inspector/playerInspectorLogic.ts
@@ -6,7 +6,7 @@ import api from 'lib/api'
 import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import { Dayjs, dayjs } from 'lib/dayjs'
 import { getCoreFilterDefinition } from 'lib/taxonomy'
-import { eventToDescription, objectsEqual, toParams } from 'lib/utils'
+import { eventToDescription, humanizeBytes, objectsEqual, toParams } from 'lib/utils'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import {
     InspectorListItemPerformance,
@@ -137,6 +137,29 @@ function timeRelativeToStart(
     return { timestamp, timeInRecording }
 }
 
+function niceify(tag: string): string {
+    return tag.replace(/\$/g, '').replace(/_/g, ' ')
+}
+
+function estimateSize(snapshot: unknown): number {
+    return new Blob([JSON.stringify(snapshot || '')]).size
+}
+
+function getPayloadFor(customEvent: customEvent, tag: string): Record<string, any> {
+    if (tag === '$posthog_config') {
+        return (customEvent.data.payload as any)?.config as Record<string, any>
+    }
+
+    if (tag === '$session_options') {
+        return {
+            ...((customEvent.data.payload as any)?.sessionRecordingOptions as Record<string, any>),
+            activePlugins: (customEvent.data.payload as any)?.activePlugins,
+        }
+    }
+
+    return customEvent.data.payload as Record<string, any>
+}
+
 export const playerInspectorLogic = kea<playerInspectorLogicType>([
     path((key) => ['scenes', 'session-recordings', 'player', 'playerInspectorLogic', key]),
     props({} as PlayerInspectorLogicProps),
@@ -336,7 +359,15 @@ export const playerInspectorLogic = kea<playerInspectorLogicType>([
                             const customEvent = snapshot as customEvent
                             const tag = customEvent.data.tag
 
-                            if (['$pageview', 'window hidden', 'browser offline', 'browser online'].includes(tag)) {
+                            if (
+                                [
+                                    '$pageview',
+                                    'window hidden',
+                                    'browser offline',
+                                    'browser online',
+                                    'window visible',
+                                ].includes(tag)
+                            ) {
                                 return
                             }
 
@@ -346,10 +377,10 @@ export const playerInspectorLogic = kea<playerInspectorLogicType>([
                                 type: SessionRecordingPlayerTab.DOCTOR,
                                 timestamp,
                                 timeInRecording,
-                                tag,
-                                search: tag,
+                                tag: niceify(tag),
+                                search: niceify(tag),
                                 window_id: windowId,
-                                data: customEvent.data.payload as Record<string, any>,
+                                data: getPayloadFor(customEvent, tag),
                             })
                         }
                         if (isFullSnapshotEvent(snapshot)) {
@@ -359,10 +390,10 @@ export const playerInspectorLogic = kea<playerInspectorLogicType>([
                                 type: SessionRecordingPlayerTab.DOCTOR,
                                 timestamp,
                                 timeInRecording,
-                                tag: 'fullSnapshotEvent',
-                                search: 'fullSnapshotEvent',
+                                tag: 'full snapshot event',
+                                search: 'full snapshot event',
                                 window_id: windowId,
-                                data: {},
+                                data: { snapshotSize: humanizeBytes(estimateSize(snapshot)) },
                             })
                         }
                     })