Juice10

rrweb maintainer here, thanks for giving the library a shout out!

For the next open source AI tool to try I suggest: Kwaak - https://github.com/bosun-ai/kwaak Curious to see what the author thinks of this one.

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.

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.

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

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

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

Core team member of rrweb here: I've seen a number of tools do as you suggest so I think stepping away from video for the dom makes sense.

PS. Linkkraft looks cool

Only downside I can think of is if the assets (images, fonts etc) that are being linked to change at a later date, your replay might look odd. There are ways to cache these so it’s not the end of the world. Big upside is being able to inspect your DOM and easily reproduce exactly what broke

Good read that goes into this: https://github.com/rrweb-io/rrweb/blob/master/docs/observer....

Core team member of rrweb here. rrweb and other tools that do user session recording heavily depend on the mutation observer https://developer.mozilla.org/en-US/docs/Web/API/MutationObs... to surface changes to a webpage, each of those changes gets serialized into a JSON event and get captured for later viewing. Apart from the things we can get directly from the Mutation Observer we also end up monkey patching things like the https://developer.mozilla.org/en-US/docs/Web/API/WebGLRender... and record each call that is done to it so that we can play those back in the same order for replay.

Before we do all of the diff recording we start with a full snapshot of the webpage which captures every dom node. And it does a lot more than just your plain old `document.documentElement.outerHTML`, it captures contents of style sheets, images, scroll positions etc.. We use those full snapshots as keyframes to base our diffs off of. This works in a similar way to how video files work, but the snapshots don't contain any pixel data, just DOM information.

On replay we go ahead and rebuild the DOM as close to how it was recorded and we then animate the changes as they occurred.

Let me know if you'd like some more detail on a specific part of any of this.

There is also a video which explains some of this which might be helpful: https://youtu.be/cWxpp9HwLYw?t=1163

My 16 inch throttles so hard. kernel task at over a 1000% (thousand%) CPU. Scheduler limit under 30/100. This is just painful

Nice blogposts, to bad it'll take 6 months for anyone to share their results following your post :)

Repeatability can be such a pain. Company I used to work for had separate product and marketing teams that didn't talk to each other much. Which meant that by the time the recording was finished a new product update had been pushed out which made the whole recording obsolete.

This problem inspired me to build https://RecordOnce.com which does the re-recording automatically and periodically.

For the initial recording we also uses rrweb. (Can't wait to get us on the rrweb donor/supporter list!)

X is a reference to the three X'es in the Amsterdam coat of arms. We decided we didn't want to have the three X'es otherwise it would look quite porn related.

Expats are very much welcome though, most conversation is done in English to keep it expat friendly.

Love this service, the UI is pretty slick

It's funny to see its always guys getting on their high horses yelling how misogynistic everyone is.