fix(webapp): show errors on AI tool call and embed spans in the run inspector

Author: matt-aitken

.server-changes/ai-tool-call-span-errors.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: fix
+---
+
+Failed AI SDK tool call and embedding spans now show the error message and stack trace in the run inspector, below the tool input.

apps/webapp/app/components/runs/v3/ai/AIEmbedSpanDetails.tsx

@@ -1,5 +1,7 @@
+import type { SpanEvent as OtelSpanEvent } from "@trigger.dev/core/v3";
 import { Header3 } from "~/components/primitives/Headers";
 import { Paragraph } from "~/components/primitives/Paragraph";
+import { SpanEvents } from "~/components/runs/v3/SpanEvents";
 import { formatDuration } from "./aiHelpers";
 import { SpanMetricRow as MetricRow } from "./SpanMetricRow";
 
@@ -35,7 +37,13 @@ export function extractAIEmbedData(
   };
 }
 
-export function AIEmbedSpanDetails({ data }: { data: AIEmbedData }) {
+export function AIEmbedSpanDetails({
+  data,
+  spanEvents,
+}: {
+  data: AIEmbedData;
+  spanEvents?: OtelSpanEvent[];
+}) {
   return (
     <div className="flex h-full flex-col overflow-hidden">
       <div className="flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
@@ -58,6 +66,12 @@ export function AIEmbedSpanDetails({ data }: { data: AIEmbedData }) {
               </div>
             </div>
           )}
+
+          {spanEvents && spanEvents.some((event) => !event.name.startsWith("trigger.dev/")) && (
+            <div className="py-2.5">
+              <SpanEvents spanEvents={spanEvents} />
+            </div>
+          )}
         </div>
       </div>
     </div>

apps/webapp/app/components/runs/v3/ai/AIToolCallSpanDetails.tsx

@@ -1,6 +1,8 @@
+import type { SpanEvent as OtelSpanEvent } from "@trigger.dev/core/v3";
 import { Header3 } from "~/components/primitives/Headers";
 import { CodeBlock } from "~/components/code/CodeBlock";
 import { TruncatedCopyableValue } from "~/components/primitives/TruncatedCopyableValue";
+import { SpanEvents } from "~/components/runs/v3/SpanEvents";
 import { formatDuration, tryPrettyJson } from "./aiHelpers";
 import { SpanMetricRow as MetricRow } from "./SpanMetricRow";
 
@@ -36,7 +38,13 @@ export function extractAIToolCallData(
   };
 }
 
-export function AIToolCallSpanDetails({ data }: { data: AIToolCallData }) {
+export function AIToolCallSpanDetails({
+  data,
+  spanEvents,
+}: {
+  data: AIToolCallData;
+  spanEvents?: OtelSpanEvent[];
+}) {
   return (
     <div className="flex h-full flex-col overflow-hidden">
       <div className="flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
@@ -68,6 +76,12 @@ export function AIToolCallSpanDetails({ data }: { data: AIToolCallData }) {
               />
             </div>
           )}
+
+          {spanEvents && spanEvents.some((event) => !event.name.startsWith("trigger.dev/")) && (
+            <div className="py-2.5">
+              <SpanEvents spanEvents={spanEvents} />
+            </div>
+          )}
         </div>
       </div>
     </div>

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx

@@ -1777,7 +1777,7 @@ function SpanEntity({ span }: { span: Span }) {
           <div className="px-3">
             <SpanHorizontalTimeline startTime={span.startTime} duration={span.duration} />
           </div>
-          <AIToolCallSpanDetails data={span.entity.object} />
+          <AIToolCallSpanDetails data={span.entity.object} spanEvents={span.events} />
         </div>
       );
     }
@@ -1787,7 +1787,7 @@ function SpanEntity({ span }: { span: Span }) {
           <div className="px-3">
             <SpanHorizontalTimeline startTime={span.startTime} duration={span.duration} />
           </div>
-          <AIEmbedSpanDetails data={span.entity.object} />
+          <AIEmbedSpanDetails data={span.entity.object} spanEvents={span.events} />
         </div>
       );
     }