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.
Installation
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.