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