Health Checks
Endpoint probes with status, latency and history. A 200 that takes four seconds reads as degraded — a probe list that only reports the status code is why slow outages get noticed by customers first.
src/components/ui/health-checks.tsxAbout
From the component's own source, where it was written.
Endpoint probes: status, latency, and recent history.
Latency carries a threshold so "200 OK in 4 seconds" reads as degraded rather than healthy. A probe list that only reports the status code is why slow outages get noticed by customers first.
The sparkline is latency over recent probes, which turns "is this getting worse" into something answerable at a glance — the single number cannot say whether 400ms is the new normal or the start of something.
Install
npx astralyx-ui add health-checks
Usage
import { HealthChecks } from '@/components/ui/health-checks'
<HealthChecks checks={checks} />Composer
Change the props and the source below follows.
- 42 ms
API
https://api.astralyx.dev/health
200Healthy - 1840 ms
Checkout
https://api.astralyx.dev/checkout/health
200Degraded Registry
https://registry.astralyx.dev/health
503Down- 88 ms
Docs
https://astralyx.dev
200Healthy
<HealthChecks checks={checks} />Examples
Probes
<HealthChecks checks={checks} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
HealthChecks
Endpoint probes: status, latency, and recent history.
Extends ComponentProps<'div'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| checks | HealthCheck[] | required | { id, name, url?, status, latency?, latencyThreshold?, code?, history?, region? }. |
Functions
| Function | Signature | Description |
|---|---|---|
| effectiveStatus | (check: HealthCheck) => 'down' | 'healthy' | 'degraded' | Exported, so a summary elsewhere agrees with the row. |
Types
HealthCheck
| Field | Type | Description |
|---|---|---|
| id | string | — |
| name | string | — |
| url? | string | — |
| status | 'healthy' | 'degraded' | 'down' | — |
| latency? | number | Milliseconds. |
| latencyThreshold? | number | Above it a healthy response is reported as degraded. |
| code? | number | — |
| history? | number[] | Recent latencies as a sparkline — a single number cannot say whether 400ms is normal or the start of something. |
| region? | ReactNode | — |