13 ms·

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 d

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

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