[HN Gopher] Rrweb - record and replay debugger for the web
___________________________________________________________________
Rrweb - record and replay debugger for the web
Author : notpushkin
Score : 153 points
Date : 2024-07-22 04:10 UTC (19 hours ago)
(HTM) web link (www.rrweb.io)
(TXT) w3m dump (www.rrweb.io)
| pzo wrote:
| 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 wrote:
| Believe Sentry use it in their session replay product
| the_mitsuhiko wrote:
| We do and we're not alone. I really like rrweb and I think
| it's the strongest library in the space.
| danroc wrote:
| 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_mitsuhiko wrote:
| > - 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.
| Juice10 wrote:
| 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 wrote:
| Does it run locally? I inherently do not trust anything serverd
| on the web to be stable.
| notpushkin wrote:
| 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 wrote:
| Yeah, it usually comes included on some analytics platforms
| like Posthog, or UXWizz which can also be self-hosted and ran
| locally.
| Juice10 wrote:
| 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 wrote:
| Posthog uses it for their session replay product as well
| simplify wrote:
| 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 wrote:
| 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 wrote:
| I wish we had an rr for nodejs.
| sdwvit wrote:
| 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 wrote:
| 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
| bqmjjx0kac wrote:
| 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 wrote:
| 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 wrote:
| 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...
| Juice10 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| Yes, chrome has this built-in:
| https://developer.chrome.com/docs/devtools/recorder
| Juice10 wrote:
| Maintainer of rrweb here: if you check out the packages folder
| you'll see an extensions package that does just that.
___________________________________________________________________
(page generated 2024-07-22 23:14 UTC)