shadcn.io is not affiliated with official shadcn/ui
Error Tracking Table Block for Vue
An error tracker window with an issue table beside the selected issue's stack trace: library frames are dimmed and tagged, a switch folds each run of them to one line, and Resolve selects the next open issue.
Installation
Overview
Triage errors by the frames you wrote, with this error tracking window for Vue with Ark UI. A framed window of fixed height has a top bar with the product's name and how many issues are open, and two panes. At the start a native table lists the issues by message, events, users and when each was last seen, counted from a fixed date; pressing one selects it. At the end is the selected issue's stack trace. Frames from the app are set at full strength with a bar beside them; frames from libraries are dimmed and tagged "library", and a Switch labelled "Hide library frames" folds each run of them into one line such as "3 library frames". Resolve, a Shine Button, marks the issue resolved in the page and selects the next open one; with none left, an Empty state offers to reopen them. The panes scroll inside the window, which never changes height, and below the large breakpoint the stack goes under the list. It's built from Switch, Shine Button, Empty and Guides. For error trackers, crash reports and any screen that pairs a list with a detail.
FAQ
How does hiding library frames work?
Each frame in the data is marked as the app's or a library's. rowsOf walks the frames and, when the switch is on, gathers each unbroken run of library frames into one row that says how many it stands for. App frames always stay, in their order, so you can still see where the app called into a library and where the library called back. Turning the switch off draws every frame again.
What does Resolve do?
It adds the issue to a list of resolved ones, marks its row "Resolved" with a tick, selects the next open issue (wrapping round from the end) and says so in the status foot. Nothing is sent. When every issue is resolved the stack pane shows an empty state with "Reopen all". Pressing Resolve on an issue that is already resolved only says it is.
How is last seen worked out without a clock?
Each issue stores an ISO minute in UTC and the component compares it with a fixed AS_OF date, so "42 min ago" or "2 d ago" is the same on the server and in every browser, whenever the page is opened. For live data, replace AS_OF with the time of the response, or format the time after mount.
What stays local, and how do I wire a real tracker?
The five issues and their frames are typed in ISSUES, and the resolved list lives in the page. For a real tracker, load the issues and the selected issue's frames from your API, keep rowsOf, mark each frame as app or library on the server (for example by its path) and send the resolve to your backend in the handler.
Is it accessible?
Yes. The issue list is a native table with a caption and a row header per issue; the selected one is marked aria-current on its button. The stack is an ordered list inside a named, focusable region, library frames carry the word "library" in text rather than only a dimmer tone, and the status foot is a polite live region present from the start.