🔬 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

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.

Reading the CDF (Cumulative Distribution):

• Y-axis = "% of operations completing within X time"
• Steep curve = most operations have similar latency (good)
• Long flat tail = some operations much slower (investigate)
• p50 at 1ms, p99 at 100ms = high variance, find outliers
• Orange line (when critical path on) = critical path latencies

💡 CDF is useful for SLO analysis: "What % of requests complete under 50ms?" Read the Y value at X=50ms.

3. Analyze CPU vs I/O Balance

Views: Breakdown (5), sidebar Time Breakdown

💡 In Breakdown view, use different grouping modes to find hotspots. Click items with ▶ to drill down into details. Toggle Sunburst for hierarchical view. Shift+R resets to top level.

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, 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
• 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