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
> - On top of that, some embeddable elements like <canvas> are not recorded (e.g. Google Maps, Figma).
rrweb is capable of canvas recording. We use it at sentry but there are inherent challenges with canvas you have to be aware of. Most importantly we're very careful about PII handling and if you have canvases you will sooner or later capture stuff you do not want to have on there unless you are very careful yourself.
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
RR's trick is to record any sources of nondeterminism, but otherwise execute code. One consequence is that it must record the results of syscalls.
Does Rrweb do the same for browser APIs and web requests?
The page mentions pixel-perfect replays, but does that require running on the same browser, exact same version, with the exact same experiments/feature flags enabled?
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.
Maintainer of rrweb here: media playback was added a little while ago and was recently improved quite a lot. Canvas recording is also available but there are three different ways of doing that as all three have their own pros/cons.
> This is a DAP-based JavaScript debugger. It debugs Node.js, Chrome, Edge, WebView2, VS Code extensions, and more. It has been the default JavaScript debugger in Visual Studio Code since 1.46, and is gradually rolling out in Visual Studio proper.
> EffectfulJS Debugger: VSCode debugger for JavaScript/TypeScript. Besides the typical debugger's features it offers: Time-traveling,
Persistent state,
Platform independence,
Programmable API,
Hot mocking of functions or even parts of a function,
Hot code swapping,
Data breakpoints.
This works by instrumenting JavaScript/TypeScript code and injecting necessary debugging API calls into it. It is implemented using EffectfulJS.
Very cool (and complex) implementation. I sponsor and use it for uxwizz.com
I also use a different system alongside it, that only records mouse movement/clicks/keyboard and replays them (so you can choose). RRWeb works well, but it uses more data/computing on both the client and the server-side.
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...
Zipy is also a session replay and error tracking tool, which uses rrweb to capture the DOM. On top of that they have many small and big features which adds value to their product, must visit https://zipy.ai
Is there any browser extension based on Rrweb that would let me record my actions and export them to a file which could be then replayed by another person? I know commercial tools, I am wondering whether there is something free available.
I studied rrweb's MutationObserver-based DOM event handling & recording when rebuilding the Notion editor a few years ago. I've never used the full thing but liked the code quality I encountered.
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.
DataDog, Sentry and Highlight use rrweb quite heavily in their tools to give you an idea of where things went wrong. I haven’t compared it to other session replay tools recently unfortunately, but when I was comparing it to the others a number of years ago rrweb had broadest compatibility with most permissive license.
edit: actually they release frequently it's just latest builds are still pre-release.