OpenTelemetry Trace Waterfall Visualizer
Visualize and analyze OpenTelemetry (OTel), Jaeger, and Zipkin traces with an interactive Gantt waterfall, critical path, and latency breakdown.
Free online OpenTelemetry Trace Waterfall & OTLP Visualizer. Paste or upload OTLP JSON, Jaeger JSON, Zipkin v2, or W3C traceparent headers to inspect distributed traces with interactive Gantt timeline charts, span parent-child hierarchy trees, critical path latency bottleneck calculations, service color-coding, error root-cause inspection, and deep attribute exploration. Runs 100% client-side in your browser — your telemetry data remains strictly private.
Keywords: opentelemetry trace visualizer, otlp json viewer, jaeger trace viewer, zipkin trace viewer, w3c traceparent decoder, trace waterfall online, critical path tracing, microservice latency visualizer, distributed trace viewer, otel span analyzer
Tags: opentelemetry, otel, jaeger, zipkin, tracing, observability, distributed-tracing, waterfall, otlp, devtools
Popular Developer Tools tools
- Cron ParserParse, validate, explain, and build cron expressions with next run times and visual timeline.
- Regex TesterTest, debug, and explain regular expressions with real-time match highlighting.
- Regex ExplainerBreak down any regex into plain English, token by token.
- JSON to TypeScript & Schema GeneratorGenerate TypeScript interfaces, Zod schemas, and Valibot schemas from JSON.
- AI Token CounterCount tokens and estimate API costs for 100+ LLMs with exact BPE and provider tokenization.
OpenTelemetry Trace Waterfall Visualizer is also known as: OTel Trace Visualizer, OTLP JSON Viewer, Jaeger Trace Viewer Online, Distributed Trace Waterfall, OpenTelemetry Span Visualizer.
How to OpenTelemetry Trace Waterfall Visualizer Online
Paste or upload your OpenTelemetry (OTLP) JSON payload, Jaeger JSON export, Zipkin JSON, or W3C traceparent header string into the input editor.
The engine automatically detects the trace format (OTLP, Jaeger, Zipkin, or W3C traceparent) and parses all spans, services, and parent-child hierarchy relationships.
Explore the interactive Waterfall Gantt chart to visually inspect request execution timelines, span start offsets, service boundaries, and parallel subprocesses.
Identify critical path bottlenecks highlighted with the Critical Path flame icon — showing the longest sequential dependency chain dictating total request latency.
Review the Overview tab for service latency breakdowns, error rates, time share percentages, and the top 5 slowest bottleneck spans.
Click on any span row to open the Span Inspector drawer, displaying detailed OpenTelemetry semantic attributes (HTTP route, DB queries, LLM token usage, exception messages), log events, and raw JSON.
OpenTelemetry Trace Waterfall Visualizer Features
Multi-Format Distributed Trace Parsing: Supports OpenTelemetry (OTLP) v1 JSON (HTTP/gRPC exports), Jaeger JSON (v1 & v2 exports), Zipkin v2 JSON, and W3C traceparent header strings.
Interactive Waterfall Gantt Timeline: Visualizes distributed trace spans on a relative millisecond timeline with zoom, parent-child indentation, and collapsible sub-trees.
Automated Critical Path Calculation: Employs a directed acyclic graph (DAG) critical path algorithm to identify the exact sequence of spans determining total end-to-end latency.
Service Color-Coding & Dynamic Palette: Automatically hashes service names to distinct, accessible colors across waterfall bars, badges, and latency summary tables.
Root-Cause Error & 5xx Highlighting: Badges failed spans with HTTP 4xx/5xx status codes, uncaught exceptions, and error tags in high-visibility red.
Deep Attribute & Semantic Convention Inspector: Inspects all OpenTelemetry semantic conventions including http.route, db.statement, gen_ai.usage.total_tokens, and exception.stacktrace.
Span Events, Logs & Links Timeline: Renders in-span log events, microsecond timestamps, and linked cross-trace references in chronological order.
Multi-Trace Payload Support: Allows browsing multiple traces from batch exports using an intuitive trace selector dropdown.
Service Latency & Time-Share Breakdown: Aggregates span counts, error counts, total duration, and average latency per microservice.
Top Latency Bottlenecks Ranking: Ranks the top 5 slowest spans with instant one-click navigation to inspect their payload and call stack.
W3C Trace Context (traceparent) Decoder: Decodes 00-{trace_id}-{span_id}-{flags} headers into version, parent ID, trace ID, and sampling flag explanations.
Keyboard Shortcuts & Instant Copy: Navigate with ⌘↵ (View Waterfall), ⌘⇧C (Copy Trace JSON), and ⌘⇧K (Clear input).
REST API Endpoint: Programmatically analyze and extract critical paths from traces via GET/POST requests to /api/tools/otel-trace-analyzer.
100% Client-Side Privacy: All parsing and rendering executes locally in your browser. Telemetry data, internal hostnames, and database queries never leave your machine.
Supported Formats & Dialects
The OpenTelemetry Trace Waterfall Visualizer supports 4 syntax formats and dialects for accurate parsing and processing.
- OpenTelemetry (OTLP JSON v1)
- Standard OpenTelemetry protocol JSON schema containing resourceSpans, scopeSpans, and spans with nanosecond timestamps, AnyValue attributes, and StatusCode enums.
- Jaeger JSON Export
- Jaeger distributed tracing payload structure with data array, traceID, processes dictionary, microsecond timestamps, references (CHILD_OF), and log fields.
- Zipkin JSON (v2 Format)
- Zipkin v2 trace list with id, traceId, parentId, localEndpoint service metadata, microsecond timestamps, tags, and annotations.
- W3C Trace Context (traceparent)
- Standard W3C HTTP header 00-{trace_id}-{parent_id}-{flags} propagating distributed context across microservice boundaries.
Related Standards & RFC Specifications
All StandardsPre-built Automation Pipelines
Chain OpenTelemetry Trace Waterfall Visualizer with other utilities in a multi-step visual workflow.
Base64 Decode → JSON Format
Decode a Base64 string and pretty-print the JSON inside it.
CSV → JSON → YAML
Convert CSV data to JSON, then to YAML format.
JSON Format → TypeScript Schema
Format JSON and generate TypeScript/Zod schema from it.
Example Input & Output
Sample ReferenceInteractive Example: OpenTelemetry Trace Waterfall Visualizer in ActionShow example
Sample Input (text)
{
"resourceSpans": [
{
"resource": {
"attributes": [
{
"key": "service.name",
"value": {
"stringValue": "api-gateway"
}
},
{
"key": "deployment.environment",
"value": {
"stringValue": "production"
}
},
{
"key": "host.name",
"value": {
"stringValue": "edge-gateway-us-east-1a"
}
}
]
},
"scopeSpans": [
{
"scope": {
"name": "express-tracer",
"version": "1.2.0"
},
"spans": [
{
"traceId": "4bf92f3577b34da6a3ce929d0e0e4736",
"spanId": "00f067aa0ba902b7",
"name": "POST /api/v1/checkout",
"kind": 2,
"startTimeUnixNano": "1725880000000000000",
"endTimeUnixNano": "1725880000420000000",
"attributes": [
{
"key": "http.method",
"value": {
"stringValue": "POST"
}
},
{
"key": "http.route",
"value": {
"stringValue": "/api/v1/checkout"
}
},
{
"key": "http.status_code",
"value": {
"intValue": 200
}
},
{
"key": "user.id",
"value": {
"stringValue": "usr_88293"
}
},
{
"key": "client.ip",
"value": {
"stringValue": "198.51.100.42"
}
}
],
"status": {
"code": 1
}
}
]
}
]
},
{
"resource": {
"attributes": [
{
"key": "service.name",
"value": {
"stringValue": "auth-service"
}
}
]
},
"scopeSpans": [
{
"scope": {
"name": "auth-tracer"
},
"spans": [
{
"traceId": "4bf92f3577b34da6a3ce929d0e0e4736",
"spanId": "1a2b3c4d5e6f7081",
"parentSpanId": "00f067aa0ba902b7",
"name": "VerifyJWTToken",
"kind": 3,
"startTimeUnixNano": "1725880000010000000",
"endTimeUnixNano": "1725880000045000000",
"attributes": [
{
"key": "auth.algorithm",
"value": {
"stringValue": "RS256"
}
},
{
"key": "auth.cached",
"value": {
"boolValue": true
}
}
],
"status": {
"code": 1
}
}
]
}
]
},
{
"resource": {
"attributes": [
{
"key": "service.name",
"value": {
"stringValue": "payment-service"
}
}
]
},
"scopeSpans": [
{
"scope": {
"name": "payment-tracer"
},
"spans": [
{
"traceId": "4bf92f3577b34da6a3ce929d0e0e4736",
"spanId": "5fb397be34d23b0f",
"parentSpanId": "00f067aa0ba902b7",
"name": "ProcessPayment (Stripe)",
"kind": 3,
"startTimeUnixNano": "1725880000050000000",
"endTimeUnixNano": "1725880000310000000",
"attributes": [
{
"key": "payment.provider",
"value": {
"stringValue": "stripe"
}
},
{
"key": "payment.amount_cents",
"value": {
"intValue": 8999
}
},
{
"key": "payment.currency",
"value": {
"stringValue": "USD"
}
},
{
"key": "payment.charge_id",
"value": {
"stringValue": "ch_3Mtwx72eZvKYlo2C1g"
}
}
],
"status": {
"code": 1
}
}
]
}
]
},
{
"resource": {
"attributes": [
{
"key": "service.name",
"value": {
"stringValue": "inventory-db"
}
}
]
},
"scopeSpans": [
{
"scope": {
"name": "pg-tracer"
},
"spans": [
{
"traceId": "4bf92f3577b34da6a3ce929d0e0e4736",
"spanId": "3d8a1c902b1f4e5a",
"parentSpanId": "00f067aa0ba902b7",
"name": "UPDATE inventory SET stock = stock - 1",
"kind": 3,
"startTimeUnixNano": "1725880000315000000",
"endTimeUnixNano": "1725880000375000000",
"attributes": [
{
"key": "db.system",
"value": {
"stringValue": "postgresql"
}
},
{
"key": "db.name",
"value": {
"stringValue": "prod_catalog"
}
},
{
"key": "db.statement",
"value": {
"stringValue": "UPDATE inventory SET stock = stock - 1 WHERE sku = $1 AND stock > 0"
}
},
{
"key": "db.rows_affected",
"value": {
"intValue": 1
}
}
],
"status": {
"code": 1
}
}
]
}
]
},
{
"resource": {
"attributes": [
{
"key": "service.name",
"value": {
"stringValue": "notification-worker"
}
}
]
},
"scopeSpans": [
{
"scope": {
"name": "kafka-producer"
},
"spans": [
{
"traceId": "4bf92f3577b34da6a3ce929d0e0e4736",
"spanId": "8c9d0e1f2a3b4c5d",
"parentSpanId": "00f067aa0ba902b7",
"name": "PublishOrderConfirmedEvent",
"kind": 4,
"startTimeUnixNano": "1725880000380000000",
"endTimeUnixNano": "1725880000415000000",
"attributes": [
{
"key": "messaging.system",
"value": {
"stringValue": "kafka"
}
},
{
"key": "messaging.destination",
"value": {
"stringValue": "orders.events"
}
}
],
"status": {
"code": 1
}
}
]
}
]
}
]
}Sample Output
[Processed output for OpenTelemetry Trace Waterfall Visualizer]
Input transformed successfully using opentelemetry trace visualizer, otlp json viewer, jaeger trace viewer.What happened:
Visualize and analyze OpenTelemetry (OTel), Jaeger, and Zipkin traces with an interactive Gantt waterfall, critical path, and latency breakdown.
Frequently Asked Questions
- What is an OpenTelemetry (OTel) trace waterfall?
- An OpenTelemetry trace waterfall is a Gantt-style timeline visualization of a distributed request as it propagates through microservices, databases, caches, and third-party APIs. Each horizontal bar represents a "span" (a discrete unit of work), positioned according to its start offset and sized by its duration.
- What formats can this trace visualizer parse?
- This tool parses OpenTelemetry Protocol (OTLP) v1 JSON (from OTel Collector HTTP or file exporters), Jaeger JSON exports (from Jaeger UI or storage queries), Zipkin v2 JSON payloads, and W3C traceparent header strings (e.g., 00-4bf92f3577b34da6a3ce929d0e0e4736-00f067aa0ba902b7-01).
- How does the Critical Path calculation work?
- The critical path is the longest sequential chain of dependent spans from the root span to leaf operations. Spans that execute in parallel or complete while a longer sibling span is still running do not contribute to the overall request latency. The critical path algorithm identifies the exact chain that dictates total execution time, pinpointing true optimization targets.
- How do I export OTLP JSON traces from my application or OTel Collector?
- In OpenTelemetry Collector, configure the `file` exporter or `debug` exporter with `verbosity: detailed`. In Node.js/Python/Go applications using OTel SDKs, configure `ConsoleSpanExporter` or `InMemorySpanExporter` and output `JSON.stringify(trace)` to capture the raw OTLP payload.
- How does the visualizer detect errors and failed spans?
- The analyzer checks multiple indicators: (1) OpenTelemetry span status code equal to 2 (ERROR), (2) HTTP response status codes >= 400 in http.status_code / http.response.status_code attributes, (3) Jaeger error: true tags, and (4) presence of exception.message or error logs. Failed spans are highlighted with high-visibility red badges and bars.
- Can I visualize AI / LLM agent traces with this tool?
- Yes. OpenTelemetry semantic conventions for Generative AI (e.g., OpenInference, Traceloop, Langtrace) using gen_ai.system, gen_ai.request.model, and gen_ai.usage.total_tokens are fully parsed and displayed in the Span Inspector, allowing you to debug LLM latency, tool calls, and prompt execution trees.
- Is my trace data private when using this tool?
- Yes. All parsing, tree construction, critical path calculation, and Gantt rendering run 100% client-side in your web browser. Proprietary database queries, internal service names, IP addresses, and user identifiers in your telemetry never leave your machine.
- What is a W3C traceparent header and how is it parsed?
- The W3C traceparent header is a standardized 4-part string: version (2 hex chars), trace ID (32 hex chars), parent span ID (16 hex chars), and trace flags (2 hex chars, where 01 indicates sampled). The visualizer decodes these components and explains sampling decisions.
- Can I inspect database queries and HTTP headers from spans?
- Yes. When you click on any span in the Waterfall or Spans table, the Span Inspector drawer reveals all associated OpenTelemetry attributes, including db.statement (SQL/NoSQL query text), http.url, http.route, net.peer.name, and custom application metadata.
- How do I filter and sort spans in large traces?
- The "All Spans" tab includes live text search (filtering across operation names, service names, and attributes), a service filter dropdown, and a status filter (All, Errors Only, OK Only). You can sort by start time, duration, and service name.
Related Developer Tools
- HAR Analyzer & Request ReplayAnalyze HAR files, inspect slow/failed requests, generate replayable curl/fetch code.
- JSON FormatterPrettify, minify, and validate JSON data instantly.
- JSON Schema Visualizer & Tree ExplorerRender Draft-07 / 2020-12 JSON Schemas into interactive visual trees, documentation diagrams, and realistic mock data.
- JWT DecoderDecode, inspect, and validate JWT tokens with claim and signature analysis.
- cURL to Code ConverterConvert cURL commands to idiomatic code across 14 programming languages instantly.