marcstraube / marcstraube/zappzarapp-php-devtoolbar
feat(frontend): JS error and Web Vitals collector
Open
Nobody has claimed this yet.
effort:l
enhancement
- Dominant language
- PHP
- Stars
- 0
- Forks
- 0
- Avg merge
- 3m
- Merged PRs (30d)
- 4
Description
Motivation
The toolbar only sees the PHP side of a request. Browser-side JavaScript errors and page performance are invisible — exactly the class of problems a dev toolbar should surface.
Scope
- Capture
window.onerrorandunhandledrejection(message, source, line, stack) in the frontend. - Collect Core Web Vitals via
PerformanceObserver: LCP, CLS, INP. - New panel alongside the existing ones; entries flow into the request history like other collector data.
- Purely additive: no guard changes, no listeners registered when the toolbar is disabled.
Acceptance criteria
- JS errors appear in the panel with stack traces.
- Vitals shown with good / needs-improvement / poor thresholds.
- Zero listeners/observers registered when the toolbar is disabled.
- Frontend tests cover error capture and vitals mapping.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
No files or test paths are named. Start by locating the existing frontend collectors, panels, request-history flow, and frontend test setup; then trace how disabled toolbar state prevents registration. Done means errors and LCP, CLS, and INP appear with severity thresholds, while disabled mode registers no listeners or observers and tests cover both mappings.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- devtools, frontend, performance
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100