Retry Policy

A retry policy and the attempts it produced. A policy shown alone reads as reasonable right up until you see it fired four times in ninety milliseconds — the attempt list is what proves the policy running is the one configured.

src/components/ui/retry-policy.tsx

About

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

A retry policy and the attempts it produced.

Configuration and history in one component on purpose. A policy shown alone reads as reasonable — three attempts, exponential backoff — right up until you see it fired four times in ninety milliseconds because the backoff was never applied. The attempt list is what proves the policy is the one running.

**Jitter is shown as a range, not a number.** A backoff without jitter is how a thousand clients retry in lockstep and turn one outage into two, and a UI that renders "2s" for a delay that is actually 1.4–2.6s hides whether jitter is configured at all.

The projected schedule is computed from the policy, so a policy that would wait eleven minutes on its last attempt says so before anyone ships it.

Install

npx astralyx-ui add retry-policy

Usage

import { RetryPolicy } from '@/components/ui/retry-policy'

<RetryPolicy maxAttempts={4} baseDelayMs={500} factor={2} jitter={0.3} attempts={attempts} />

Composer

Change the props and the source below follows.

Projected schedule

4 attempts · up to 3.5s of waiting

350ms–650ms700ms–1.3s1.4s–2.6s

Attempts

#1failed503 from the embedding service09:41:02
#2failedafter 520ms503 from the embedding service09:41:03
#3succeededafter 1.2s09:41:04

Props

maxAttempts

jitter

tsx

<RetryPolicy
  maxAttempts={4}
  baseDelayMs={500}
  factor={2}
  jitter={0.3}
  attempts={attempts}
/>

Examples

Two failures then a success

tsx

<RetryPolicy maxAttempts={4} baseDelayMs={500} jitter={0.3} attempts={attempts} />

API

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

`RetryPolicy`

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

Prop	Type	Default	Description
maxAttempts	number	required	The policy. The projected schedule is computed from it, so a policy that would wait eleven minutes on its last attempt says so before anyone ships it.
baseDelayMs	number	required	The policy. The projected schedule is computed from it, so a policy that would wait eleven minutes on its last attempt says so before anyone ships it.
factor	number	2	The policy. The projected schedule is computed from it, so a policy that would wait eleven minutes on its last attempt says so before anyone ships it.
maxDelayMs	number	—	The policy. The projected schedule is computed from it, so a policy that would wait eleven minutes on its last attempt says so before anyone ships it.
jitter	number	0	Rendered as a range, not a point. A delay shown as “2s” hides whether jitter is configured at all — and without it a thousand clients retry in lockstep and turn one outage into two.
attempts	RetryAttempt[]	[]	{ attempt, at?, outcome, waitedMs?, error? }. The history that proves the configured policy is the one running.
formatDelay	(ms: number) => string	defaultDelay	—
scheduleLabel	string	'Projected schedule'	—
attemptsLabel	string	'Attempts'	—
noAttemptsLabel	string	'Not retried yet.'	—
noJitterLabel	string	'no jitter — clients will retry in lockstep'	—

Types

`RetryAttempt`

A retry policy and the attempts it produced.

Field	Type	Description
attempt	number	—
at?	string	Already formatted — this component does not own your locale.
outcome	'failed' \| 'succeeded' \| 'gave-up'	—
waitedMs?	number	Milliseconds waited before this attempt.
error?	ReactNode	—