feat: show recording for exception (#24680)

frontend/src/scenes/error-tracking/ErrorTracking.scss

@@ -1,4 +1,4 @@
 .ErrorTracking__group {
-    height: calc(100vh - 16rem);
+    height: calc(100vh - 12rem);
     min-height: 25rem;
 }

frontend/src/scenes/error-tracking/ErrorTrackingGroupScene.tsx

@@ -1,13 +1,12 @@
 import './ErrorTracking.scss'
 
-import { LemonDivider, LemonTabs } from '@posthog/lemon-ui'
-import { useActions, useValues } from 'kea'
+import { LemonDivider } from '@posthog/lemon-ui'
 import { base64Decode } from 'lib/utils'
 import { SceneExport } from 'scenes/sceneTypes'
+import { SessionPlayerModal } from 'scenes/session-recordings/player/modal/SessionPlayerModal'
 
 import ErrorTrackingFilters from './ErrorTrackingFilters'
-import { ErrorGroupTab, errorTrackingGroupSceneLogic } from './errorTrackingGroupSceneLogic'
-import { BreakdownsTab } from './groups/BreakdownsTab'
+import { errorTrackingGroupSceneLogic } from './errorTrackingGroupSceneLogic'
 import { OverviewTab } from './groups/OverviewTab'
 
 export const scene: SceneExport = {
@@ -19,31 +18,15 @@ export const scene: SceneExport = {
 }
 
 export function ErrorTrackingGroupScene(): JSX.Element {
-    const { errorGroupTab } = useValues(errorTrackingGroupSceneLogic)
-    const { setErrorGroupTab } = useActions(errorTrackingGroupSceneLogic)
-
     return (
         <>
+            <SessionPlayerModal />
             <ErrorTrackingFilters.FilterGroup />
             <LemonDivider className="mt-2" />
             <ErrorTrackingFilters.Options showOrder={false} />
-
-            <LemonTabs
-                activeKey={errorGroupTab}
-                onChange={setErrorGroupTab}
-                tabs={[
-                    {
-                        key: ErrorGroupTab.Overview,
-                        label: 'Overview',
-                        content: <OverviewTab />,
-                    },
-                    {
-                        key: ErrorGroupTab.Breakdowns,
-                        label: 'Breakdowns',
-                        content: <BreakdownsTab />,
-                    },
-                ]}
-            />
+            <div className="pt-2">
+                <OverviewTab />
+            </div>
         </>
     )
 }

frontend/src/scenes/error-tracking/groups/OverviewTab.tsx

@@ -1,11 +1,13 @@
 import { PersonDisplay, TZLabel } from '@posthog/apps-common'
-import { Spinner } from '@posthog/lemon-ui'
+import { LemonButton, Spinner } from '@posthog/lemon-ui'
 import clsx from 'clsx'
-import { useValues } from 'kea'
+import { useActions, useValues } from 'kea'
 import { EmptyMessage } from 'lib/components/EmptyMessage/EmptyMessage'
 import { ErrorDisplay } from 'lib/components/Errors/ErrorDisplay'
 import { NotFound } from 'lib/components/NotFound'
 import { Playlist } from 'lib/components/Playlist/Playlist'
+import { dayjs } from 'lib/dayjs'
+import { sessionPlayerModalLogic } from 'scenes/session-recordings/player/modal/sessionPlayerModalLogic'
 import { PropertyIcons } from 'scenes/session-recordings/playlist/SessionRecordingPreview'
 
 import { ErrorTrackingGroupEvent, errorTrackingGroupSceneLogic } from '../errorTrackingGroupSceneLogic'
@@ -31,8 +33,13 @@ export const OverviewTab = (): JSX.Element => {
                     listEmptyState={<div className="flex justify-center p-4">No exceptions found</div>}
                     content={({ activeItem: event }) =>
                         event ? (
-                            <div className="h-full overflow-auto pl-2">
-                                <ErrorDisplay eventProperties={JSON.parse(event.properties)} />
+                            <div className="h-full overflow-auto">
+                                <div className="bg-bg-light p-1 flex justify-end border-b min-h-[42px]">
+                                    <ViewSessionButton event={event} />
+                                </div>
+                                <div className="pl-2">
+                                    <ErrorDisplay eventProperties={JSON.parse(event.properties)} />
+                                </div>
                             </div>
                         ) : (
                             <EmptyMessage
@@ -50,6 +57,27 @@ export const OverviewTab = (): JSX.Element => {
     )
 }
 
+const ViewSessionButton = ({ event }: { event: ErrorTrackingGroupEvent }): JSX.Element | null => {
+    const { openSessionPlayer } = useActions(sessionPlayerModalLogic)
+
+    const properties = JSON.parse(event.properties)
+
+    return (
+        <LemonButton
+            size="small"
+            onClick={() => {
+                const fiveSecondsBeforeEvent = dayjs(event.timestamp).valueOf() - 5000
+                openSessionPlayer({ id: properties.$session_id }, Math.max(fiveSecondsBeforeEvent, 0))
+            }}
+            disabledReason={
+                !properties.$session_id ? 'There was no $session_id associated with this exception' : undefined
+            }
+        >
+            View recording
+        </LemonButton>
+    )
+}
+
 const ListItemException = ({
     item: event,
     isActive,
@@ -71,8 +99,6 @@ const ListItemException = ({
         })
         .filter((property) => !!property.value)
 
-    // const person = { ...event.person, properties: event.person.properties ? JSON.parse(event.person.properties) : {} }
-
     return (
         <div className={clsx('cursor-pointer p-2 space-y-1', isActive && 'border-l-4 border-primary-3000')}>
             <div className="flex justify-between items-center space-x-3">