Traces
Trace list, summary tiles, op filters, search, waterfall drawer, Watch replay link, and empty states.
Traces lists page-load and request traces with per-component timing. Selecting a row opens a waterfall of spans for that traceId. The Insights tab reuses the same TracesPanel used elsewhere in the product (wrapped in a Dashboard-style card).
Tab: Insights → Traces
Card title / subtitle: “Traces” / “Page-load and request traces with granular per-component timing”
What is a trace here?
A trace is a timed tree of spans the SDK reported for one navigation/page-load (and related work). Each list row is one root-ish sample; the drawer shows every span in that trace positioned on a shared timeline.
Range
Pills in the card header help area: 1h · 24h · 7d · 14d · 30d
Default: 24h (unlike Frontend Overview’s 14d default).
Data: GET /api/projects/:id/traces?range=… with optional q and op.
Summary tiles
Four tiles above the list:
| Label | Field |
|---|---|
| Page loads | summary.pageloads |
| p50 | Duration percentile of the summarized set |
| p75 | |
| p95 |
Durations format as ms or s (e.g. 1.23s).
Search and op filters
- Search input placeholder: Search spans by name or op… (debounced ~250ms)
- All ops chip clears the op filter
- Up to 8 op chips from
data.ops(mono labels). Click again to clear.
Query params sent: range, optional q, optional op.
Trace list columns
| Column | Content |
|---|---|
| Transaction | Trace name; red Error badge when hasError |
| Op | Root op (mono) |
| Spans | Span count |
| Duration | Colored: ≥3s red, ≥1s amber, else default |
| When | Local time from startTimeMs |
Click a row to open the waterfall.
Waterfall drawer
Full-height right drawer (max width ~3xl):
- Title: trace name
- Meta: op · duration · “N spans”
- Watch replay link when a
sessionIdis returned — opens/projects/:id/replays?replay=<sessionId> - Close (or click backdrop)
Each span row:
- Colored op chip (pageload/navigation, http, resource.script/css/img/font, browser, etc.)
- Nested indent from parent chain (capped)
- Absolute-positioned duration bar on a shared timeline
- Duration label; error status rings the chip
Loads: GET /api/projects/:id/traces/:traceId → { spans, sessionId }.
Empty / loading
Loading (no data yet): pulse skeleton.
Empty state:
- Title: No traces in this window
- Body: Traces are captured automatically by the SDK on page load (and for same-origin requests). They appear here once traffic comes in.
Failed span fetch shows the error string in the drawer.
How data gets here
The browser SDK emits spans (page load, resources, HTTP client, etc.). They land in the spans store and are queried by the traces API. Manual startSpan-style helpers also contribute when used.
See Web vitals & tracing (SDK).
Beginner gotchas
- Default 24h — if Overview looked fine on 14d but Traces is empty, widen the range.
- Traces are samples, not the same aggregation as Overview’s TPM charts.
- Watch replay only appears when the API can attach a session to the trace.
- Insights tab choice is still not in the URL — refresh returns you to Frontend Overview.