Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Webhook Monitor Dashboard Block for React Aria

Set a webhook endpoint's backoff, maximum attempts and disable rule, see every attempt drawn on a rail with its clock time and the time it gives up, and which endpoints the rule would stop.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

See where a retry policy ends before you ship it with this policy panel for React with React Aria. A hairline frame with a plus mark on each corner starts with an endpoint Native Select in the header, each option showing the day's success rate. A form band sets the backoff (linear, exponential or exponential with a one hour cap), the maximum attempts with a Number Input and the failures in a row that disable the endpoint with a Slider. Under it every attempt is drawn on a rail at its wait from the first failure, with the clock time each one runs and the sentence "Gives up at 22:40, after 6 attempts; the event is kept 72 hours for a manual replay". A last band shows which of the four endpoints their own rule would stop today. It's built from Native Select, Number Input, Slider, Shine Button, Badge and Guides. For webhook consoles and reliability reviews.

FAQ

How are the waits worked out?

Linear waits 30 minutes between tries. Exponential waits 1, 2, 4, 8 minutes and on, doubling each time; the capped form stops doubling at one hour. A typed jitter table adds up to 2 minutes to each wait, so the picture is the same every time you load it and nothing is random.

Why is the rail stretched toward the start?

The first retries come within minutes and the last ones hours later, so a straight scale would pile the early attempts into one mark. The spacing follows the square root of the wait, and the axis labels give the real elapsed time.

What do the open dots mean?

If the endpoint is disabled after fewer failures than the maximum attempts, the later attempts never run. They stay on the rail as open dots and read "Not sent" in the list, and the sentence says when the endpoint is disabled.

What stays local, and how do I wire it for real?

Policies are held in the page: Save keeps them until you reload, and nothing reaches an endpoint. The failing runs are typed. To wire it up, save the policy from save and feed longestRun from your delivery log for the day.

Why does the attempts field update on blur in some builds?

React Aria commits a number field when you leave it, press Enter or use an arrow; the other builds update as you type. Either way the value is clamped to 1 to 12 when you leave the field.

How does it look on a phone?

The three controls stack, the rail scrolls sideways whole inside its band, and the attempt chips go two across.