Rrweb – record and replay debugger for the web

Believe Sentry use it in their session replay product

We use rrweb as a DOM-recorder in our extension, and it does come with some limitations. Taken from our docs:

- DOM recording has the fundamental trait that nothing outside the DOM can be recorded. This latter limitation means that only content on the specific page is recorded: Data in popup dialogs or other tabs is not recorded, neither is anything outside the HTML document like native MacOS/Windows menus shown for native HTML selects.

- On top of that, some embeddable elements like <canvas> are not recorded (e.g. Google Maps, Figma).

- When playing back DOM recordings, there can be visual glitches, like duplicate elements being shown. Even when there’s no obvious glitches, a DOM recording is unlikely to look exactly like the page as experienced by the session reported.

- Security configuration like CORS on the recorded site’s hosting, and Bird’s own CSP policy can prevent the loading and rendering of embedded elements, like the original page’s font.

- Because DOM recordings don’t include all information (e.g. image files are only linked to), DOM recordings can drift apart from the time of the recording in fidelity over time, if the content of the asset behind the URL changes, or even degrade, or when the assets are no longer accessible at all at the URL.

Having said that, we found that rrweb is quite reliable on most situations and works well for most of our users.

Replay.io is a different beast altogether. They implement their tooling on their own browser (Chromium-based), so they have access to much more precise data than a JS-library like rrweb does. More info here: https://blog.replay.io/how-replay-works

Maintainer of rrweb here. I used replay.io for debugging sometimes, it’s really quite useful. It is however a standalone browser and it works by intercepting quite low level browser calls which is only possible to do with a forked version of a browser. So it’s great for debugging if you know what you’d like to reproduce or deep-dive into. rrweb is more versatile as it can run in any browser and you could use it for analytics, live streaming for support, or recording tutorial videos like we do at https://recordonce.com

RRWeb only records changes to the DOM, it doesn't actually replay the JavaScript that makes those changes happen. So you see exactly what the user sees, but you're not able to inspect memory or anything like that.

There are a few caveats since not everything is captured in the DOM, such as media playback state and content in canvases. The user may also have some configurations that change their media queries, such as dark mode or prefers reduced motion.

Edit: and yes, to your point, browser differences would also render differently.

pendo, as well

I think if you use something like Stripe Elements, rrweb won't have access to what user types anyway (as the actual input fields will be on a Stripe-owned domain in an iframe). Or you could add a class like .rr-ignore, which would disable recording for a particular element: https://github.com/rrweb-io/rrweb/blob/master/guide.md#priva...

Yes, chrome has this built-in: https://developer.chrome.com/docs/devtools/recorder

Maintainer of rrweb here: if you check out the packages folder you’ll see an extensions package that does just that.

Try this extension, commercial app has free version, will be really helpful.

https://chromewebstore.google.com/detail/zipy-plug-play/pbdd...

It does. Everything is open source and from what I see there is no official server – you can store captured sessions anywhere you want.

Yeah, it usually comes included on some analytics platforms like Posthog, or UXWizz which can also be self-hosted and ran locally.

If you (git) checkout the project you can use either `yarn repl` or `yarn live-stream` in the `packages/rrweb` folder to play with it locally

Do you mean a time travel debugger? I believe it would be an awesome feature to be able to record & replay program execution. I imagine the recordings would be huge in size, as there are many more degrees of freedom on backend than it is on frontend.

https://pernos.co/about/javascript/ is somewhat like that.