TraceWaterfall

Organism

A distributed trace as nested rows with offset and duration bars on a time ruler. Collapse and expand, critical-path highlight, error spans (icon and text, not only colour), a detail slot for the selected span, and a windowed list above 500 rows. Tree semantics (role tree and treeitem, aria-level, aria-expanded, aria-selected) with aria-activedescendant, so the keyboard works the same when rows are windowed.

Default, with the critical path and an error span

Preview
8 spans412 ms
POST /checkoutweb
auth.verifyauth
cart.loadcart
SELECT cart_itemscart
inventory.reserveinventory
UPDATE stockinventory
errorpayment.chargepayment
errorPOST gateway/chargepayment

payment.charge

Service
payment
Start
+264 ms
Duration
140 ms
Self time
10 ms
Status
error

Attributes

error.type
GatewayTimeout
Code
<TraceWaterfall spans={spans} defaultSelectedId="pay" />

Collapsed start, custom detail slot

Preview
8 spans412 ms
POST /checkoutweb
auth.verifyauth
errorpayment.chargepayment
errorPOST gateway/chargepayment

cart.load ran for 96 ms; 16 ms of it was its own work.

Code
<TraceWaterfall spans={spans} defaultCollapsedIds={['cart']} renderDetail={(span, info) => <p>{span.name}: {info.selfTime} ms self</p>} />

1 200 spans (windowed)

Preview
1201 spans1 m
batch.importworker
errorstep 0worker
step 1db
step 2cache
step 3worker
step 4db
step 5cache
step 6worker
step 7db
step 8cache
step 9worker
step 10db
step 11cache
step 12worker
step 13db
step 14cache
step 15worker
step 16db
step 17cache
step 18worker
step 19db
step 20cache
step 21worker
Code
<TraceWaterfall spans={manySpans} maxHeight={320} />
Sourcemodules/ui/TraceWaterfall/index.tsx