Error Debug Logs Window Block for React

Copy logs writes the lines the filter is showing to the real clipboard, and Download saves the same lines as a real text file named for the filter, both typed content from the block. Report issue shows a spinner for under a second and then says it drafted an issue with the error id and the line count; nothing is sent. To wire it for real, post the log, the error id and the visitor's note to your issue tracker where the code says so, and show its error in the status line if it fails.

Edit LINES. Each line has a no (its position in the whole log), a time, a level of info, warn or error, a message, and failed on the one line the request failed on. The level counts, the filter, the copied text and the downloaded file all derive from that one list. Redact keys, tokens and personal data before showing a log to anyone, and show it only to people who should see it.

The block follows your theme, so the log is a light pane in a light theme and a dark one in a dark theme, drawn from theme tokens. A log doesn't have to be dark to be readable: it needs a monospace face, a numbered gutter and one clear mark for the failing line, which here is a heavy edge and the word "failed" rather than a color.

The three buttons show all lines, only the warnings or only the errors, and the polite status line below says which, such as "Showing 3 of 8 lines: error only". A level is always chosen: pressing the chosen one keeps it. Lines keep their own numbers, so a gap in the gutter tells you what's hidden.

The window keeps its fixed height and the log scrolls both ways inside it, so long lines never widen the page. The error id text hides, and its copy button stays; the foot's buttons wrap onto two rows and Report issue stays first.

The log region is a labelled focus stop of its own, so the keyboard can scroll it with the arrow keys, and each line is a list item that reads its number, time, level and message. The filter is a labelled group of toggle buttons. After Report issue, focus moves to the status line so the result is read out. Severity is a word and a weight in every line; the only color is the dot beside Critical.