Improves discoverability of errors in jobs (#414)

parcelvoy · Mar 29, 2024 · 3b74380 · 3b74380
1 parent 2466b30
commit 3b74380
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 1 deletion.
diff --git a/apps/platform/src/organizations/OrganizationController.ts b/apps/platform/src/organizations/OrganizationController.ts
@@ -37,6 +37,10 @@ router.get('/performance/jobs/:job', async ctx => {
     ctx.body = await App.main.stats.list(ctx.params.job)
 })
 
+router.get('/performance/failed', async ctx => {
+    ctx.body = await App.main.queue.failed()
+})
+
 router.get('/integrations', async ctx => {
     ctx.body = await organizationIntegrations(ctx.state.organization)
 })

diff --git a/apps/platform/src/providers/MessageTriggerService.ts b/apps/platform/src/providers/MessageTriggerService.ts
@@ -170,7 +170,7 @@ export const failSend = async ({ campaign, user, context }: MessageTriggerHydrat
     })
     await createEvent(user, {
         name: campaign.eventName('failed'),
-        data: { ...context },
+        data: { ...context, error },
     }, true, ({ result, ...data }) => data)
     if (shouldNotify(error)) App.main.error.notify(error)
 }

diff --git a/apps/platform/src/queue/Queue.ts b/apps/platform/src/queue/Queue.ts
@@ -95,4 +95,8 @@ export default class Queue {
     async metrics(period = MetricPeriod.FOUR_HOURS): Promise<QueueMetric | undefined> {
         return await this.provider.metrics?.(period)
     }
+
+    async failed(): Promise<QueueMetric | undefined> {
+        return await this.provider.failed?.()
+    }
 }
diff --git a/apps/platform/src/queue/QueueProvider.ts b/apps/platform/src/queue/QueueProvider.ts
@@ -30,4 +30,5 @@ export default interface QueueProvider {
     start(): void
     close(): void
     metrics?(period: MetricPeriod): Promise<QueueMetric>
+    failed?(): Promise<any>
 }
diff --git a/apps/platform/src/queue/RedisQueueProvider.ts b/apps/platform/src/queue/RedisQueueProvider.ts
@@ -136,4 +136,8 @@ export default class RedisQueueProvider implements QueueProvider {
             waiting,
         }
     }
+
+    async failed() {
+        return this.bull.getFailed()
+    }
 }
diff --git a/apps/ui/src/api.ts b/apps/ui/src/api.ts
@@ -315,6 +315,9 @@ const api = {
         jobPerformance: async (job: string) => await client
             .get<Metric[]>(`/admin/organizations/performance/jobs/${job}`)
             .then(r => r.data),
+        failed: async () => await client
+            .get<any>('/admin/organizations/performance/failed')
+            .then(r => r.data),
     },
 
     locales: createProjectEntityPath<Locale>('locales'),

diff --git a/apps/ui/src/views/organization/Performance.tsx b/apps/ui/src/views/organization/Performance.tsx
@@ -7,6 +7,7 @@ import { PreferencesContext } from '../../ui/PreferencesContext'
 import Tile, { TileGrid } from '../../ui/Tile'
 import PageContent from '../../ui/PageContent'
 import { SingleSelect } from '../../ui/form/SingleSelect'
+import { DataTable, JsonPreview, Modal } from '../../ui'
 
 interface Series {
     label: string
@@ -24,6 +25,9 @@ export default function Performance() {
     const [currentJob, setCurrentJob] = useState<string | undefined>()
     const [jobMetrics, setJobMetrics] = useState<Series[] | undefined>()
 
+    const [failed, setFailed] = useState<Array<Record<string, any>>>([])
+    const [selectedFailed, setSelectedFailed] = useState<Record<string, any> | undefined>()
+
     useEffect(() => {
         api.organizations.metrics()
             .then(({ waiting, data }) => {
@@ -46,6 +50,12 @@ export default function Performance() {
                 setCurrentJob(jobs[0])
             })
             .catch(() => {})
+
+        api.organizations.failed()
+            .then((failed) => {
+                setFailed(failed)
+            })
+            .catch(() => {})
     }, [])
 
     useEffect(() => {
@@ -124,6 +134,27 @@ export default function Performance() {
                     }}
                 />
             </div>}
+
+            {failed.length && <>
+                <Heading size="h4" title="Failed" />
+                <div className="failed">
+                    <DataTable items={failed} columns={[
+                        { key: 'id', title: 'ID' },
+                        { key: 'name', title: 'Name' },
+                        { key: 'attemptsMade', title: 'Attempts Made' },
+                        { key: 'failedReason', title: 'Reason' },
+                        { key: 'timestamp', title: 'Timestamp' },
+                    ]} onSelectRow={row => setSelectedFailed(row) }/>
+                </div>
+            </>}
+
+            <Modal
+                title="Failed Job"
+                size="large"
+                open={!!selectedFailed}
+                onClose={() => setSelectedFailed(undefined)}>
+                {selectedFailed && <JsonPreview value={selectedFailed} />}
+            </Modal>
         </PageContent>
     )
 }