🔬 Async Trace Viewer

Keyboard Shortcuts

Visualization Views

1. Identify Serialization Bottlenecks

Views: Bubble (2), 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, orange bars highlight when only 1 operation is active - these are serialization points.

2. Find Async Bottlenecks (Long Waits)

Views: Bubble (2), Latency (6)

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

Questions to ask:

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

💡 The Latency histogram shows p50/p90/p99 lines - focus on outliers beyond p99.

3. Analyze CPU vs I/O Balance

Views: Breakdown (5), sidebar Time Breakdown

💡 In Breakdown treemap, solid portions = sync execution, faded = async waiting.

4. Find Idle Gaps

View: Gaps (7)

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 "User Only" filter 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, Bubble (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 (8)

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)

💡 Use 0.5x speed to carefully observe the sequence of operations.

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
• Sync/Async dividers - Clear white lines separate sync and async portions in Breakdown view
• 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.

Recommended Workflow

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