feat: error tracking alerting

frontend/src/scenes/appScenes.ts

@@ -35,7 +35,9 @@ export const appScenes: Record<Scene, () => any> = {
     [Scene.EarlyAccessFeatures]: () => import('./early-access-features/EarlyAccessFeatures'),
     [Scene.EarlyAccessFeature]: () => import('./early-access-features/EarlyAccessFeature'),
     [Scene.ErrorTracking]: () => import('./error-tracking/ErrorTrackingScene'),
-    [Scene.ErrorTrackingConfiguration]: () => import('./error-tracking/ErrorTrackingConfigurationScene'),
+    [Scene.ErrorTrackingAlerts]: () => import('./error-tracking/alerts/ErrorTrackingAlertsScene'),
+    [Scene.ErrorTrackingAlert]: () => import('./error-tracking/alerts/ErrorTrackingAlertScene'),
+    [Scene.ErrorTrackingSymbolSets]: () => import('./error-tracking/symbol-sets/ErrorTrackingSymbolSetsScene'),
     [Scene.ErrorTrackingIssue]: () => import('./error-tracking/ErrorTrackingIssueScene'),
     [Scene.Surveys]: () => import('./surveys/Surveys'),
     [Scene.Survey]: () => import('./surveys/Survey'),

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

@@ -13,7 +13,7 @@ import { AssigneeSelect } from './AssigneeSelect'
 import ErrorTrackingFilters from './ErrorTrackingFilters'
 import { errorTrackingIssueSceneLogic } from './errorTrackingIssueSceneLogic'
 import { OverviewTab } from './groups/OverviewTab'
-import { SymbolSetUploadModal } from './SymbolSetUploadModal'
+import { SymbolSetUploadModal } from './symbol-sets/SymbolSetUploadModal'
 
 export const scene: SceneExport = {
     component: ErrorTrackingIssueScene,

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

@@ -1,6 +1,13 @@
 import { TZLabel } from '@posthog/apps-common'
-import { IconGear } from '@posthog/icons'
-import { LemonButton, LemonCheckbox, LemonDivider, LemonSegmentedButton } from '@posthog/lemon-ui'
+import { IconEllipsis, IconGear } from '@posthog/icons'
+import {
+    LemonButton,
+    LemonCheckbox,
+    LemonDivider,
+    LemonMenu,
+    LemonMenuItems,
+    LemonSegmentedButton,
+} from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { BindLogic, useActions, useValues } from 'kea'
 import { FeedbackNotice } from 'lib/components/FeedbackNotice'
@@ -176,21 +183,26 @@ const AssigneeColumn: QueryContextColumnComponent = (props) => {
 const Header = (): JSX.Element => {
     const { user } = useValues(userLogic)
 
+    const items: LemonMenuItems = [{ label: 'Manage symbol sets', to: urls.errorTrackingSymbolSets() }]
+
+    if (user?.is_staff) {
+        items.push({
+            label: 'Send an exception',
+            onClick: () => {
+                throw Error('Oh my!')
+            },
+        })
+    }
+
     return (
         <PageHeader
             buttons={
                 <>
-                    {user?.is_staff ? (
-                        <LemonButton
-                            onClick={() => {
-                                throw Error('Oh my!')
-                            }}
-                        >
-                            Send an exception
-                        </LemonButton>
-                    ) : null}
-                    <LemonButton to={urls.errorTrackingConfiguration()} type="secondary" icon={<IconGear />}>
-                        Configure
+                    <LemonMenu items={items}>
+                        <LemonButton icon={<IconEllipsis />} />
+                    </LemonMenu>
+                    <LemonButton to={urls.errorTrackingAlerts()} type="secondary" icon={<IconGear />}>
+                        Configure alerts
                     </LemonButton>
                 </>
             }

frontend/src/scenes/error-tracking/alerts/ErrorTrackingAlertScene.tsx

@@ -0,0 +1,44 @@
+import { kea, path, props, selectors } from 'kea'
+import { HogFunctionConfiguration } from 'scenes/pipeline/hogfunctions/HogFunctionConfiguration'
+import { Scene, SceneExport } from 'scenes/sceneTypes'
+import { urls } from 'scenes/urls'
+
+import { Breadcrumb } from '~/types'
+
+import type { errorTrackingAlertSceneLogicType } from './ErrorTrackingAlertSceneType'
+
+export const errorTrackingAlertSceneLogic = kea<errorTrackingAlertSceneLogicType>([
+    path((key) => ['scenes', 'error-tracking', 'errorTrackingAlertSceneLogic', key]),
+    props({} as { id: string }),
+    selectors({
+        breadcrumbs: [
+            (_, p) => [p.id],
+            (id): Breadcrumb[] => [
+                {
+                    key: Scene.ErrorTracking,
+                    path: urls.errorTracking(),
+                    name: 'Error tracking',
+                },
+                {
+                    key: Scene.ErrorTrackingAlerts,
+                    path: urls.errorTrackingAlerts(),
+                    name: 'Alerts',
+                },
+                {
+                    key: Scene.ErrorTrackingAlert,
+                    name: id === 'new' ? 'Create alert' : 'Edit alert',
+                },
+            ],
+        ],
+    }),
+])
+
+export const scene: SceneExport = {
+    component: ErrorTrackingAlertScene,
+    logic: errorTrackingAlertSceneLogic,
+    paramsToProps: ({ params: { id } }): (typeof errorTrackingAlertSceneLogic)['props'] => ({ id }),
+}
+
+export function ErrorTrackingAlertScene(): JSX.Element {
+    return <HogFunctionConfiguration id={null} templateId="template-error-tracking-alert" />
+}

frontend/src/scenes/error-tracking/alerts/ErrorTrackingAlertsScene.tsx

@@ -0,0 +1,51 @@
+import { LemonButton } from '@posthog/lemon-ui'
+import { kea, path, selectors } from 'kea'
+import { PageHeader } from 'lib/components/PageHeader'
+import { DestinationsTable } from 'scenes/pipeline/destinations/Destinations'
+import { SceneExport } from 'scenes/sceneTypes'
+import { Scene } from 'scenes/sceneTypes'
+import { urls } from 'scenes/urls'
+
+import { Breadcrumb } from '~/types'
+
+import type { errorTrackingAlertsSceneLogicType } from './ErrorTrackingAlertsSceneType'
+
+export const errorTrackingAlertsSceneLogic = kea<errorTrackingAlertsSceneLogicType>([
+    path(['scenes', 'error-tracking', 'errorTrackingAlertsSceneLogic']),
+    selectors({
+        breadcrumbs: [
+            () => [],
+            (): Breadcrumb[] => [
+                {
+                    key: Scene.ErrorTracking,
+                    name: 'Error tracking',
+                    path: urls.errorTracking(),
+                },
+                {
+                    key: Scene.ErrorTrackingAlerts,
+                    name: 'Alerts',
+                },
+            ],
+        ],
+    }),
+])
+
+export const scene: SceneExport = {
+    component: ErrorTrackingAlertsScene,
+    logic: errorTrackingAlertsSceneLogic,
+}
+
+export function ErrorTrackingAlertsScene(): JSX.Element {
+    return (
+        <>
+            <PageHeader
+                buttons={
+                    <LemonButton type="primary" to={urls.errorTrackingAlert('new')} className="flex">
+                        Setup alert
+                    </LemonButton>
+                }
+            />
+            <DestinationsTable types={['error_tracking_alert']} hideKind hideFeedback />
+        </>
+    )
+}

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

@@ -155,11 +155,7 @@ export const errorTrackingIssueSceneLogic = kea<errorTrackingIssueSceneLogicType
     actionToUrl(({ values }) => ({
         setTab: () => {
             const searchParams = router.values.searchParams
-
-            if (values.tab != IssueTab.Overview) {
-                searchParams['tab'] = values.tab
-            }
-
+            searchParams['tab'] = values.tab
             return [router.values.location.pathname, searchParams]
         },
     })),

frontend/src/scenes/error-tracking/ErrorTrackingConfigurationScene.tsx → frontend/src/scenes/error-tracking/symbol-sets/ErrorTrackingSymbolSetsScene.tsx

@@ -8,16 +8,15 @@ import { humanFriendlyDetailedTime } from 'lib/utils'
 import { useEffect, useState } from 'react'
 import { SceneExport } from 'scenes/sceneTypes'
 
-import { AlphaAccessScenePrompt } from './AlphaAccessScenePrompt'
 import { errorTrackingSymbolSetLogic } from './errorTrackingSymbolSetLogic'
 import { SymbolSetUploadModal } from './SymbolSetUploadModal'
 
 export const scene: SceneExport = {
-    component: ErrorTrackingConfigurationScene,
+    component: ErrorTrackingSymbolSetsScene,
     logic: errorTrackingSymbolSetLogic,
 }
 
-export function ErrorTrackingConfigurationScene(): JSX.Element {
+export default function ErrorTrackingSymbolSetsScene(): JSX.Element {
     const { missingSymbolSets, validSymbolSets } = useValues(errorTrackingSymbolSetLogic)
     const { loadSymbolSets } = useActions(errorTrackingSymbolSetLogic)
 
@@ -26,24 +25,21 @@ export function ErrorTrackingConfigurationScene(): JSX.Element {
     }, [loadSymbolSets])
 
     return (
-        <AlphaAccessScenePrompt>
-            <div className="space-y-4">
-                <h2>Symbol sets</h2>
-                <p>
-                    Source maps are required to demangle any minified code in your exception stack traces. PostHog
-                    automatically retrieves source maps where possible. Cases where it was not possible are listed
-                    below. Source maps can be uploaded retroactively but changes will only apply to all future
-                    exceptions ingested.
-                </p>
-                {missingSymbolSets.length > 0 && (
-                    <SymbolSetTable id="missing" dataSource={missingSymbolSets} pageSize={5} missing />
-                )}
-                {(validSymbolSets.length > 0 || missingSymbolSets.length === 0) && (
-                    <SymbolSetTable id="valid" dataSource={validSymbolSets} pageSize={10} />
-                )}
-                <SymbolSetUploadModal />
-            </div>
-        </AlphaAccessScenePrompt>
+        <div className="space-y-4">
+            <h2>Symbol sets</h2>
+            <p>
+                Source maps are required to demangle any minified code in your exception stack traces. PostHog
+                automatically retrieves source maps where possible. Cases where it was not possible are listed below.
+                Source maps can be uploaded retroactively but changes will only apply to all future exceptions ingested.
+            </p>
+            {missingSymbolSets.length > 0 && (
+                <SymbolSetTable id="missing" dataSource={missingSymbolSets} pageSize={5} missing />
+            )}
+            {(validSymbolSets.length > 0 || missingSymbolSets.length === 0) && (
+                <SymbolSetTable id="valid" dataSource={validSymbolSets} pageSize={10} />
+            )}
+            <SymbolSetUploadModal />
+        </div>
     )
 }
 

frontend/src/scenes/error-tracking/errorTrackingSymbolSetLogic.tsx → frontend/src/scenes/error-tracking/symbol-sets/errorTrackingSymbolSetLogic.tsx

@@ -9,7 +9,7 @@ import { urls } from 'scenes/urls'
 
 import { Breadcrumb } from '~/types'
 
-import type { errorTrackingSymbolSetLogicType } from './errorTrackingSymbolSetLogicType'
+import type { errorTrackingSymbolSetLogicType } from '../symbol-sets/errorTrackingSymbolSetLogicType'
 
 export enum ErrorGroupTab {
     Overview = 'overview',
@@ -66,8 +66,8 @@ export const errorTrackingSymbolSetLogic = kea<errorTrackingSymbolSetLogicType>(
                     path: urls.errorTracking(),
                 },
                 {
-                    key: Scene.ErrorTrackingConfiguration,
-                    name: 'Configuration',
+                    key: Scene.ErrorTrackingSymbolSets,
+                    name: 'Symbol Sets',
                 },
             ],
         ],

frontend/src/scenes/pipeline/destinations/Destinations.tsx

@@ -21,7 +21,7 @@ import { NewButton } from '../NewButton'
 import { pipelineAccessLogic } from '../pipelineAccessLogic'
 import { Destination, PipelineBackend, SiteApp, Transformation } from '../types'
 import { pipelineNodeMenuCommonItems, RenderApp, RenderBatchExportIcon } from '../utils'
-import { DestinationsFilters } from './DestinationsFilters'
+import { DestinationsFilters, DestinationsFiltersProps } from './DestinationsFilters'
 import { destinationsFiltersLogic } from './destinationsFiltersLogic'
 import { pipelineDestinationsLogic } from './destinationsLogic'
 import { DestinationOptionsTable } from './NewDestinations'
@@ -79,15 +79,20 @@ export function Destinations({ types }: DestinationsProps): JSX.Element {
 }
 export type DestinationsTableProps = {
     types: HogFunctionTypeType[]
-    hideFeedback?: boolean
-    hideAddDestinationButton?: boolean
 }
 
 export function DestinationsTable({
+    hideSearch,
     hideFeedback,
     hideAddDestinationButton,
+    hideKind,
+    hideShowPaused,
     types,
-}: DestinationsTableProps): JSX.Element {
+}: DestinationsTableProps &
+    Pick<
+        DestinationsFiltersProps,
+        'hideSearch' | 'hideFeedback' | 'hideAddDestinationButton' | 'hideShowPaused' | 'hideKind'
+    >): JSX.Element {
     const { canConfigurePlugins, canEnableDestination } = useValues(pipelineAccessLogic)
     const { loading, filteredDestinations, destinations, hiddenDestinations } = useValues(
         pipelineDestinationsLogic({ types })
@@ -107,8 +112,11 @@ export function DestinationsTable({
         <div className="space-y-2">
             <DestinationsFilters
                 types={types}
+                hideSearch={hideSearch}
                 hideFeedback={hideFeedback}
                 hideAddDestinationButton={hideAddDestinationButton}
+                hideKind={hideKind}
+                hideShowPaused={hideShowPaused}
             />
 
             <LemonTable

frontend/src/scenes/pipeline/hogfunctions/HogFunctionConfiguration.tsx

@@ -152,7 +152,13 @@ export function HogFunctionConfiguration({ templateId, id }: HogFunctionConfigur
         return <PayGateMini feature={AvailableFeature.DATA_PIPELINES} />
     }
 
-    const showFilters = ['destination', 'site_destination', 'broadcast', 'transformation'].includes(type)
+    const showFilters = [
+        'destination',
+        'site_destination',
+        'broadcast',
+        'transformation',
+        'error_tracking_alert',
+    ].includes(type)
     const showExpectedVolume = ['destination', 'site_destination'].includes(type)
     const showStatus = ['destination', 'email', 'transformation'].includes(type)
     const showEnabled = ['destination', 'email', 'site_destination', 'site_app', 'transformation'].includes(type)

frontend/src/scenes/pipeline/hogfunctions/filters/HogFunctionFilters.tsx

@@ -72,6 +72,33 @@ export function HogFunctionFilters(): JSX.Element {
                 </LemonField>
             </div>
         )
+    } else if (type === 'error_tracking_alert') {
+        return (
+            <div className="p-3 space-y-2 border rounded bg-bg-light">
+                <LemonField name="filters" label="Trigger">
+                    {({ value, onChange }) => (
+                        <LemonSelect
+                            options={[
+                                {
+                                    value: 'created',
+                                    label: 'New issue created',
+                                },
+                                {
+                                    value: 'reoccurred',
+                                    label: 'Resolved issue reoccurs',
+                                },
+                                {
+                                    value: 'assigned',
+                                    label: 'Assigned issue',
+                                },
+                            ]}
+                            value={value?.trigger ?? null}
+                            onChange={(val) => onChange({ trigger: val })}
+                        />
+                    )}
+                </LemonField>
+            </div>
+        )
     }
 
     const showMasking = type === 'destination'

frontend/src/scenes/pipeline/hogfunctions/urls.ts

@@ -15,6 +15,8 @@ export function hogFunctionUrl(type: HogFunctionTypeType | PipelineStage, id?: s
         return id ? urls.messagingProvider(id) : urls.messagingProviders()
     } else if (type === 'broadcast') {
         return id ? urls.messagingBroadcast(id) : urls.messagingBroadcasts()
+    } else if (type === 'error_tracking_alert') {
+        return urls.errorTrackingAlerts()
     }
     return id
         ? urls.pipelineNode(

frontend/src/scenes/sceneTypes.ts

@@ -11,7 +11,9 @@ export enum Scene {
     ErrorProjectUnavailable = 'ProjectUnavailable',
     ErrorTracking = 'ErrorTracking',
     ErrorTrackingIssue = 'ErrorTrackingIssue',
-    ErrorTrackingConfiguration = 'ErrorTrackingConfiguration',
+    ErrorTrackingAlerts = 'ErrorTrackingAlerts',
+    ErrorTrackingAlert = 'ErrorTrackingAlert',
+    ErrorTrackingSymbolSets = 'ErrorTrackingSymbolSets',
     Dashboards = 'Dashboards',
     Dashboard = 'Dashboard',
     Insight = 'Insight',