Queue Monitor
Depth, throughput and whether the queue is keeping up. Depth alone says nothing — 40,000 draining at 5,000/s is fine, 300 draining at 2/s is an incident.
src/components/ui/queue-monitor.tsxAbout
From the component's own source, where it was written.
Default label formatters, hoisted out of the parameter list.
An arrow function written inline as a default parameter is a value the React Compiler cannot safely reorder, so it bails on the whole component and none of it gets auto-memoised. At module scope it is a stable reference and the component compiles.
Install
npx astralyx-ui add queue-monitor
Usage
import { QueueMonitor } from '@/components/ui/queue-monitor'
<QueueMonitor name="emails" depth={1920} arrivalRate={42} completionRate={61} />Composer
Change the props and the source below follows.
1,920queued
draining, empty in 2m
- processing
- 18
- failed
- 94
- dead letter
- 12
- oldest
<QueueMonitor
name="emails"
depth={1920}
arrivalRate={42}
completionRate={61}
/>Examples
A queue draining
<QueueMonitor name="emails.outbound" depth={1_920} arrivalRate={42} completionRate={61} />A queue backing up
<QueueMonitor name="webhooks.retry" depth={12_400} arrivalRate={310} completionRate={40} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
QueueMonitor
Default label formatters, hoisted out of the parameter list.
Extends Omit<ComponentProps<'div'>, 'children'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| name | ReactNode | required | — |
| depth | number | required | — |
| processing | number | 0 | — |
| failed | number | 0 | — |
| deadLettered | number | 0 | Never folded into failed. A retryable failure is noise; an exhausted job is lost work a human must decide about. |
| arrivalRate | number | — | Together they give the drain estimate. Set completions below arrivals in the composer to watch it flip to "growing". |
| completionRate | number | — | Together they give the drain estimate. Set completions below arrivals in the composer to watch it flip to "growing". |
| oldestAt | Date | — | Age of the oldest waiting job, not average wait — averages hide the one job stuck behind a poison message. |
| history | number[] | — | Optional depth sparkline. |
| now | Date | — | — |
| locale | string | 'en-GB' | — |
| depthLabel | ReactNode | 'queued' | — |
| processingLabel | ReactNode | 'processing' | — |
| failedLabel | ReactNode | 'failed' | — |
| deadLetterLabel | ReactNode | 'dead letter' | — |
| oldestLabel | ReactNode | 'oldest' | — |
| drainingLabel | (duration: string) => ReactNode | DEFAULT_DRAINING_LABEL | Drain estimate, given the formatted duration. |
| growingLabel | ReactNode | 'growing — arrivals exceed completions' | — |
| idleLabel | ReactNode | 'idle' | — |