Never Miss a UX Drift Again.
Watch how your product evolves screen-by-screen. Detect broken flows, layout shifts, or hidden regressions automatically.
Screens analyzed per second
Drift detection accuracy
Average time to first insight
Catch What QA Can't
Real teams using ScreenGraph to ship with confidence
"Caught a broken onboarding flow before release"
Our refactor accidentally removed a navigation link. ScreenGraph flagged it immediately in the drift report. Would have taken us days to find manually.
"Layout shifts we didn't know existed"
ScreenGraph showed us subtle UI changes across 15 screens that our tests missed. Now we review drifts before every release.
"Visual regression testing on autopilot"
We integrate ScreenGraph into CI/CD. Every PR gets a drift report. Saved us countless hours of manual screenshot comparisons.
🔍 Debugging Retrospective
What we learned from debugging sessions using browser tools, systematic procedures, and cross-stack investigation.
Graph Stream WebSocket Connection Failure
Graph visualization not receiving events - WebSocket connection fails immediately
2025-11-30🔎 Findings
- • WebSocket connection attempted but returns no status code (fails before upgrade)
- • Run stream WebSocket works perfectly (status 101)
- • Backend endpoint returns 404 Not Found when tested directly
- • Other graph endpoints (/graph/diagnostics, /graph/screens) work fine
- • Graph service is loaded (diagnostics returns 'initialized')
- • Endpoint pattern matches working run stream: api.streamOut with path parameter
💡 Learnings
- • Browser MCP tools essential for debugging: browser_console_messages() shows connection lifecycle
- • Network tab (browser_network_requests()) reveals WebSocket status codes
- • 404 on endpoint means it's not registered - backend needs restart for new endpoints
- • Encore automatically extracts path parameters (:runId → handshake.runId)
- • Systematic debugging: compare working vs failing implementations side-by-side
- • Console logging with prefixes ([Graph Stream]) enables easy filtering
✅ Resolution
Root cause identified: Endpoint code is correct but backend needs restart to register new endpoints. After restart, WebSocket should upgrade successfully (status 101) and graph visualization will populate with events.
📚 Debugging Tools We Used
- browser_navigate() - Load pages
- browser_console_messages() - Check logs
- browser_network_requests() - Inspect connections
- browser_snapshot() - Get element refs
- Compare working vs failing implementations
- Check network tab for WebSocket status
- Verify endpoint registration
- Test endpoints directly with curl