shadcn.io is not affiliated with official shadcn/ui
JavaScript Error Stack Trace Viewer Block for React Aria
Five front-end issues with their counts and users, a 24-hour sparkline, an eight-frame stack with an app-frames-only switch, five lines of source around a chosen frame and a button that copies the stack.
Installation
Overview
Read an error's stack from your own code outward with this issue viewer for React with React Aria. It is Stackhound, a front-end error tracker. A list cell holds five issues, each with its error class in monospace, its events, its users and a state word; the chosen issue shows its release and browser, a sparkline of events over 24 hours with the peak read out, then the stack as eight frames. App frames are in the foreground and library frames are muted; a Switch limits the stack to app frames and says how many library frames it hides. Pressing a frame shows five lines of source around it with the failing line marked, and a button copies the whole stack. Guides draw the frame and its bands; the entrance is CSS only. For web apps with source maps and a lot of framework frames.
FAQ
How do I load my own issues?
Edit ISSUES: each has a message, a release and browser, eight frames written as function|file|line|column|kind, a 24-hour series, five source lines for each app frame and a user count. Event totals, the peak, the header sentence and the library-frame counts are derived.
What is an app frame?
A frame in your own code (kind a), as opposed to library code (kind l). Library frames are muted, and the switch hides them; the frame list keeps its height either way, with the hidden rows held as blank space.
How do I use it with a keyboard?
Tab enters the frame list at the chosen frame; Up and Down move to the next visible frame and choose it, Home and End jump. A polite status line names the frame.