TraceWaterfall
OrganismA 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.
8 spans412 ms
errorpayment.chargepayment
payment.charge
- Service
- payment
- Start
- +264 ms
- Duration
- 140 ms
- Self time
- 10 ms
- Status
- error
Attributes
- error.type
- GatewayTimeout
<TraceWaterfall spans={spans} defaultSelectedId="pay" />8 spans412 ms
cart.loadcart
cart.load ran for 96 ms; 16 ms of it was its own work.
<TraceWaterfall spans={spans} defaultCollapsedIds={['cart']} renderDetail={(span, info) => <p>{span.name}: {info.selfTime} ms self</p>} />1201 spans1 m
<TraceWaterfall spans={manySpans} maxHeight={320} />