Skip to content

Traces

The Traces module provides components for exploring and debugging agent execution traces. These components connect to a TraceBackend to fetch trace data and render paginated lists, span timelines, and detailed span views.

Components

Component Description
TraceExplorer Paginated trace list with filtering, column customization, and auto-refresh
TraceTimeline Waterfall timeline view of spans within a single trace
TraceSpanDetail Detailed view of a single span including input/output JSON

Architecture

The trace components work together to provide a drill-down experience:

graph LR
    TE[TraceExplorer] -->|select trace| TT[TraceTimeline]
    TT -->|select span| TSD[TraceSpanDetail]
  1. TraceExplorer displays a paginated table of traces with columns for time, agent, status, duration, tokens, cost, prompt preview, and tags.
  2. Selecting a trace opens TraceTimeline, which renders a waterfall view of all spans.
  3. Selecting a span opens TraceSpanDetail, which shows the span's full input/output data as formatted JSON.

Quick Example

import {
  TraceExplorer,
  createHttpTraceBackend,
} from "@modernpath/agent-ui-react";

const traceBackend = createHttpTraceBackend({
  baseUrl: "https://api.example.com",
  getHeaders: () => ({
    Authorization: `Bearer ${getToken()}`,
  }),
});

function TracesPage() {
  return (
    <TraceExplorer
      backend={traceBackend}
      pageSize={25}
      refreshInterval={30000}
    />
  );
}