Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Failed Webhook Delivery Error Block for React Aria

A full-screen page for a webhook the endpoint rejected: the latest attempt's facts, four expectation checks with a shape and a word, numbered request, response and log windows, and a simulated resend.

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

Explain exactly why a delivery failed, with this webhook error page for React with React Aria. It's a whole screen with the page's rails and one band across it. The headline, one sentence and the Shine Button Resend now come first, with an Undo, and a definition list gives the latest attempt: the HTTP status, when it was sent, the event, the endpoint and "Attempt 2 of 5, next 14:52 UTC". Four expectations follow in ruled rows, each a shape and a word: status is 2xx, answers within 3 seconds, body under 256 KB, certificate valid. Under them Tabs hold the request payload, the response body and the delivery log in themed numbered windows, each with a Copy Button. Resend now is a simulation started by a press and bounded at five attempts: it adds the next typed attempt to the log and says it was scripted. The band's rules and the frame come from Guides, and the entrance is CSS only. For an events API, a payments platform or any webhook dashboard.

FAQ

What is real here, and what stays local?

Nothing is sent: the host ends in .example, and the five attempts, their times, statuses and response bodies are typed in the file. Resend now waits a moment and adds the next one. The Copy buttons are real and write the window's text to the clipboard. To wire it for real, build ATTEMPTS from your delivery log and send Resend to your delivery queue.

Where do the four checks come from?

They are worked out from the latest attempt, so they change with it: the status passes for any 2xx, the time passes at or under 3 seconds, and the size and certificate checks are typed. Many senders treat any 2xx as delivered and retry on anything else, including a timeout, which is why the page leads with them.

Why does Resend now never succeed?

Because the demo is scripted: attempt three fails with 500 again, four with 502, five with 504, and each says it was scripted. After the fifth the button says No attempts remain and answers in words if pressed. Undo takes the last attempt back, so you can run it again.

How does the log show a new attempt?

Pressing Resend opens the delivery log tab, where the new line is the last and has a heavy edge, and the facts and checks above follow it. The log is a themed numbered window like the other two, with the clock times in UTC.

How does the keyboard work?

Tab reaches Resend now, Undo, the tabs, each window's Copy button and the window itself, which is a scroll region with a tab stop and a name. The arrow keys move along the tabs. The status line says what Resend, Undo or a copy did.

What changes on a phone?

The facts are two across, the checks lose their detail text (the HTTP status and the response title carry it), the tab names shorten to Request, Response and Log with their full names kept for screen readers, and the windows scroll inside themselves.