feat: Xdebug Trace card and trace page by butschster · Pull Request #337 · buggregator/frontend

butschster · 2026-11-08T15:46:07Z

Adds the xdebug-trace event type (server PR buggregator/server#410): a card in the events list and a trace page.

What you see

Card: request URL (or the trace name, or the script), the name/script the title left out, duration, peak memory, calls, depth; a «cut» badge when the trace hit the size limit or has no end.
Trace page: header with the same numbers plus user calls and stored size; a note when the trace is cut.
- Call tree tab: lazy tree, one level per request (/tree?parent=), «Show more calls» via next (parent=P&from=next), args and return value behind an «args» toggle, file:line opens in the IDE (path mapping respected), calls still running at the cut marked «no exit». Loading and error rows with Retry at every level.
- Search (same tab): /search?q= on submit, results list with «More results»; picking a result opens the tree down to it using the hit's path, pages through the caller's callees if needed, highlights the row, scrolls it into view and focuses it.
- Slowest & top tab: top self-time and slowest calls tables from the summary. The event page payload already carries the summary, so no extra request; /summary is used only when it is missing.
Sidebar entry «Xdebug traces» (shows once the server lists xdebug-trace in its modules). No digit shortcut: keys 1–9 are taken.

Code

src/entities/xdebug-trace/: useTraceTree (per-parent levels, expand, more, retry, reveal), useTraceSearch (paging, stale answers dropped), useXdebugTraceRequests, normalizeXdebugTraceEvent (accepts the list preview and the stored payload of the event page), formatting helpers; UI: PreviewCard (+ story), XdebugTracePage, TraceTree, TraceSearch, TraceSummary. Registered in PAGES_SETTINGS, events store, card/page mappers, sidebar order; new trace icon.

Checked

Unit: 88 files, 543 tests; eslint src and vue-tsc --build --force clean.
Browser (Chromium via Playwright) against a server built from #410 with a full and a cut sample trace, at 1440 px and 390 px: list cards, expand by keyboard (Enter/Space on the toggle, aria-expanded), «more», search → reveal with focus, args toggle, summary tables, cut note and «no exit» marks, no horizontal page scroll, console clean.