shadcn.io is not affiliated with official shadcn/ui
Grouped Error Triage Notification Block for React Aria
An error tracker's grouped issues in a table: severity as a word and a glyph, event counts and dates, a status menu that updates the word and moves the issue, and an issue that opens to its stack in a numbered code window with a Copy for the event id.
Installation
Overview
Triage errors by what they are, not how often they repeat, with this grouped error log for React with React Aria. It is Faultlark, an error tracker, as a table in a hairline frame with a plus mark on each corner: three issues, each one error that repeated, with its severity as a glyph and a word (Fatal is heavier), the file it comes from, how many events it has, when it was first and last seen and a status menu, a Native Select of Unresolved, Assigned to me, Ignored for 24 hours and Resolved. Choosing a status updates the word, says until when an ignore holds (a time worked out from the page's fixed now), moves the issue down behind the ones that still need someone and updates the count in the band. The first issue is open to its latest event: the stack in a numbered Syntax Text window that follows the theme, with the event id and a Copy Button. Lines come from Guides. For error trackers, support tools and any list that groups repeats.
FAQ
How do I fill it with my issues?
Edit ISSUES: each has an id, a title, a level of fatal, error or warning, a file, the events and users counts, ISO first and last times, the latest event id and its stack as text, one frame to a line. AS_OF is the page's fixed now in UTC and IGNORE_HOURS the length of an ignore, so "Until Thu 09:30 UTC" is worked out from them and reads the same for everyone.
What does the status menu do, and what stays local?
It changes the issue's status in this tab, writes it in the status line, shows how long an ignore lasts and reorders the table: unresolved first, then assigned to you, ignored, resolved, each by event count. Nothing is sent or saved, and a reload brings every issue back as unresolved. In your app post the status from choose and sort by what your tracker returns.
Where do the stacks come from?
They are typed text in ISSUES, shown in a read-only code window with line numbers; nothing is looked up, parsed or sent. The window follows the theme (it has no dark scope) and its tokens are coloured by the catalog's Syntax Text, with the words and numbers still readable when the colours are not told apart. In your app load the latest event's frames and pass them as text.
What does Copy do?
It puts the event id on the clipboard and says "Copied event evt_3b7e91c2." in the status line; if the browser refuses, the button says so. A support team asks for the event id first, which is why it sits on the window's header.
How does it look on a phone?
Each issue becomes a card: its name, severity and file, a line with its events and dates, the status menu, and, when open, the stack in the same window, which scrolls sideways inside itself. The table is one set of elements that changes layout, so the same keyboard order and names apply.
Is it accessible?
The table has a caption, column headers and row headers, the chevron says whether the stack is open and names its issue, and each status menu names its issue. Severity is a word as well as a glyph. After you choose a status focus stays on that issue's menu even though the row moves.