Stack Trace

A parsed exception with its frames. Library frames collapse behind a count — a stack is typically three frames of your code buried in forty of the framework’s.

src/components/ui/stack-trace.tsx

About

From the component's own source, where it was written.

A parsed exception with its frames.

Vendor frames are collapsed behind a count by default. A stack is typically three frames of your code buried in forty of the framework's, and every debugger that gets this right hides the noise until asked.

Frames carry a source excerpt when one is available, with the failing line marked — the line number alone means opening an editor to learn anything.

Install

npx astralyx-ui add stack-trace

Usage

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

<StackTrace name="TypeError" message={error.message} frames={frames} raw={error.stack} />

Composer

Change the props and the source below follows.

TypeError

Cannot read properties of undefined (reading 'map')

212 const sorted = useMemo(() => {
213 if (!sort) return rows
214 return rows.map((row) => row.cells.map(render))
215 }, [rows, sort])

Props

vendor frames

error name

tsx

<StackTrace name="TypeError" message={error.message} frames={frames} />

Examples

Exception

tsx

<StackTrace name="TypeError" message={message} frames={frames} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`StackTrace`

Extends Omit<ComponentProps<'div'>, 'children'>.

Prop	Type	Default	Description
name	string	required	—
message	string	required	—
frames	StackFrame[]	required	`{ fn, file, line?, column?, app?, source? }`. `app: false` marks a library frame.
raw	string	—	The original text, for the copy button.
vendorLabel	ReactNode	'vendor'	Badge on a frame outside application code.

Types

`StackFrame`

A parsed exception with its frames.

Field	Type	Description
fn	string	—
file	string	—
line?	number	—
column?	number	—
app?	boolean	False marks a library frame, which is collapsed by default.
source?	{ line: number; content: string }[]	Excerpt shown when a frame is expanded, with the failing line marked. The first app frame opens by default.