diff --git a/frontend/__snapshots__/scenes-app-errortracking--group-page--dark.png b/frontend/__snapshots__/scenes-app-errortracking--group-page--dark.png index fdd090777de0d..81e9d428f91a1 100644 Binary files a/frontend/__snapshots__/scenes-app-errortracking--group-page--dark.png and b/frontend/__snapshots__/scenes-app-errortracking--group-page--dark.png differ diff --git a/frontend/__snapshots__/scenes-app-errortracking--group-page--light.png b/frontend/__snapshots__/scenes-app-errortracking--group-page--light.png index 425f33a5644c7..f6d202d44c7b1 100644 Binary files a/frontend/__snapshots__/scenes-app-errortracking--group-page--light.png and b/frontend/__snapshots__/scenes-app-errortracking--group-page--light.png differ diff --git a/frontend/src/scenes/error-tracking/ErrorTracking.scss b/frontend/src/scenes/error-tracking/ErrorTracking.scss index f47f0f2378581..dabda01de319a 100644 --- a/frontend/src/scenes/error-tracking/ErrorTracking.scss +++ b/frontend/src/scenes/error-tracking/ErrorTracking.scss @@ -1,4 +1,4 @@ .ErrorTracking__group { - height: calc(100vh - 16rem); + height: calc(100vh - 12rem); min-height: 25rem; } diff --git a/frontend/src/scenes/error-tracking/ErrorTrackingGroupScene.tsx b/frontend/src/scenes/error-tracking/ErrorTrackingGroupScene.tsx index ea34a7cc6f6fe..0ba40d7b258ab 100644 --- a/frontend/src/scenes/error-tracking/ErrorTrackingGroupScene.tsx +++ b/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 ( <> + - - , - }, - { - key: ErrorGroupTab.Breakdowns, - label: 'Breakdowns', - content: , - }, - ]} - /> +
+ +
) } diff --git a/frontend/src/scenes/error-tracking/groups/OverviewTab.tsx b/frontend/src/scenes/error-tracking/groups/OverviewTab.tsx index 62d04251edc55..7f74758bc4d3f 100644 --- a/frontend/src/scenes/error-tracking/groups/OverviewTab.tsx +++ b/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={
No exceptions found
} content={({ activeItem: event }) => event ? ( -
- +
+
+ +
+
+ +
) : ( { ) } +const ViewSessionButton = ({ event }: { event: ErrorTrackingGroupEvent }): JSX.Element | null => { + const { openSessionPlayer } = useActions(sessionPlayerModalLogic) + + const properties = JSON.parse(event.properties) + + return ( + { + 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 + + ) +} + 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 (