-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add event breakdowns to exceptions (#23124)
- Loading branch information
Showing
5 changed files
with
244 additions
and
78 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
82 changes: 82 additions & 0 deletions
82
frontend/src/scenes/error-tracking/groups/BreakdownsTab.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| import { LemonSegmentedButton, LemonSegmentedButtonOption } from '@posthog/lemon-ui' | ||
| import clsx from 'clsx' | ||
| import { useValues } from 'kea' | ||
| import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver' | ||
| import { useState } from 'react' | ||
|
|
||
| import { Query } from '~/queries/Query/Query' | ||
|
|
||
| import { errorTrackingLogic } from '../errorTrackingLogic' | ||
| import { errorTrackingGroupBreakdownQuery } from '../queries' | ||
|
|
||
| const gridColumnsMap = { | ||
| small: 'grid-cols-1', | ||
| medium: 'grid-cols-2', | ||
| large: 'grid-cols-3', | ||
| } | ||
|
|
||
| type BreakdownGroup = { title: string; options: LemonSegmentedButtonOption<string>[] } | ||
|
|
||
| export const BreakdownsTab = (): JSX.Element => { | ||
| const breakdownGroups: BreakdownGroup[] = [ | ||
| { | ||
| title: 'Device', | ||
| options: [ | ||
| { value: '$browser', label: 'Browser' }, | ||
| { value: '$device_type', label: 'Device type' }, | ||
| { value: '$os', label: 'Operating system' }, | ||
| ], | ||
| }, | ||
| { | ||
| title: 'User', | ||
| options: [ | ||
| { value: '$user_id', label: 'User ID' }, | ||
| { value: '$ip', label: 'IP address' }, | ||
| ], | ||
| }, | ||
| { title: 'URL', options: [{ value: '$pathname', label: 'Path' }] }, | ||
| ] | ||
|
|
||
| const { ref, size } = useResizeBreakpoints({ | ||
| 0: 'small', | ||
| 750: 'medium', | ||
| 1200: 'large', | ||
| }) | ||
|
|
||
| return ( | ||
| <div className={clsx('grid gap-5', gridColumnsMap[size])} ref={ref}> | ||
| {breakdownGroups.map((group, index) => ( | ||
| <BreakdownGroup key={index} group={group} /> | ||
| ))} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| const BreakdownGroup = ({ group }: { group: BreakdownGroup }): JSX.Element => { | ||
| const { dateRange, filterTestAccounts, filterGroup } = useValues(errorTrackingLogic) | ||
| const [selectedProperty, setSelectedProperty] = useState<string>(group.options[0].value) | ||
|
|
||
| return ( | ||
| <div> | ||
| <div className="flex justify-between"> | ||
| <h2>{group.title}</h2> | ||
| {group.options.length > 1 && ( | ||
| <LemonSegmentedButton | ||
| size="small" | ||
| value={selectedProperty} | ||
| options={group.options} | ||
| onChange={setSelectedProperty} | ||
| /> | ||
| )} | ||
| </div> | ||
| <Query | ||
| query={errorTrackingGroupBreakdownQuery({ | ||
| breakdownProperty: selectedProperty, | ||
| dateRange: dateRange, | ||
| filterTestAccounts: filterTestAccounts, | ||
| filterGroup: filterGroup, | ||
| })} | ||
| /> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| import { PersonDisplay, TZLabel } from '@posthog/apps-common' | ||
| import { Spinner } from '@posthog/lemon-ui' | ||
| import clsx from 'clsx' | ||
| import { useValues } from 'kea' | ||
| import { EmptyMessage } from 'lib/components/EmptyMessage/EmptyMessage' | ||
| import { ErrorDisplay } from 'lib/components/Errors/ErrorDisplay' | ||
| import { Playlist } from 'lib/components/Playlist/Playlist' | ||
| import { PropertyIcons } from 'scenes/session-recordings/playlist/SessionRecordingPreview' | ||
|
|
||
| import { errorTrackingGroupSceneLogic, ExceptionEventType } from '../errorTrackingGroupSceneLogic' | ||
|
|
||
| export const OverviewTab = (): JSX.Element => { | ||
| const { events, eventsLoading } = useValues(errorTrackingGroupSceneLogic) | ||
|
|
||
| return eventsLoading ? ( | ||
| <Spinner className="self-align-center justify-self-center" /> | ||
| ) : ( | ||
| <div className="ErrorTracking__group"> | ||
| <div className="h-full space-y-2"> | ||
| <Playlist | ||
| title="Exceptions" | ||
| sections={[ | ||
| { | ||
| key: 'exceptions', | ||
| title: 'Exceptions', | ||
| items: events, | ||
| render: ListItemException, | ||
| }, | ||
| ]} | ||
| listEmptyState={<div>Empty</div>} | ||
| content={({ activeItem: event }) => | ||
| event ? ( | ||
| <div className="pl-2"> | ||
| <ErrorDisplay eventProperties={event.properties} /> | ||
| </div> | ||
| ) : ( | ||
| <EmptyMessage | ||
| title="No exception selected" | ||
| description="Please select an exception from the list on the left" | ||
| /> | ||
| ) | ||
| } | ||
| /> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| const ListItemException = ({ item: event, isActive }: { item: ExceptionEventType; isActive: boolean }): JSX.Element => { | ||
| const properties = ['$browser', '$device_type', '$os'] | ||
| .flatMap((property) => { | ||
| let value = event.properties[property] | ||
| const label = value | ||
| if (property === '$device_type') { | ||
| value = event.properties['$device_type'] || event.properties['$initial_device_type'] | ||
| } | ||
|
|
||
| return { property, value, label } | ||
| }) | ||
| .filter((property) => !!property.value) | ||
|
|
||
| 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"> | ||
| <PersonDisplay person={event.person} withIcon /> | ||
| <PropertyIcons recordingProperties={properties} iconClassNames="text-muted" /> | ||
| </div> | ||
| {event.properties.$current_url && ( | ||
| <div className="text-xs text-muted truncate">{event.properties.$current_url}</div> | ||
| )} | ||
| <TZLabel | ||
| className="overflow-hidden text-ellipsis text-xs text-muted shrink-0" | ||
| time={event.timestamp} | ||
| placement="right" | ||
| showPopover={false} | ||
| /> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters