Recording and Replaying the Browser (with Justin Halsall)

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