5 ms·

Rrweb – record and replay debugger for the web

177 points by notpushkin 2y ago

kkjkj 2y ago
[dead]
- Juice10 2y ago
  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.
  - meiraleal 2y ago
    you are replying to a bot
- meiraleal 2y ago
  Two different AI bots in this thread. Yours is going worse than the other tho your karma is negative.
chetan_187 2y 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 https://zipy.ai
dfgdgf 2y ago
[flagged]
- meiraleal 2y ago
  Tell us how your AI experiment is going. By the amount of downvotes, I'd say pretty bad.
pzo 2y 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 2y ago
  Believe Sentry use it in their session replay product
  - the_mitsuhiko 2y ago
    We do and we're not alone. I really like rrweb and I think it's the strongest library in the space.
- danroc 2y 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 https://blog.replay.io/how-replay-works
eisbaw 2y ago
Does it run locally? I inherently do not trust anything serverd on the web to be stable.
- notpushkin 2y 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.
- XCSme 2y ago
  Yeah, it usually comes included on some analytics platforms like Posthog, or UXWizz which can also be self-hosted and ran locally.
- Juice10 2y 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 2y ago
Posthog uses it for their session replay product as well
- rrrx3 2y ago
  pendo, as well
simplify 2y 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?
- notpushkin 2y 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#privacy https://github.com/rrweb-io/rrweb/blob/master/guide.md#priva...
icholy 2y ago
I wish we had an rr for nodejs.
- roca 2y ago
  https://pernos.co/about/javascript/ https://pernos.co/about/javascript/ is somewhat like that.
- sdwvit 2y 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.
  - westurner 2y 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 https://news.ycombinator.com/item?id=41036985
bqmjjx0kac 2y 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 2y 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.
  - westurner 2y 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://github.com/ChromeDevTools/debugger-protocol-viewer .. https://chromedevtools.github.io/devtools-protocol/ https://chromedevtools.github.io/devtools-protocol/ ChromeDevTools/awesome-chrome-devtools > Chrome Debugger integration with Editors: https://github.com/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/implementors/adapters/ https://microsoft.github.io/debug-adapter-protocol/implement... : - Microsoft/vscode-js-debug: https://github.com/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/vscode-debugger 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 https://github.com/awto/effectfuljs : @effectful/debugger , @effectful/es-persist: https://github.com/awto/effectfuljs/tree/main/packages/es-persist https://github.com/awto/effectfuljs/tree/main/packages/es-pe...
jitl 2y 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.
XCSme 2y 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 2y 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.
- chetan_187 2y ago
  Try this extension, commercial app has free version, will be really helpful. https://chromewebstore.google.com/detail/zipy-plug-play/pbddhebkagleamondfbgochoekdamama https://chromewebstore.google.com/detail/zipy-plug-play/pbdd...
- HyprMusic 2y ago
  Yes, chrome has this built-in: https://developer.chrome.com/docs/devtools/recorder https://developer.chrome.com/docs/devtools/recorder
- Juice10 2y ago
  Maintainer of rrweb here: if you check out the packages folder you’ll see an extensions package that does just that.

177 points by notpushkin 2y ago

kkjkj 2y ago

[dead]

Juice10 2y ago
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.
- meiraleal 2y ago
  you are replying to a bot
meiraleal 2y ago
Two different AI bots in this thread. Yours is going worse than the other tho your karma is negative.

chetan_187 2y 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 https://zipy.ai

dfgdgf 2y ago

[flagged]

meiraleal 2y ago
Tell us how your AI experiment is going. By the amount of downvotes, I'd say pretty bad.

pzo 2y 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 2y ago
Believe Sentry use it in their session replay product
- the_mitsuhiko 2y ago
  We do and we're not alone. I really like rrweb and I think it's the strongest library in the space.
danroc 2y 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 https://blog.replay.io/how-replay-works

eisbaw 2y ago

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

notpushkin 2y 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.
XCSme 2y ago
Yeah, it usually comes included on some analytics platforms like Posthog, or UXWizz which can also be self-hosted and ran locally.
Juice10 2y 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 2y ago

Posthog uses it for their session replay product as well

rrrx3 2y ago
pendo, as well

simplify 2y 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?

notpushkin 2y 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#privacy https://github.com/rrweb-io/rrweb/blob/master/guide.md#priva...

icholy 2y ago

I wish we had an rr for nodejs.

roca 2y ago
https://pernos.co/about/javascript/ https://pernos.co/about/javascript/ is somewhat like that.
sdwvit 2y 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.
- westurner 2y 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 https://news.ycombinator.com/item?id=41036985

bqmjjx0kac 2y 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 2y 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.
- westurner 2y 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://github.com/ChromeDevTools/debugger-protocol-viewer .. https://chromedevtools.github.io/devtools-protocol/ https://chromedevtools.github.io/devtools-protocol/ ChromeDevTools/awesome-chrome-devtools > Chrome Debugger integration with Editors: https://github.com/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/implementors/adapters/ https://microsoft.github.io/debug-adapter-protocol/implement... : - Microsoft/vscode-js-debug: https://github.com/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/vscode-debugger 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 https://github.com/awto/effectfuljs : @effectful/debugger , @effectful/es-persist: https://github.com/awto/effectfuljs/tree/main/packages/es-persist https://github.com/awto/effectfuljs/tree/main/packages/es-pe...

jitl 2y 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.

XCSme 2y 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 2y 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.

chetan_187 2y ago
Try this extension, commercial app has free version, will be really helpful. https://chromewebstore.google.com/detail/zipy-plug-play/pbddhebkagleamondfbgochoekdamama https://chromewebstore.google.com/detail/zipy-plug-play/pbdd...
HyprMusic 2y ago
Yes, chrome has this built-in: https://developer.chrome.com/docs/devtools/recorder https://developer.chrome.com/docs/devtools/recorder
Juice10 2y ago
Maintainer of rrweb here: if you check out the packages folder you’ll see an extensions package that does just that.