Failed API Request Notification Block for React

Edit PANES (one entry per tab with its text), CODE, ENDPOINT, UPSTREAM, REQUEST and FAILED_AT. The code is shown as typed: nothing is parsed, requested or sent, and the payloads are made-up examples. In your app pass the real request and response text, and mask anything secret before it reaches the page.

It waits about a second, adds one to the attempt count and says "Attempt 2 of 3: still 502 in this demo." After the third attempt the button says "No retries remain" and pressing it explains that all attempts are used. Nothing is requested: the retries are a simulation, started only by your press and bounded by LIMIT. In your app call your gateway from retry and stop where your policy says.

It puts the request id on the clipboard and the status line says "Copied request req_9c41e7a2b8."; if the browser refuses, the button says so. Support asks for this id first, which is why it is in the facts and in the response body.

No. Each tab shows its code in a window of the same height that scrolls inside itself when the lines are longer, so switching never moves the status line or the Retry button. Arrow keys move between the tabs and selection follows focus.

The code windows are named regions you can focus and scroll with the keyboard, the line numbers are not read or copied with the code, and the 502 is decorative: the failure is also written as "Bad gateway" with a Failed badge. A polite status message reports each retry and each copy.

The facts come first, in one column, then the frame with the tabs. The code windows keep their height and scroll sideways inside themselves, and the Retry request button sits under its status line.