A request-trace viewer that renders spans as nested bars on one time axis, letting you collapse subtrees, follow the critical path that decided total latency, and inspect any span's attributes and self time.
"use client";
import { SpanWaterfall, type Span } from "@/components/ui/span-waterfall";
const SPANS: Span[] = [
{
id: "1",
name: "GET /docs/field-notes-12",
service: "edge",
start: 0,
duration: 412,
attrs: { "http.status": 200, region: "me-central" },
},
{
id: "2",
parent: "1",
name: "verify session",
service: "auth",
start: 4,
duration: 18,
attrs: { "user.plan": "team" },
},
{
id: "3",
parent: "1",
name: "render page",
service: "web",
start: 26,
duration: 380,
},
{
id: "4",
parent: "3",
name: "load document",
service: "api",
start: 30,
duration: 210,
attrs: { "doc.size_kb": 182 },
},
{
id: "5",
parent: "4",
name: "SELECT blocks",
service: "postgres",
start: 36,
duration: 64,
attrs: { rows: 312 },
},
{
id: "6",
parent: "4",
name: "GET comments",
service: "redis",
start: 40,
duration: 9,
},
{
id: "7",
parent: "4",
name: "fetch attachments",
service: "storage",
start: 104,
duration: 128,
attrs: { files: 6 },
},
{
id: "8",
parent: "7",
name: "sign URLs",
service: "storage",
start: 108,
duration: 12,
},
{
id: "9",
parent: "3",
name: "load collaborators",
service: "api",
start: 34,
duration: 52,
},
{
id: "10",
parent: "9",
name: "SELECT members",
service: "postgres",
start: 38,
duration: 41,
},
{
id: "11",
parent: "3",
name: "spellcheck dictionary",
service: "web",
start: 90,
duration: 48,
error: true,
attrs: { error: "timeout after 45 ms" },
},
{
id: "12",
parent: "3",
name: "server render",
service: "web",
start: 246,
duration: 148,
},
{
id: "13",
parent: "12",
name: "highlight code blocks",
service: "web",
start: 252,
duration: 96,
},
];
export default function Demo() {
return (
<div className="min-h-full w-full px-4 py-8 bg-[color:var(--background)] text-[color:var(--foreground)]">
<div className="mx-auto w-full max-w-[64rem]">
<SpanWaterfall
title="trace 7f3a…c21 · Example App"
spans={SPANS}
theme="light"
/>
</div>
</div>
);
}
