Skip to content

feat(errors): expandable rows with per-error Spotlight strip (PR H)#50

Merged
coccyx merged 1 commit into
masterfrom
feat/spotlight-errors-page
May 29, 2026
Merged

feat(errors): expandable rows with per-error Spotlight strip (PR H)#50
coccyx merged 1 commit into
masterfrom
feat/spotlight-errors-page

Conversation

@coccyx
Copy link
Copy Markdown
Contributor

@coccyx coccyx commented May 29, 2026

Summary

PR H of the v0.9.0 faceted-nav thread. Brings the Honeycomb-BubbleUp-style differential view to the Errors page so users can answer "why is this error happening?" without leaving the page or knowing what filters to type.

What changes for the user

  • Expandable error rows. Each error group row now has a chevron (▶); clicking the row toggles a Spotlight strip immediately beneath it.

  • Per-error Spotlight. Selection KQL is the error's service + operation + status.code == "2" (ERROR). Baseline is the rest of the time window. The differential surfaces what's distinct about the failing spans relative to everything else.

  • Click-to-Search. Clicking any value in the Spotlight panel navigates to the Traces page pre-seeded with the error's service, operation, lookback, and the picked attribute filter. Two clicks from "what's this error?" to "show me the matching spans".

  • How-to banner above the table explains what clicking does. No mystery-meat affordances.

Engineering

  • New reusable <SpotlightSection> wraps the streaming fetch + panel render. PR I (Service Detail) will drop it in without re-implementing the data layer dance.
  • Errors page table rows are now React Fragments so the expanded <tr> lives directly under its parent row in the table flow.

Screenshots

Collapsed — chevron affordances + how-to banner:
00

Expanded — Spotlight for frontend GET /api/products/{productId}:
01

Eight ranked attributes (rpc.system, http.response.status_code, http.request.method, http.route, rpc.method, messaging.destination.name, messaging.operation, http.method) with per-value sel/base bars and diff %.

Test plan

  • `npx tsc --noEmit` — clean
  • `npm run lint` — 0 errors
  • `npm test` — 101/101 passing
  • `npm run deploy` — packed + uploaded + provisioned on staging
  • Playwright capture spec succeeds (collapsed + expanded shots)

Validate on staging

  1. Open the Errors page
  2. Confirm the accent-colored "how to" banner at the top
  3. Click any error row — chevron rotates, Spotlight panel streams in below
  4. Click any value in the panel — navigates to Traces with service, operation, lookback, and filter pre-set
  5. Click the row header again to collapse

What's next

PR I: Spotlight on Service Detail (service-level slice + per-op-anomaly drilldown) using the same <SpotlightSection>. After that, cut v0.9.0.

Session log

`docs/sessions/2026-05-28-errors-spotlight.md`

🤖 Generated with Claude Code

PR H of the v0.9.0 faceted-nav thread. Brings the differential
view to the Errors page so users can answer "why is this error
happening?" without leaving the page or knowing what filters to
type.

- Each error group row gets a chevron; clicking the row toggles
  a Spotlight strip immediately beneath. Selection KQL is
  service.name + operation + status.code == "2" (ERROR). Baseline
  is the rest of the time window.
- Click any value in the panel → navigates to the Traces page
  pre-seeded with the error's service, operation, lookback, and
  the picked attribute filter. Two clicks from "what's this
  error?" to "show me the matching spans".
- New reusable <SpotlightSection> component owns the streaming
  fetch + panel render, so PR I (Service Detail) can drop it in
  without re-implementing the data layer dance.
- Accent-colored "how to" banner above the table explains what
  clicking does. No mystery-meat affordances.

Validated on staging: nine error groups visible in the demo
window, expanding the first surfaces a populated ranked-attr
view (rpc.system, http.response.status_code, http.request.method,
http.route, rpc.method, messaging.destination.name,
messaging.operation, http.method) with per-value sel/base bars.

Pre-merge: tsc clean, lint 0 errors (1 pre-existing
DependencyGraph warning), 101/101 unit tests, build green.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@coccyx coccyx merged commit 52f518c into master May 29, 2026
3 checks passed
@coccyx coccyx deleted the feat/spotlight-errors-page branch May 29, 2026 06:40
coccyx added a commit that referenced this pull request May 29, 2026
Faceted trace search + Spotlight + Settings page reorganization.

- Faceted-nav data layer + UI primitives (#46, #47)
- Search-page integration with Spotlight rail (#48, #49)
- Spotlight on Errors page + Service Detail (#50, #51, #53)
- Small-multiples / readable-card / rate-bar Spotlight redesigns
  driven by manual validation feedback (#52, #54, #55)
- Settings page reorganization with Setup status card, sticky
  nav, and grouped sections (#56)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant