API Error Dialog Block for React

So you can see it without a click. On load the alert is a copy drawn in place over the page: a native dialog element with the alertdialog role that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Error details button opens the real Alert Dialog, modal, with its focus trap, Escape and focus on Close, and the copy stays closed until a reload. Both show the same ErrorFields component and share the block's state, so what was done in the copy is there in the real one. In your app keep the Alert Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

Try again starts an attempt, which takes under a second here and then fails by design, because nothing is requested; the polite line under the facts reads "Attempt 1 of 3 failed: the API answered 502 again", then 2, then 3. After the third the button goes quiet but still answers a press, naming the request id, and the line says that support has it. In your app call the failed request again in retry, stop on a success and close the alert, and keep the count so a person can't hammer an API that is down; for a 429 or a Retry-After header, wait that long before you enable the button.

Yes. The Copy Button writes reportOf(attempts) to the clipboard: the status and code, the request id, the endpoint, the time and the attempts so far, one fact a line, ready to paste into a ticket. A polite message says the report was copied, or that the clipboard refused it, which happens on a page that is not served over HTTPS. The request id, the endpoint and the time are typed constants here; in your app take them from the response that failed.

They show the error body your API returned as a tree, two levels open, so a developer sees the code, the message, whether it is retryable and the upstream that timed out without leaving the alert. It sits last in the alert, so opening it never moves the facts, the attempt line or the buttons above it; in the copy on the page the alert is aligned to the top of the frame for the same reason. Values are plain foreground text, not the tree's usual colours, and the tree scrolls inside its own box if the body is long.

The real alert is named by its title and described by its sentence, and it opens with focus on Close, never on Try again, so a stray Enter backs out. Escape and Close return focus to Error details; clicking outside does not close it, since an alert has to be answered. Close is the focus target through initialFocus. The copy shown on load moves no focus; Escape inside it and Close shut it the same way.

Everything. No request goes out: the 502, the request id, the time and the error body are typed constants, and Try again only counts. Closing says in a polite message how many attempts were made, and the drawn Deploys card shows "Tried 2 of 3". In your app replace the constants with the failed response, make retry call your API, and send the same report to your error tracker when someone copies it.