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/constants.tsx

@@ -207,6 +207,7 @@ export const FEATURE_FLAGS = {
     HOG: 'hog', // owner: @mariusandra
     PERSONLESS_EVENTS_NOT_SUPPORTED: 'personless-events-not-supported', // owner: @raquelmsmith
     ALERTS: 'alerts', // owner: github.com/nikitaevg
+    ERROR_TRACKING: 'error-tracking', // owner: #team-replay
 } as const
 export type FeatureFlagKey = (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS]
 

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 { EventDetails } from 'scenes/activity/explore/EventDetails'
+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: 'message',
+                    width: '50%',
+                },
+                {
+                    title: 'Occurrences',
+                    dataIndex: 'occurrences',
+                    sorter: (a, b) => a.occurrences - b.occurrences,
+                },
+                {
+                    title: 'Sessions',
+                    dataIndex: 'unique_sessions',
+                    sorter: (a, b) => a.unique_sessions - b.unique_sessions,
+                },
+            ]}
+            loading={errorGroupsLoading}
+            dataSource={errorGroups}
+            expandable={{
+                expandedRowRender: function renderExpand(group: ErrorTrackingGroup) {
+                    return <EventDetails event={group.sampleEvent} />
+                },
+                noIndent: true,
+            }}
+        />
+    )
+}

frontend/src/scenes/error-tracking/errorTrackingLogic.ts

@@ -0,0 +1,8 @@
+import { kea, path } from 'kea'
+
+import type { errorTrackingSceneLogicType } from './errorTrackingLogicType'
+import type { errorTrackingSceneLogicType } from './errorTrackingSceneLogicType'
+
+export const errorTrackingSceneLogic = kea<errorTrackingSceneLogicType>([
+    path(['scenes', 'error-tracking', 'errorTrackingSceneLogic']),
+])

frontend/src/scenes/error-tracking/errorTrackingSceneLogic.ts

@@ -0,0 +1,47 @@
+import { afterMount, kea, path } from 'kea'
+import { loaders } from 'kea-loaders'
+import api from 'lib/api'
+
+import { HogQLQuery, NodeKind } from '~/queries/schema'
+import { hogql } from '~/queries/utils'
+import { ErrorTrackingGroup } from '~/types'
+
+import type { errorTrackingSceneLogicType } from './errorTrackingSceneLogicType'
+
+export const errorTrackingSceneLogic = kea<errorTrackingSceneLogicType>([
+    path(['scenes', 'error-tracking', 'errorTrackingSceneLogic']),
+
+    loaders(() => ({
+        errorGroups: [
+            [] as ErrorTrackingGroup[],
+            {
+                loadErrorGroups: async () => {
+                    const query: HogQLQuery = {
+                        kind: NodeKind.HogQLQuery,
+                        query: hogql`SELECT first_value(properties), count(), count(distinct properties.$session_id)
+                                FROM events e
+                                WHERE event = '$exception'
+                                -- grouping by message for now, will eventually be predefined $exception_group_id
+                                GROUP BY properties.$exception_message`,
+                    }
+
+                    const res = await api.query(query)
+
+                    return res.results.map((r) => {
+                        const eventProperties = JSON.parse(r[0])
+                        return {
+                            sampleEvent: { event: '$exception', properties: eventProperties },
+                            title: eventProperties['$exception_message'] || 'No message',
+                            occurrences: r[2],
+                            unique_sessions: r[3],
+                        }
+                    })
+                },
+            },
+        ],
+    })),
+
+    afterMount(({ actions }) => {
+        actions.loadErrorGroups()
+    }),
+])

frontend/src/scenes/sceneTypes.ts

@@ -9,6 +9,7 @@ export enum Scene {
     Error404 = '404',
     ErrorNetwork = '4xx',
     ErrorProjectUnavailable = 'ProjectUnavailable',
+    ErrorTracking = 'ErrorTracking',
     Dashboards = 'Dashboards',
     Dashboard = 'Dashboard',
     Insight = 'Insight',

frontend/src/scenes/scenes.ts

@@ -53,6 +53,11 @@ export const sceneConfigurations: Record<Scene, SceneConfig> = {
         activityScope: ActivityScope.DASHBOARD,
         defaultDocsPath: '/docs/product-analytics/dashboards',
     },
+    [Scene.ErrorTracking]: {
+        projectBased: true,
+        name: 'Error tracking',
+        activityScope: ActivityScope.DASHBOARD,
+    },
     [Scene.Insight]: {
         projectBased: true,
         name: 'Insights',
@@ -541,6 +546,7 @@ export const routes: Record<string, Scene> = {
     [urls.experiment(':id')]: Scene.Experiment,
     [urls.earlyAccessFeatures()]: Scene.EarlyAccessFeatures,
     [urls.earlyAccessFeature(':id')]: Scene.EarlyAccessFeature,
+    [urls.errorTracking()]: Scene.ErrorTracking,
     [urls.surveys()]: Scene.Surveys,
     [urls.survey(':id')]: Scene.Survey,
     [urls.surveyTemplates()]: Scene.SurveyTemplates,

frontend/src/scenes/urls.ts

@@ -149,6 +149,8 @@ export const urls = {
     earlyAccessFeatures: (): string => '/early_access_features',
     /** @param id A UUID or 'new'. ':id' for routing. */
     earlyAccessFeature: (id: string): string => `/early_access_features/${id}`,
+    errorTracking: (): string => '/error_tracking',
+    errorTrackingGroup: (id: string): string => `/error_tracking/${id}`,
     surveys: (): string => '/surveys',
     /** @param id A UUID or 'new'. ':id' for routing. */
     survey: (id: string): string => `/surveys/${id}`,

frontend/src/types.ts

@@ -988,6 +988,15 @@ export type ErrorCluster = {
 }
 export type ErrorClusterResponse = ErrorCluster[] | null
 
+export type ErrorTrackingGroup = {
+    id: string
+    name: string
+    sampleEvent: EventType
+    occurrences: number
+    unique_sessions: number
+    unique_users: number
+}
+
 export type EntityType = 'actions' | 'events' | 'data_warehouse' | 'new_entity'
 
 export interface Entity {