RRWeb is based on a simple idea: If you capture all the DOM events in a browser session, and when they happened, you could play it back later. Play it back for diagnosing error conditions, for understanding your user’s journey, or for creating demo videos that can be edited element-by-element instead of frame-by-frame.
Unfortunately, the simple idea gets tricky when you try to implement, for a whole host of browser specific glitches, differences, and places where the HTML5 spec ran out. It’s exactly the kind of project where might want to use it, but you want someone else to maintain it!
Joining us this week is Justin Halsall—a chief contributor to rrweb—to teach us about some of the more barren corners of the browser spec, how he’s fought through them, and what the benefits are on the other side…
–
RRWeb homepage: https://www.rrweb.io/
RRWeb on Github: https://github.com/rrweb-io/rrweb
RecordOnce: https://recordonce.com/
Support Developer Voices on Patreon: https://patreon.com/DeveloperVoices
Support Developer Voices on YouTube: https://www.youtube.com/@developervoices/join
Justin on Twitter: https://x.com/juice10
Kris on Mastodon: http://mastodon.social/@krisajenkins
Kris on LinkedIn: https://www.linkedin.com/in/krisjenkins/
Kris on Twitter: https://twitter.com/krisajenkins
–
0:00 Intro
3:10 What is rrweb Doing?
6:12 Beginning With A Naive Implementation
9:49 Supporting Canvas Tags
13:05 Exotic HTML 5 Tags Like Midi
14:31 The Internal Data Format
17:39 How Reliable Can This Be In Practice?
23:04 Cross-Browser Support
24:32 Exploring The Use Cases
30:17 Privacy Issues
33:46 Analyzing User Interactions En-Masse
36:40 Is The Spec Greater Than The Tool?
38:20 The Practical Benefits Of Contributing To Open Source
44:45 Updating Recordings After The Website Changes
49:55 Playing Well (Or Badly) With Popular Frameworks
53:21 The Runtime Burden
54:17 What's Coming In The Future?
1:01:02 Outro
