Rrweb – record and replay debugger for the web

https://www.rrweb.io/

by notpushkin • 2 years ago

177 29 2 years ago

pzo• 2 years ago

Anyone used replay.io and can compare both? Any limitations? This one is open source but there was no release in 2 years.

edit: actually they release frequently it's just latest builds are still pre-release.

youngtaff• 2 years ago

Believe Sentry use it in their session replay product

the_mitsuhiko2• 2 years ago

We do and we're not alone. I really like rrweb and I think it's the strongest library in the space.

danroc• 2 years ago

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

the_mitsuhiko2• 2 years ago

- 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.

Juice104• 2 years ago

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

eisbaw• 2 years ago

Does it run locally? I inherently do not trust anything serverd on the web to be stable.

notpushkin2• 2 years ago

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

XCSme2• 2 years ago

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

Juice104• 2 years ago

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

philmo1• 2 years ago

Posthog uses it for their session replay product as well

rrrx3• 2 years ago

pendo, as well

simplify• 2 years ago

I tried the "checkout form" demo and in the replay it showed what I typed into the credit card field. Any way to disable sensitive inputs like this?

notpushkin2• 2 years ago

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...

icholy• 2 years ago

I wish we had an rr for nodejs.

sdwvit• 2 years ago

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.

westurner2• 2 years ago

Today I found EffectfulJS Debugger, which is a DAP debugger with time travel and state persistence for JS: https://news.ycombinator.com/item?id=41036985

roca• 2 years ago

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

bqmjjx0kac• 2 years ago

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?

wbobeirne• 2 years ago

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.

westurner2• 2 years ago

What about debugging and recording stack traces too?

"DevTools Protocol API docs—its domains, methods, and events": https://github.com/ChromeDevTools/debugger-protocol-viewer .. https://chromedevtools.github.io/devtools-protocol/

ChromeDevTools/awesome-chrome-devtools > Chrome Debugger integration with Editors: https://github.com/ChromeDevTools/awesome-chrome-devtools#ch...

DAP: Debug Adapter Protocol > Implementations: https://microsoft.github.io/debug-adapter-protocol/implement... :

- Microsoft/vscode-js-debug: https://github.com/microsoft/vscode-js-debug :

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.

- awto/effectfuljs: https://github.com/awto/effectfuljs/tree/main/packages/vscod... :

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.

https://github.com/awto/effectfuljs : @effectful/debugger , @effectful/es-persist: https://github.com/awto/effectfuljs/tree/main/packages/es-pe...

Juice104• 2 years ago

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.

jitl• 2 years ago

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.

XCSme2• 2 years ago

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.

jacekm• 2 years ago

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.

HyprMusic• 2 years ago

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

Juice104• 2 years ago

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

chetan_1872• 2 years ago

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

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

chetan_1872• 2 years ago

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

Rrweb – record and replay debugger for the web

Related Stories