Replication Status

A primary and its replicas with how far behind each one is, in seconds and bytes. Seconds say how stale a read is; bytes say whether it is catching up or falling further behind — a replica idling on 200MB of unsent log shows 0s until traffic arrives.

src/components/ui/replication-status.tsx

About

From the component's own source, where it was written.

A primary and its replicas, with how far behind each one is.

**Lag is reported in seconds and bytes, because they answer different questions.** Seconds tell you how stale a read is; bytes tell you whether the replica is catching up or falling further behind. A replica idling at 200MB of unsent WAL shows 0s lag until traffic arrives, and a dashboard with only seconds calls that healthy right up to the moment it is not.

A replica that is *disconnected* is drawn as a failure, not as very high lag. They are different problems: one needs patience, the other needs someone.

Install

npx astralyx-ui add replication-status

Usage

import { ReplicationStatus } from '@/components/ui/replication-status'

<ReplicationStatus primary={primary} replicas={replicas} />

Composer

Change the props and the source below follows.

Replication

astralyx-prodPrimary

eu-west-2

1.2k tx/s

replica-eu-1Streamingreads
eu-west-2
0.2s1.3 MB
replica-eu-2Streamingreads
eu-west-1
14.8s204.1 MB
replica-us-1Disconnected
us-east-1
0.0s0.0 MB

Props

warnSeconds

tsx

<ReplicationStatus
  primary={primary}
  replicas={replicas}
  warnSeconds={10}
/>

Examples

One lagging, one disconnected

tsx

<ReplicationStatus primary={primary} replicas={replicas} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`ReplicationStatus`

A primary and its replicas, with how far behind each one is.

Extends Omit<ComponentProps<'div'>, 'children'>.

Prop	Type	Default	Description
primary	{ name: string; region?: string; writes?: ReactNode }	required	Replica is { id, name, lagSeconds?, lagBytes?, state?, readable?, region?, meta? }.
replicas	Replica[]	required	Rendered as “no read redundancy”, rather than as an empty list.
warnSeconds	number	10	Lag above this many seconds is a problem.
formatBytes	(bytes: number) => string	(bytes) => `${(bytes / 1_048_576).toFixed(1)} MB`	—
primaryLabel	string	'Primary'	—
readableLabel	string	'reads'	—
emptyLabel	string	'No replicas — this database has no read redundancy.'	—
label	string	'Replication'	—

Types

`Replica`

Field	Type	Description
id	string	—
name	string	—
lagSeconds?	number	Seconds behind the primary.
lagBytes?	number	Bytes of replication log not yet applied.
state?	'streaming' \| 'catchup' \| 'disconnected'	A disconnected replica is drawn as a failure, not as very high lag — one needs patience, the other needs someone.
readable?	boolean	Serves reads.
region?	string	—
meta?	ReactNode	—