Stack trace

Parses JavaScript error frames into function names, file locations and internal-frame labels.

Preview

TypeError

Draft must contain text

3 stack frames

sendPrompt
handleSubmit
Internal frame

In action

Inspect parsed frames and file locations

TypeError

Draft must contain text

3 stack frames

sendPrompt
handleSubmit
Internal frame

When to use

Use it for

Inspect supplied V8, Node, Firefox or Safari stack frames, preserving Windows drive names and URL paths.
Use onFilePathClick to navigate to a file, line and column; unknown frame text remains readable.
Use open/onOpenChange for controlled disclosure and maxFrames to bound displayed frames. Copy retains the full raw trace.

Avoid

Executing a file path or inferring its contents from an error frame.
Assuming every runtime stack syntax can be parsed; unsupported frame text is retained.

Install

React package

npm install @noorddev/vlak-react

Load the stylesheet once at your app root, then import the components you use.

import "@noorddev/vlak-react/css";
import { StackTrace } from "@noorddev/vlak-react";

Per-component imports are available at @noorddev/vlak-react/components/stack-trace.

Copy the source

npx @noorddev/vlak-cli add stack-trace

Adds the component and its dependencies to components/vlak/. Follow the StyleX setup to compile the source in your application.

shadcn registry

npx shadcn add https://vlak.dev/r/stack-trace.json

Installs the same source through the shadcn CLI.

React

import { StackTrace } from "@noorddev/vlak-react";

<StackTrace trace={"TypeError: Draft must contain text\n  at sendPrompt (src/composer.tsx:42:5)\n  at node:internal/process/task_queues:95:5"} defaultOpen />

See the integration example to compose these components with your application's model and data.

Props

parseStackTrace (function)

Parses V8/Node and Firefox/Safari locations; unknown frame text remains readable.

StackTrace

Prop	Type	Default
`trace`required	`string`
`open`	`boolean`
`defaultOpen`	`boolean`	`false`
`onOpenChange`	`(open: boolean) => void`
`onFilePathClick`	`(filePath: string, line?: number, column?: number) => void`
`onCopy`	`(trace: string) => void \| Promise<void>`
`maxFrames`	`number`

Also accepts Omit<HTMLAttributes<HTMLElement>, "onCopy">.

The ref reaches HTMLElement.

Keyboard

Keys	Does
`Tab`	Tab reaches raw-trace copy, the frame disclosure and optional location buttons.
`Enter, Space`	Enter or Space activates copy, toggles the frame summary or requests navigation to a location.

Accessibility

Error type and message are visible text; internal frames have a readable label rather than opacity alone.
Native disclosure semantics expose expanded state.
All file callbacks are explicit user actions; parsing never opens files.

Markup

The same styles are available as CSS. Native HTML provides the static presentation; React or application code supplies state updates and actions.

npm install @noorddev/vlak

import "@noorddev/vlak/css";

<article class="rs-stack-trace" aria-label="TypeError"><header class="rs-stack-trace-header"><div class="rs-stack-trace-heading"><span class="rs-stack-trace-title">TypeError</span><p class="rs-stack-trace-message">Draft must contain text</p></div></header><div class="rs-stack-trace-content"><details class="rs-disclosure" open><summary class="rs-disclosure-summary">1 stack frame</summary><ol class="rs-stack-trace-list"><li class="rs-stack-trace-frame"><span>sendPrompt</span><span>src/composer.tsx:42:5</span></li></ol></details></div></article>

Classes

.rs-stack-trace.rs-stack-trace-header.rs-stack-trace-heading.rs-stack-trace-title.rs-stack-trace-message.rs-stack-trace-content.rs-stack-trace-list.rs-stack-trace-location.rs-stack-trace-note.rs-stack-trace-frame.rs-stack-trace-internal

Depends on

Button Collapsible Snippet

Use elsewhere

Markdown reference Registry JSON Source AI integration guide