Stack trace

An error stack that leads with your code: app frames in front, dependency and runtime frames folded by package, and file and line links into your editor.

Markdown

On this page

A server error with app frames in front and dependency frames folded away.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/stack-trace.json

Usage

tsx

import { StackTrace } from "@/components/ui/chatcn/stack-trace"

<StackTrace
  trace={error.stack}
  appRoot="/Users/mira/code/checkout"
  getFrameHref={(frame) => `vscode://file${frame.file}:${frame.line}:${frame.column}`}
/>

V8 (Node, Chrome, Edge) and Firefox or Safari stacks are parsed. The first app frame is marked as where the error was thrown. Consecutive node_modules and node: frames fold into one row that names the packages. parseStackTrace is exported.

Examples

Browser stack and compact

A Firefox-format browser stack, a worker error where every frame is a dependency (folded rows open by themselves then), and the compact variant without a surface, for embedding in test results or a tool call.

A browser trace and the compact variant for embedding.

Props

Prop	Type	Notes
`trace`	`string`	Raw `error.stack`
`name`, `message`	`string`, `ReactNode`	Override what the first line says
`appRoot`	`string`	Stripped from paths
`isAppFrame`	`(frame) => boolean`	Decide which frames are yours
`getFrameHref`	`(frame) => string \| undefined`	Link for a frame location
`onFrameClick`	`(frame) => void`	Open an editor panel instead of a link
`defaultExpanded`	`boolean`	Open every folded group
`variant`	`"card" \| "compact"`	Default `card`

Keyboard

Key	Action
`Tab`	Copy, then each folded group and frame link
`Enter`, `Space`	Open or close a folded group

Accessibility

Frames are an ordered list. Folded groups are buttons with aria-expanded and aria-controls.
The origin frame says "Where the error was thrown" to screen readers, besides its bar.
App frames stand out by weight and contrast, not by color.

Motion

None. Folded groups open instantly: a stack is read, not watched.