feat: Error tracking (simple start)

frontend/src/layout/navigation-3000/navigationLogic.tsx

@@ -17,6 +17,7 @@ import {
     IconServer,
     IconTestTube,
     IconToggle,
+    IconWarning,
 } from '@posthog/icons'
 import { lemonToast, Spinner } from '@posthog/lemon-ui'
 import { captureException } from '@sentry/react'
@@ -450,6 +451,14 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                             icon: <IconRewindPlay />,
                             to: urls.replay(),
                         },
+                        featureFlags[FEATURE_FLAGS.ERROR_TRACKING]
+                            ? {
+                                  identifier: Scene.ErrorTracking,
+                                  label: 'Error tracking',
+                                  icon: <IconWarning />,
+                                  to: urls.errorTracking(),
+                              }
+                            : null,
                         featureFlags[FEATURE_FLAGS.HEATMAPS_UI]
                             ? {
                                   identifier: Scene.Heatmaps,

frontend/src/lib/components/CommandPalette/commandPaletteLogic.tsx

@@ -38,6 +38,7 @@ import {
     IconTrends,
     IconUnlock,
     IconUserPaths,
+    IconWarning,
     IconX,
 } from '@posthog/icons'
 import { Parser } from 'expr-eval'
@@ -581,6 +582,17 @@ export const commandPaletteLogic = kea<commandPaletteLogicType>([
                               },
                           ]
                         : []),
+                    ...(values.featureFlags[FEATURE_FLAGS.ERROR_TRACKING]
+                        ? [
+                              {
+                                  icon: IconWarning,
+                                  display: 'Go to Error tracking',
+                                  executor: () => {
+                                      push(urls.errorTracking())
+                                  },
+                              },
+                          ]
+                        : []),
                     {
                         display: 'Go to Session replay',
                         icon: IconRewindPlay,

frontend/src/lib/components/Errors/ErrorDisplay.stories.tsx

@@ -1,112 +1,103 @@
 import { Meta } from '@storybook/react'
 import { ErrorDisplay } from 'lib/components/Errors/ErrorDisplay'
 
-import { EventType, RecordingEventType } from '~/types'
+import { EventType } from '~/types'
 
 const meta: Meta<typeof ErrorDisplay> = {
     title: 'Components/Errors/Error Display',
     component: ErrorDisplay,
 }
 export default meta
 
-function errorEvent(properties: Record<string, any>): EventType | RecordingEventType {
+function errorProperties(properties: Record<string, any>): EventType['properties'] {
     return {
-        id: '12345',
-        elements: [],
-        uuid: '018880b6-b781-0008-a2e5-629b2624fd2f',
-        event: '$exception',
-        properties: {
-            $os: 'Windows',
-            $os_version: '10.0',
-            $browser: 'Chrome',
-            $device_type: 'Desktop',
-            $current_url: 'https://app.posthog.com/home',
-            $host: 'app.posthog.com',
-            $pathname: '/home',
-            $browser_version: 113,
-            $browser_language: 'es-ES',
-            $screen_height: 1080,
-            $screen_width: 1920,
-            $viewport_height: 929,
-            $viewport_width: 1920,
-            $lib: 'web',
-            $lib_version: '1.63.3',
-            distinct_id: 'iOizUPH4RH65nZjvGVBz5zZUmwdHvq2mxzNySQqqYkG',
-            $device_id: '186144e7357245-0cfe8bf1b5b877-26021051-1fa400-186144e7358d3',
-            $active_feature_flags: ['are-the-flags', 'important-for-the-error'],
-            $feature_flag_payloads: {
-                'are-the-flags': '{\n    "flag": "payload"\n}',
-            },
-            $user_id: 'iOizUPH4RH65nZjvGVBz5zZUmwdHvq2mxzNySQqqYkG',
-            $groups: {
-                project: '00000000-0000-0000-1847-88f0ffa23444',
-                organization: '00000000-0000-0000-a050-5d4557279956',
-                customer: 'the-customer',
-                instance: 'https://app.posthog.com',
-            },
-            $exception_message: 'ResizeObserver loop limit exceeded',
-            $exception_type: 'Error',
-            $exception_personURL: 'https://app.posthog.com/person/the-person-id',
-            $sentry_event_id: 'id-from-the-sentry-integration',
-            $sentry_exception: {
-                values: [
-                    {
-                        value: 'ResizeObserver loop limit exceeded',
-                        type: 'Error',
-                        mechanism: {
-                            type: 'onerror',
-                            handled: false,
-                            synthetic: true,
-                        },
-                        stacktrace: {
-                            frames: [
-                                {
-                                    colno: 0,
-                                    filename: 'https://app.posthog.com/home',
-                                    function: '?',
-                                    in_app: true,
-                                    lineno: 0,
-                                },
-                            ],
-                        },
+        $os: 'Windows',
+        $os_version: '10.0',
+        $browser: 'Chrome',
+        $device_type: 'Desktop',
+        $current_url: 'https://app.posthog.com/home',
+        $host: 'app.posthog.com',
+        $pathname: '/home',
+        $browser_version: 113,
+        $browser_language: 'es-ES',
+        $screen_height: 1080,
+        $screen_width: 1920,
+        $viewport_height: 929,
+        $viewport_width: 1920,
+        $lib: 'web',
+        $lib_version: '1.63.3',
+        distinct_id: 'iOizUPH4RH65nZjvGVBz5zZUmwdHvq2mxzNySQqqYkG',
+        $device_id: '186144e7357245-0cfe8bf1b5b877-26021051-1fa400-186144e7358d3',
+        $active_feature_flags: ['are-the-flags', 'important-for-the-error'],
+        $feature_flag_payloads: {
+            'are-the-flags': '{\n    "flag": "payload"\n}',
+        },
+        $user_id: 'iOizUPH4RH65nZjvGVBz5zZUmwdHvq2mxzNySQqqYkG',
+        $groups: {
+            project: '00000000-0000-0000-1847-88f0ffa23444',
+            organization: '00000000-0000-0000-a050-5d4557279956',
+            customer: 'the-customer',
+            instance: 'https://app.posthog.com',
+        },
+        $exception_message: 'ResizeObserver loop limit exceeded',
+        $exception_type: 'Error',
+        $exception_personURL: 'https://app.posthog.com/person/the-person-id',
+        $sentry_event_id: 'id-from-the-sentry-integration',
+        $sentry_exception: {
+            values: [
+                {
+                    value: 'ResizeObserver loop limit exceeded',
+                    type: 'Error',
+                    mechanism: {
+                        type: 'onerror',
+                        handled: false,
+                        synthetic: true,
                     },
-                ],
-            },
-            $sentry_exception_message: 'ResizeObserver loop limit exceeded',
-            $sentry_exception_type: 'Error',
-            $sentry_tags: {
-                'PostHog Person URL': 'https://app.posthog.com/person/the-person-id',
-                'PostHog Recording URL': 'https://app.posthog.com/replay/the-session-id?t=866',
-            },
-            $sentry_url:
-                'https://sentry.io/organizations/posthog/issues/?project=the-sentry-project-id&query=the-sentry-id',
-            $session_id: 'the-session-id',
-            $window_id: 'the-window-id',
-            $pageview_id: 'the-pageview-id',
-            $sent_at: '2023-06-03T10:03:57.787000+00:00',
-            $geoip_city_name: 'Whoville',
-            $geoip_country_name: 'Wholand',
-            $geoip_country_code: 'WH',
-            $geoip_continent_name: 'Mystery',
-            $geoip_continent_code: 'MY',
-            $geoip_latitude: -30.5023,
-            $geoip_longitude: -71.1545,
-            $geoip_time_zone: 'UTC',
-            $lib_version__major: 1,
-            $lib_version__minor: 63,
-            $lib_version__patch: 3,
-            ...properties,
+                    stacktrace: {
+                        frames: [
+                            {
+                                colno: 0,
+                                filename: 'https://app.posthog.com/home',
+                                function: '?',
+                                in_app: true,
+                                lineno: 0,
+                            },
+                        ],
+                    },
+                },
+            ],
+        },
+        $sentry_exception_message: 'ResizeObserver loop limit exceeded',
+        $sentry_exception_type: 'Error',
+        $sentry_tags: {
+            'PostHog Person URL': 'https://app.posthog.com/person/the-person-id',
+            'PostHog Recording URL': 'https://app.posthog.com/replay/the-session-id?t=866',
         },
-        timestamp: '2023-06-03T03:03:57.316-07:00',
-        distinct_id: 'the-distinct-id',
-        elements_chain: '',
+        $sentry_url:
+            'https://sentry.io/organizations/posthog/issues/?project=the-sentry-project-id&query=the-sentry-id',
+        $session_id: 'the-session-id',
+        $window_id: 'the-window-id',
+        $pageview_id: 'the-pageview-id',
+        $sent_at: '2023-06-03T10:03:57.787000+00:00',
+        $geoip_city_name: 'Whoville',
+        $geoip_country_name: 'Wholand',
+        $geoip_country_code: 'WH',
+        $geoip_continent_name: 'Mystery',
+        $geoip_continent_code: 'MY',
+        $geoip_latitude: -30.5023,
+        $geoip_longitude: -71.1545,
+        $geoip_time_zone: 'UTC',
+        $lib_version__major: 1,
+        $lib_version__minor: 63,
+        $lib_version__patch: 3,
+        ...properties,
     }
 }
 
 export function ResizeObserverLoopLimitExceeded(): JSX.Element {
     return (
         <ErrorDisplay
-            event={errorEvent({
+            eventProperties={errorProperties({
                 $exception_message: 'ResizeObserver loop limit exceeded',
                 $exception_type: 'Error',
                 $exception_personURL: 'https://app.posthog.com/person/the-person-id',
@@ -118,7 +109,7 @@ export function ResizeObserverLoopLimitExceeded(): JSX.Element {
 export function SafariScriptError(): JSX.Element {
     return (
         <ErrorDisplay
-            event={errorEvent({
+            eventProperties={errorProperties({
                 $exception_type: 'Error',
                 $exception_message: 'Script error.',
                 $exception_is_synthetic: true,
@@ -130,7 +121,7 @@ export function SafariScriptError(): JSX.Element {
 export function ImportingModule(): JSX.Element {
     return (
         <ErrorDisplay
-            event={errorEvent({
+            eventProperties={errorProperties({
                 $exception_type: 'UnhandledRejection',
                 $exception_message: "Importing module '/static/chunk-PIJHGO7Q.js' is not found.",
                 $exception_stack_trace_raw: '[]',
@@ -143,7 +134,7 @@ export function ImportingModule(): JSX.Element {
 export function AnonymousErrorWithStackTrace(): JSX.Element {
     return (
         <ErrorDisplay
-            event={errorEvent({
+            eventProperties={errorProperties({
                 $exception_type: 'Error',
                 $exception_message: 'wat',
                 $exception_stack_trace_raw:

frontend/src/lib/components/Errors/ErrorDisplay.tsx

@@ -5,7 +5,7 @@ import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag'
 import { Link } from 'lib/lemon-ui/Link'
 import posthog from 'posthog-js'
 
-import { EventType, RecordingEventType } from '~/types'
+import { EventType } from '~/types'
 
 interface StackFrame {
     filename: string
@@ -156,11 +156,7 @@ export function getExceptionPropertiesFrom(eventProperties: Record<string, any>)
     }
 }
 
-export function ErrorDisplay({ event }: { event: EventType | RecordingEventType }): JSX.Element {
-    if (event.event !== '$exception') {
-        return <>Unknown type of error</>
-    }
-
+export function ErrorDisplay({ eventProperties }: { eventProperties: EventType['properties'] }): JSX.Element {
     const {
         $exception_type,
         $exception_message,
@@ -175,7 +171,7 @@ export function ErrorDisplay({ event }: { event: EventType | RecordingEventType
         $sentry_url,
         $exception_stack_trace_raw,
         $level,
-    } = getExceptionPropertiesFrom(event.properties)
+    } = getExceptionPropertiesFrom(eventProperties)
 
     return (
         <div className="flex flex-col space-y-2 pr-4 pb-2">

frontend/src/lib/constants.tsx

@@ -210,6 +210,7 @@ export const FEATURE_FLAGS = {
     PERSONLESS_EVENTS_NOT_SUPPORTED: 'personless-events-not-supported', // owner: @raquelmsmith
     SESSION_REPLAY_UNIVERSAL_FILTERS: 'session-replay-universal-filters', // owner: #team-replay
     ALERTS: 'alerts', // owner: github.com/nikitaevg
+    ERROR_TRACKING: 'error-tracking', // owner: #team-replay
     SETTINGS_BOUNCE_RATE_PAGE_VIEW_MODE: 'settings-bounce-rate-page-view-mode', // owner: @robbie-c
 } as const
 export type FeatureFlagKey = (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS]

frontend/src/scenes/activity/explore/EventDetails.tsx

@@ -93,7 +93,7 @@ export function EventDetails({ event, tableProps }: EventDetailsProps): JSX.Elem
             label: 'Exception',
             content: (
                 <div className="ml-10 my-2">
-                    <ErrorDisplay event={event} />
+                    <ErrorDisplay eventProperties={event.properties} />
                 </div>
             ),
         })

frontend/src/scenes/appScenes.ts

@@ -37,6 +37,7 @@ export const appScenes: Record<Scene, () => any> = {
     [Scene.FeatureFlag]: () => import('./feature-flags/FeatureFlag'),
     [Scene.EarlyAccessFeatures]: () => import('./early-access-features/EarlyAccessFeatures'),
     [Scene.EarlyAccessFeature]: () => import('./early-access-features/EarlyAccessFeature'),
+    [Scene.ErrorTracking]: () => import('./error-tracking/ErrorTrackingScene'),
     [Scene.Surveys]: () => import('./surveys/Surveys'),
     [Scene.Survey]: () => import('./surveys/Survey'),
     [Scene.SurveyTemplates]: () => import('./surveys/SurveyTemplates'),

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

@@ -0,0 +1,46 @@
+import { LemonTable } from '@posthog/lemon-ui'
+import { useValues } from 'kea'
+import { ErrorDisplay } from 'lib/components/Errors/ErrorDisplay'
+import { SceneExport } from 'scenes/sceneTypes'
+
+import { ErrorTrackingGroup } from '~/types'
+
+import { errorTrackingSceneLogic } from './errorTrackingSceneLogic'
+
+export const scene: SceneExport = {
+    component: ErrorTrackingScene,
+    logic: errorTrackingSceneLogic,
+}
+
+export function ErrorTrackingScene(): JSX.Element {
+    const { errorGroups, errorGroupsLoading } = useValues(errorTrackingSceneLogic)
+
+    return (
+        <LemonTable
+            columns={[
+                {
+                    dataIndex: 'title',
+                    width: '50%',
+                },
+                {
+                    title: 'Occurrences',
+                    dataIndex: 'occurrences',
+                    sorter: (a, b) => a.occurrences - b.occurrences,
+                },
+                {
+                    title: 'Sessions',
+                    dataIndex: 'uniqueSessions',
+                    sorter: (a, b) => a.uniqueSessions - b.uniqueSessions,
+                },
+            ]}
+            loading={errorGroupsLoading}
+            dataSource={errorGroups}
+            expandable={{
+                expandedRowRender: function renderExpand(group: ErrorTrackingGroup) {
+                    return <ErrorDisplay eventProperties={group.sampleEventProperties} />
+                },
+                noIndent: true,
+            }}
+        />
+    )
+}