Skip to content

Stack Trace

A Node error parsed into its type, message and frames. Internal frames are muted and can be hidden; a frame's file opens in the editor.

Sourcecomponents/stack-trace.tsx

TypeError: Cannot read properties of undefined (reading 'total')

  1. at formatOrder ()
  2. at renderSummary ()
  3. at Array.map (<anonymous>)
  4. at processTicksAndRejections () (internal)
  5. at async handler () (internal)
  6. at ()

Usage

Stack Trace usage
import { StackTrace, StackTraceActions, StackTraceContent, StackTraceCopyButton, StackTraceError, StackTraceErrorMessage, StackTraceErrorType, StackTraceExpandButton, StackTraceFrames, StackTraceHeader } from "@/components/stack-trace";
export function StackTraceUsage({ error, openInEditor }: { error: Error; openInEditor: (file: string, line?: number) => void }) {  return (    <StackTrace trace={error.stack ?? String(error)} onFilePathClick={openInEditor}>      <StackTraceHeader>        <StackTraceError>          <StackTraceErrorType />          <StackTraceErrorMessage />        </StackTraceError>        <StackTraceActions>          <StackTraceCopyButton />          <StackTraceExpandButton />        </StackTraceActions>      </StackTraceHeader>      <StackTraceContent>        <StackTraceFrames showInternalFrames={false} />      </StackTraceContent>    </StackTrace>  );}

When to use

Use when

A JavaScript error and its stack, parsed into type, message and frames. Internal frames are muted and can be hidden; onFilePathClick makes each file a button

Don’t use when

An error message without a stack (use Alert); a failed test (use Test Results, with the stack in TestErrorStack)