Stack Trace for Vue

A tool call that threw shows up as one line in the error color, "Failed: TypeError: …", and opens on the stack frames, your own first.

Use it when a call fails with a stack the reader can act on: the frames say which file and line to open. The line is a Trace line with status="error" that expands into the frames, so there is no Stack Trace component to install in Vue. The title truncates, so repeat the full error at the top of the content, keep the frames from node_modules muted so yours stand out, and only send a stack from a development server: it shows your server's file paths.

Installation

Stack Trace is a pattern. The command adds the parts it's built from, Trace and Code Block for the output of the calls around it, and the code to copy is the demo's.

Anatomy

Trace
└── TraceCollapsible
    ├── TraceCollapsibleTrigger
    │   └── TraceLine (status="error")
    │       ├── TraceIcon
    │       └── TraceTitle (Failed: the error)
    └── TraceCollapsibleContent
        └── div (bg-muted, font-mono)
            ├── p (the full error)
            └── ol (one li per frame)

Usage

<script setup lang="ts">
import { CircleXIcon } from "lucide-vue-next";
import {
  Trace, TraceCollapsible, TraceCollapsibleContent,
  TraceCollapsibleTrigger, TraceIcon, TraceLine, TraceTitle,
} from "@/components/ui/trace";
</script>

export function StackTrace(props: { stack: string }) {
  const [error, ...frames] = props.stack.split("\n").map((line) => line.trim());

  return (
    <Trace>
      <TraceCollapsible>
        <TraceCollapsibleTrigger>
          <TraceLine status="error">
            <TraceIcon>
              <CircleXIcon aria-hidden="true" />
            </TraceIcon>
            <TraceTitle>Failed: {error}</TraceTitle>
          </TraceLine>
        </TraceCollapsibleTrigger>
        <TraceCollapsibleContent>
          <div className="flex flex-col gap-2 rounded-md bg-muted p-3 font-mono text-xs">
            <p className="text-destructive">{error}</p>
            <ol>
              {frames.map((frame) => (
                <li
                  className={
                    frame.includes("node_modules") ? undefined : "text-foreground"
                  }
                  key={frame}
                >
                  {frame}
                </li>
              ))}
            </ol>
          </div>
        </TraceCollapsibleContent>
      </TraceCollapsible>
    </Trace>
  );
}

The first line of a stack is the error and each line after it a frame. A frame from node_modules keeps the content's muted color, and yours take text-foreground, so the frames you can fix stand out.

Demos

Frame Links

Your own frames as links that open the file at the line, and the framework's folded into a line of their own, so the frames you can fix come first. Each of your frames is a TraceLine in an anchor, "formatInvoice in app/lib/billing.ts:42"; point the link at your editor or your repository's file view.

AI SDK

When a tool throws, its part is output-error. By default errorText is only the error's message, with no frames. Return error.stack from onError in toUIMessageStreamResponse to send them.

return result.toUIMessageStreamResponse({
  onError: (error) =>
    error instanceof Error ? (error.stack ?? error.message) : String(error),
});

A stack shows file paths from your server, so only send it in development. On the client, split errorText into the error and its frames.

const [error, ...frames] = part.errorText
  .split("\n")
  .map((line) => line.trim());

The messages come from Chat in @ai-sdk/vue, with the same parts.

Map the other tool states as in Tool.

Migrating from AI SDK Elements

AI SDK Elements is for React. In Vue, start from the demos above: an error Trace line that opens on the frames is all there is to Stack Trace.

FAQ

API Reference

Stack Trace has no props of its own. The failed call is a Trace collapsible with status="error" on its TraceLine, and the output of the calls that ran is a Code Block.