🔬 Async Trace Viewer

Keyboard Shortcuts

Visualization Views

1. Identify Serialization Bottlenecks

Views: Graph (2) with Bubble layout, Parallelism (4)

Pattern: Long vertical chains or parallelism = 1

const a = await fetch('/api/a');
const b = await fetch('/api/b');
const c = await fetch('/api/c');

const [a, b, c] = await Promise.all([
  fetch('/api/a'),
  fetch('/api/b'),
  fetch('/api/c')
]);

💡 In Parallelism view, hover over any time bucket for details. The cyan dashed line shows ideal parallelism - compare to see utilization. Sidebar shows efficiency metrics and top bottlenecks.

2. Find Async Bottlenecks (Long Waits)

Views: Graph (2) with Bubble layout, Latency (6)

Pattern: Gold edge labels (>1ms) or right-tail outliers in histogram

Edges without labels = child created during parent callback (sync/overlapping, no wait time)

Questions to ask:

• Can this fetch response be cached?
• Is this KV/D1/DO call necessary?
• Can non-critical work use ctx.waitUntil()?

💡 Enable outlier detection to highlight >3σ items. Click histogram bars to see individual resources.

Latency View Modes:

• Histogram = distribution of wait times, stacked by type
• CDF = cumulative %, good for SLO analysis ("X% complete under Y ms")
• Birth Order = latency vs sibling position. Rising trend = queuing/contention
• By Type = violin plots by resource type, sorted by total latency contribution
• By User Code = violin plots by user code location (skips internal frames) - shows which lines of YOUR code wait longest

💡 By Type and By User Code are sorted by total latency (% shown), not count. Use Hide Internal (H) to filter noise. Hover for detailed stats and full stack traces. By User Code groups by the first non-internal frame, so you see your code (e.g., "fetch@worker:26") rather than internal implementations.

Reading Violin Plots

Violin plots show the distribution shape of latencies, revealing patterns that box plots hide:

• Wide bulge = many operations clustered at that latency
• Thin neck = few operations in that range
• Multiple bulges = bimodal distribution (e.g., fast bookkeeping vs slow I/O)
• Bottom-heavy = most ops fast, some slow outliers
• Uniform width = even spread across the latency range

Inside each violin: white line = median, gold ◆ = mean, dark bar = Q1-Q3 range, dots = individual data points (for small groups).

💡 When mean >> median (diamond far above line), you have right-skewed data where slow outliers pull up the average. Bimodal shapes suggest your code has distinct "fast path" and "slow path" operations - consider whether the slow path can be optimized or if it's expected I/O latency.

3. Analyze CPU vs I/O Balance

Views: Sidebar Time Breakdown, Parallelism (4)

💡 Check the sidebar Time Breakdown for sync vs async distribution. The Parallelism view also shows this with solid bars for sync execution and faded bars for async waiting.

4. Find Idle Gaps

View: Gaps (6)

Pattern: Orange sections where no work is happening

• Gaps with waiters = blocking operation, check what's pending
• Large gaps = optimization opportunity
• Many small gaps = fragmented execution, consider batching

💡 Hover over gaps to see which operations were waiting during that time.

5. Reduce Runtime Overhead

Pattern: Many dimmed (internal) promises

Use Hide Internal (H key or Analysis menu) to focus on your code.

• Deeply nested .then() chains create overhead
• Flatten with async/await
• Reduce intermediate transformations

6. Find Redundant Operations

Pattern: Multiple fetch/cache with same URL annotation

const userA = await fetch('/user/123');
// later...
const userB = await fetch('/user/123');

const user = await fetch('/user/123');
// reuse `user` throughout

7. Find Critical Path

View: Waterfall (1) with 🔥 button, Graph (2)

The critical path determines total request time.

1. Click 🔥 in toolbar to highlight critical path
2. Or: Find resource with latest callbackEndedAt
3. Navigate up to root using ↑ button
4. Sum of edge latencies = minimum request time

💡 Only optimizing operations on the critical path improves overall latency.

8. Watch Request Flow

View: Replay (3)

Use replay to understand how your request executes:

• Glowing circles = currently executing
• Dashed outline = waiting for I/O
• Faded circles = completed
• Arrows = causality (parent triggered child)
• ←/→ = step through timeline (1% increments)
• Shift+←/→ = jump to next/previous event

💡 Use Shift+arrows to step through events one at a time.

Visual Patterns Quick Reference

Accessibility Mode

Press A or click the ♿ High Contrast button to enable accessibility mode.

In this mode:

• Patterns - Different resource types get distinct patterns (dots, stripes, crosshatch) in addition to colors
• Higher contrast - Faded portions are more visible with diagonal stripes
• Bordered sync regions - Sync execution shown with white borders in Waterfall

💡 Accessibility mode helps users who have difficulty distinguishing colors.

Pattern Detection & Thresholds

Press T or enable 🔍 Patterns to detect anti-patterns based on "Broken Promises" concepts.

Severity Levels:

• 🔴 High - Significant impact: sequential-await, sync-flood, unbatched-ops
• 🟡 Medium - Worth investigating: waterfall-fetch, promise-flood, callback-storm, fetch-flood
• 🟢 Low - Minor issues: unresolved-promise, redundant-timers, hot-callback

Configurable Thresholds (in Analysis dropdown):

💡 Adjust thresholds based on your workload - lower values detect more issues, higher values reduce noise.

Sibling & Cousin Grouping

Press S or enable 🔗 Group Siblings to collapse repetitive resources in the Graph view.

What are Siblings?

Resources created from the same code location, by the same parent, within a short time window. Example: A loop creating 10 fetch requests produces 10 siblings.

What are Cousins?

Resources created from the same code location, but by different parents that are themselves siblings.

Compound Nodes:

• Dashed blue ring + red badge (e.g., "×8") = collapsed group
• Shift+Click to expand and see individual members
• Shift+Click minus badge to collapse again
• Hover to see group type (Sibling/Cousin), count, and member types

Options (expand with ▶):

💡 Sibling grouping is most useful in the Graph view to reduce visual clutter from repetitive stream/promise patterns.

Recommended Workflow

1. Overview → Start with Waterfall (1) to see timeline
2. Parallelism check → Switch to Parallelism (4), look for orange serialization
3. Causality → Use Bubble (2) to understand dependencies
4. Critical path → Click 🔥 to highlight what matters
5. Latency outliers → Check Latency (5) histogram for anomalies
6. Idle time → Review Gaps (6) for wasted time
7. Understand flow → Use Replay (3) to watch execution
8. Implement fix → Re-trace and compare