AI Elements
Stack Trace
Displays a failed tool call and its stack frames.
Stack Trace is a line for a tool call that failed. The error is the title, like "Failed: TypeError". Open it for the stack frames, which can link to the file and line.
Stack Trace is built with UiTrace with a UiTraceCollapsible for the frames.
Installation
Stack Trace is built with the Trace and Code Block components.
Usage
<template>
<UiTrace>
<UiTraceCollapsible>
<UiTraceCollapsibleTrigger>
<UiTraceLine status="error">
<UiTraceIcon>
<UiIcon name="lucide:circle-x" />
</UiTraceIcon>
<UiTraceTitle>Failed: {{ error }}</UiTraceTitle>
</UiTraceLine>
</UiTraceCollapsibleTrigger>
<UiTraceCollapsibleContent>
<div class="bg-muted flex flex-col gap-2 rounded-md p-3 font-mono text-xs">
<p class="text-destructive">
{{ error }}
</p>
<ol>
<li
v-for="(frame, index) in frames"
:key="index"
:class="frame.includes('node_modules') ? undefined : 'text-foreground'"
>
{{ frame }}
</li>
</ol>
</div>
</UiTraceCollapsibleContent>
</UiTraceCollapsible>
</UiTrace>
</template>
<script lang="ts" setup>
const props = defineProps<{ stack: string }>();
const lines = computed(() => props.stack.split("\n").map((line) => line.trim()));
const error = computed(() => lines.value[0]);
const frames = computed(() => lines.value.slice(1));
</script>
The title truncates, so repeat the full error at the top of the content. Frames from node_modules stay muted, so your own frames stand out.
Frame Links
Turn your own frames into links that open the file at the line. Fold the framework frames into a collapsible line of their own, so the frames you can fix come first.
AI SDK
When a tool throws, its part is output-error. By default errorText is only the error 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.
<template>
<UiTraceCollapsible v-if="part.state === 'output-error'"> … </UiTraceCollapsible>
</template>
<script lang="ts" setup>
const [error, ...frames] = part.errorText.split("\n").map((line) => line.trim());
</script>
Map the other tool states as in Tool.
API Reference
See Trace.