Agents
Stack Trace
Readable errors: your frames highlighted, library frames folded.
Stack Trace turns a raw error into something you can read: the message in red, your own frames with function, file and line, library and runtime frames folded away, and a copy button for the raw text.
Preview
TypeError: Cannot read properties of undefined (reading 'taxId')
- taxsrc/billing/tax.ts:3
- totalsrc/billing/invoice.ts:18
- renderInvoicesrc/pdf/render.ts:57
- (anonymous)at async Promise.all (index 0)
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/stack-trace.jsonThe CLI also installs the Cuelark theme tokens. With the @cuelark namespace configured, use @cuelark/stack-trace.
Usage
import { StackTrace } from "@/components/ui/stack-trace";
<StackTrace trace={error.stack} />API reference
StackTrace
| Prop | Type | Default | Description |
|---|---|---|---|
| trace | string | — | Raw error text. |
| hideInternal | boolean | true | Fold node_modules and node: frames. |
Accessibility
- Fully keyboard operable with visible focus.
- Live regions announce streaming updates politely.
FAQ
Also searched as: stack trace component react · error display ui · exception viewer · shadcn ai stack trace · error log ui