Mass Capture of User Experience with JS
summary
A tiny JavaScript collector records player and DOM events and sends them in near‑real time using socket.io with an image‑pixel fallback; PhantomJS is used to capture screenshots for heatmaps. The backend stores and processes millions of traces in MongoDB with simple big‑data pipelines, handling 10–15k concurrent clients (spikes to 120k req/s and ~20M records/hour), and discusses failure modes like lost inserts from document growth plus mitigations such as the hunter library.
AI-written summary · about
chapters (25)
- 0:00Introduction
- 1:25UX capture origins
- 3:55Traditional UX tool limits
- 4:59Solution design
- 7:07Monitor evolution
- 8:11Simplicity principle
- 10:16Proxy capture third-party
- 11:42Modular architecture
- 13:26Scaling millions
- 16:34One-line integration
- 17:57Mouse and click capture
- 20:30Video playback monitoring
- 21:35Full context capture
- 23:49Page performance
- 25:15Code optimization
- 27:21Own vs external tools
- 29:15Sockets vs pixels
- 31:45MongoDB capture
- 33:30Real-time processing
- 36:41Lessons learned
- 37:43Simplicity success
- 38:52Q&A
- 41:04Security constraints
- 42:48SPA dynamic pages
- 44:15Proxy capture details
related talks
39mWelcome to Mordor! Hunting Performance Issues in Node js
18mdotJS 2012 - Christian Amor Kvalheim
30mDebugging and Optimizing User Experience with Deep Visual Analytics
37mMeasuring 2.0 – Building the next generation webanalytics ...
38mWelcome to Mordor! Hunting Performance Issues in Node.js.
48mFrom Here to There
40mObservability for All!
40mJavaScript ... for Science!