shadcn.io is not affiliated with official shadcn/ui
Error Trace Timeline Block for Radix UI
A stack trace of fourteen frames on a rail with the nine library frames folded into two runs, a marked root cause, code excerpts for the five app frames, a Show library frames switch, a Jump to root cause button and a Copy trace button.
Installation
Overview
Read a stack trace without the noise, and jump to the frame that caused it, with this error trace timeline for React with Radix UI. It is written for Tracefold, a fictional error reporting service, and one failed request. A hairline frame with a plus mark on each corner has a summary cell at the start (the error, its message in mono, the request, the answer and a count of frames: "14: 5 yours, 9 from libraries") and, beside it, a vertical rail of the stack, top frame first. The five frames in the app are nodes that open to a seven-line excerpt with line numbers and the marked line shown with an arrow and the word "throws" or "calls"; the nine library frames fold into two runs ("5 library frames", "4 library frames"). The frame that passes the bad value carries a heavier diamond node and the words "Root cause". The summary cell holds three controls: "Copy trace" puts the whole trace on the clipboard, a Switch "Show library frames" opens every fold, and "Jump to root cause" opens that frame and moves focus to it. The frames sit in one focusable scroll region of a fixed height, so folds and excerpts never change the panel's height. It is built from Switch, Copy Button, Button, Badge, Guides and lucide icons, with a CSS entrance only. For error pages in monitoring tools, crash reports and support consoles. The trace is example data.
FAQ
How do I change the frames?
Edit the frame constants at the top of the file. An app frame is one appFrame(...) call with a function name, file:line:column and an excerpt: the number of its first line, the seven lines of code and which one the stack points at. A library frame is one libFrame(...) line. ENTRIES lists them top of the stack first, with the library frames grouped into runs, and the counts, the trace text and the folds all come from it. ROOT_ID names the root cause.
What does Copy trace copy?
The error line and one at function (file:line:column) line for each of the fourteen frames, in the usual form, library frames included whether they are folded or not. The browser does the copying; if it refuses, the status line says so.
What does Jump to root cause do?
It opens the root cause frame if it is closed and moves keyboard focus to its button, so a keyboard or screen reader user lands on it. The scroll region follows the focus.
What stays in the page, and how do I use a real trace?
The folds, the open excerpts and the switch are local state. Nothing is fetched or sent. To use a real trace, parse your runtime's stack into the same fields and mark library frames by their path (for example, anything under node_modules); the excerpts come from your source maps.
Is it accessible?
The frames are an ordered list and every fold and excerpt is a button with aria-expanded; closed content is hidden from the keyboard and from screen readers. The root cause and the top frame are marked in words as well as by their nodes. The scroll region and each code excerpt can be focused and scrolled by keyboard, and code stays left to right in every language.