Frontend Overview
Transaction throughput, duration percentiles, issue counts, assets/network by time spent, transactions table, and the transaction drill-down drawer.
Frontend Overview is the default Insights tab — a fixed set of performance cards over browser root transactions from the spans explore API. You do not compose widgets; every card always renders.
Tab: Insights → Frontend Overview
Subtitle in UI: “Frontend performance overview - browser transactions, durations, and Core Web Vitals.”
(Core Web Vitals themselves live on the Web Vitals tab; this overview is transaction/span aggregates plus Issue Counts.)
Range control
Pills at the top right: 1h · 24h · 7d · 14d · 30d
- Default: 14d — chosen so lightly trafficked or freshly instrumented projects still show span data (24h is often empty outside continuous production traffic).
- Range is local to this tab (and shared with its child cards). It is not the Dashboard date bar.
Changing range refetches all overview widgets.
Layout (every card)
Row 1 — timeseries
| Card title | Query shape | Series |
|---|---|---|
| Transaction Throughput | Explore timeseries, aggregations: ["tpm"], onlyTransactions: true | TPM (transactions per minute; low traffic may axis-format as /hr) |
| Transaction Duration | Explore timeseries, aggregations: ["p50","p75","p95"], onlyTransactions: true | p50 / p75 / p95 duration |
Empty chart copy: No data in this window.
Loading: Loading…
Row 2 — issue counts + ranked spans
| Card title | Data | Notes |
|---|---|---|
| Issue Counts | GET …/insights/issue-counts?range= | Bar chart of New vs Resolved runtime issues over time. Hour labels for 1h/24h; day labels otherwise. |
| Assets by Time Spent | Explore time_spent with filter op contains "resource." | Timeseries of total time spent + top 5 transactions by time spent |
| Network Requests by Time Spent | Explore time_spent with filter op eq "http.client" | Same pattern for HTTP client spans |
Issue Counts empty: No issues opened or resolved in this window.
Assets/Network reuse the chart empty string No data in this window. (no duplicate list-level empty when the ranked list is empty).
Row 3 — Transactions table
Card title: Transactions
Explore table query:
- Aggregations:
tpm,p50,p75,p95,failure_rate,users,time_spent groupBy: ["transaction"]onlyTransactions: true- Ordered by
time_spentdesc - Limit 25
| Column | Meaning |
|---|---|
| Transaction | Route / transaction name (mono); (unknown) if missing |
| TPM | Throughput |
| P50 / P75 / P95 | Duration percentiles |
| Failure Rate | Fraction as percent |
| Users | Unique users (count_unique(user)) |
| Time Spent | Sum of duration |
Empty: No transactions in this window.
Not shipped on this table: a per-row Performance Score column (needs Web Vitals joined by route). Do not expect it here yet.
Transaction drill-down drawer
Click a table row → right-hand drawer (max width ~2xl):
- Header label Transaction + mono name
- Close button (also click backdrop)
- Throughput chart (TPM for that transaction)
- Duration (p50 / p75 / p95) chart
Filter used: transaction eq <selected>. Same range as the overview.
This drawer is a granular chart drill-down — it is not the Traces waterfall. For span samples, open the Traces tab.
When cards stay empty
| Card | Needs |
|---|---|
| Throughput / Duration / Transactions | Browser root transactions in the spans store for the range |
| Assets by Time Spent | Spans whose op contains resource. |
| Network Requests by Time Spent | Spans with op = http.client |
| Issue Counts | Issues opened or resolved in the window (can fill even when performance spans are empty) |
Pageviews and replays alone are not enough for the performance cards.
Beginner workflow
- Leave range on 14d until you see data; then tighten.
- Scan Transaction Duration for p95 spikes.
- Open the Transactions table → click the slowest Time Spent row → inspect the drawer charts.
- Jump to Traces for a sample waterfall, or Issues when Issue Counts spikes.
- Pair with Replays for the user-visible story.