Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
    Som Shekhar
    @vincenzocasu that looks like a bug... Good that you have created a issue on github.
    I saw that putting the record replay in a web worker is in the roadmap. I'd like to implement it, has anyone started doing things about it?
    Uttkarsh singh
    Hey everyone,
    Is it possible to reproduce a websites interface on the host website so that person can interact with it. Like making a tutorial where first the recorded thing goes and then we are supposed to perform the exact same thing
    Vladimir Milenko
    Did anyone had same issue?
    @Yuyz0112 i guess, that's somehow related to the cached snapshots not handling the css rule inserts, however, from the code it looks like it's working as expected
    Uttkarsh singh
    Hi @everyone,
    Is there a way we could attach click event to stop recording in rrweb.io as I need to send the events to the backend after my events array is created so a button to stop recording would be more convenient.
    Richard Kho

    :wave: Hey all, I wanted to ask a couple things:

    • I saw mentions about a "pro plan" to support same- and cross-origin iFrame recording; what is the "pro plan" and is it available today? In general, what is the current state of iFrame recording?

    • I saw the warning on the npm page about v1 data structure changes; any idea how the player might handle backwards compatibility?

    Hi @rkho
    1. same-origin iframe support has been implemented and merged into the master branch. Supporting shadow-dom will be done these days(DOM mutation observer in shadow-dom is already merged), the cross-origin iframe is still pending. pro-plan is a personal consulting plan provided by me and you can send an email to me if you are interested.
    2. all the recorded events will have backward compatibility in v1.0.

    Hi all, I'm very happy to share an experimental product build by rrweb's core team on top of rrweb:

    storyteller is a no-code interactive tutorial builder, you can see demos(also made by the storyteller itself!) on the website. if you want to get early access, please leave your email and we are going to contact you ASAP

    Francesco Megna

    Hi folks, I'm struggle with record and replay a site. I noticed that rrweb invoke the emit function only twice. If I use the emitted events with the replay library, I just get a 0 second video that show me a static snapshot of the page.

    What I'm missing?

    this is how I record the page
            emit(event, isCheckout) {
    Danel Ceresa

    Hey there,
    According to the github, the issue with angular: rrweb-io/rrweb#469 was fixed in the commit rrweb-io/rrweb@13f1a61. I've tried with angular 9, then upgraded to 10 and finally to 11. They all face the same result. Screen gets frozen. I've used the example code readme for the recording.

    This was done in Feb, anyone knows if it was truly fixed? shall I reopen the ticket?

    Hi everyone, and Thanks to rrweb authors ! this is crazy amazing. (I'm french :) ) I'm using Rrweb on nuxtjs, and everything works almost as it should, except when the site to record payload is to huge. Indeed, when I use rrweb on simple page, everything is ok, and replayer works fine. When I use a vue js example admin page, the first emit fired will try to send about 1.2Mo, but the log says payload it too huge. Does any one have any idea how I can solve this issue ? Should I run rrweb on window.load ? or should I record less events (what I don't really want) ? I also wonder how url catching is working on an spa page ? I've tried looking at all emited events array, and I only see the first url. I may be wrong, or I missed something, but, How can I push url to rrweb on an SPA ? Thanks to you
    Capture d’écran 2021-05-06 à 09.28.27.png
    Maximilian von Gaisberg
    Quick question: When loading events into the rrweb-player asynchronously, the progress bar only shows the remaining time from the original events. When new events are loaded, the remaining time does not increase. Is there a way to fix that?
    @vongaisberg i have already reported this issue on github. Check this: https://github.com/rrweb-io/rrweb-player/issues/62#issuecomment-800390694
    Maximilian von Gaisberg
    I figured out a workaround: If you know the final duration beforehand, just add a dummy event with the appropiate timestamp to the initial events
    The duration in my case is not the same for each recording ... so your alternative solution unfortunately does not solve my problem ...
    I'm unable to install rrweb, the npm address is down . Is it just for me ?
    nvm, Looks like the yarn.lock file for the repo I cloned had the wrong registry address
    @fabienc974 if you’re using a node server try increasing the json parsing limit on server side this solved errors for me because I was trying to figure out these huge request going back to server. And for the events in SPA the first batch of event is huge due to all the CSS and HTML is sent in the first request.

    @fabienc974 if you’re using a node server try increasing the json parsing limit on server side this solved errors for me because I was trying to figure out these huge request going back to server. And for the events in SPA the first batch of event is huge due to all the CSS and HTML is sent in the first request.

    Hi, Droidprogrammer, I'll try it soon and I'll give a feedback asap.

    Ryan Chandler
    Anybody got some time to help?
    I'm running into an issue with the replayer - I've got a bunch of nodes that have the string "null" inside of them - presumably an issue with the textContent key in the event having the value null... anyone had a similar issue?
    Justin Halsall
    I haven’t ever seen that unfortunately Ryan
    Raja Venkataraman
    Hi. Thanks for the amazing library, Ive tried both rrweb and rrweb-player but when adding a event using the addEvent method, it doenst seem to update the time at the bottom. It stays with the duration of the first event that was passed to Replayer or rrwebPlayer. Is there a way to update the time as the events are getting added (say, through a websocket) ?
    Just found rrweb-io/rrweb-player#62 and rrweb-io/rrweb#549.. Is this the way to go forward. ?
    Bernhard Hörmann
    @ryangjchandler: Do you mean something like this:
    i am having the same issue - no solution.
    Hey All, RRWeb looks awesome, and arguably the only decent solution for session replay. I was wondering how you are all logging/integrating this? I was considering logging to ELK and creating a Kibana visualization to show these, but its a lot of work to go to and I suspect there are existing solutions.
    Bernhard Hörmann
    Has anybody integreted it successfully with pages behind authentication?
    Arnav Chaurasia
    may i know when will be the next release of rrweb
    when can we use the mask text option i do not want to record my text
    Arnav Chaurasia
    anyone there ?
    Justin Halsall
    It looks like rrweb is gearing up for a 1.0 release. I suspect the next release that might come up would be a beta 1.0
    No idea on timing though
    Hi guys is there any updates on these issues
    Onur Solmaz

    Hi all! Just found out about rrweb, and I'm considering it as a replacement for Microsoft Clarity in order to preserve the privacy of my users.

    I've been looking for a guide to configure the backend API to receive the recordings, but I can't find any. Is rrweb ready to record user sessions at production yet?




    Hello, whenever I run the replay.play I get warnings are nothing plays
    The recording is fine and is stored in a array which is then passed to replay object when its init

    1.0 release note?
    Justin Halsall
    @solmaz:matrix.org you can use any type of backend you’d like really. It doesn’t matter for rrweb. All the backend has to do is accept an http request with an array of events and save that. You can use any language, framework, database you’d like. Whatever you are familiar with is probably the right choice. I’m using Ruby on Rails, with a postgress database. But you could even save the events to S3 if you’d like, I know a lot of other people are doing that
    The event format is stable and hasn’t really changed from 0.9.x to 1.0 beta. I think you should be ok running it in production either now or as soon as 1.0 is released.
    Hi from webdev522 who likes rrweb!

    Sorry for not being active in Gitter channels.
    Due to the unstable accessing to Gitter from China, and the poor notification support, we(the recently organized core team) decide to move to slack.
    Here is an invitation link: https://join.slack.com/t/rrweb/shared_invite/zt-siwoc6hx-uWay3s2wyG8t5GpZVb8rWg

    We believe this will provide a far better community experience for anyone who loves rrweb.

    Milan Cakic

    I am having a challenge getting the replay system to work. Any insight would be appreciated. Issues:

    1. Parsing the events text to create a JSON object creates a parse error, which seems to be fixed by using replace(/[\u0000-\u001F]+/g,"").
    2. I then encounter an error in the player related to 'appendChild'.

    Uncaught TypeError: Cannot read property 'appendChild' of null
    at t.setupDom (index.ts:202)

    let events = JSON.parse('{"events": [{"data": {"href": "http://localhost:8080/record/demo?", "width": 2117, "height": 952}, "type": 4, "timestamp": 1628792519814, "session_id": "1628792519814"}, {"data": {"node": {"id": 1, "type": 0, "childNodes": [{"id": 2, "type": 2, "tagName": "html", "attributes": {}, "childNodes": [{"id": 3, "type": 2, "tagName": "head", "attributes": {}, "childNodes": [{"id": 4, "type": 3, "textContent": "\n"}, {"id": 5, "type": 2, "tagName": "link", "attributes": {"rel": "stylesheet", "href": "https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.css"}, "childNodes": []}, {"id": 6, "type": 2, "tagName": "script", "attributes": {"src": "https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js"}, "childNodes": []}, {"id": 7, "type": 3, "textContent": "\n\n"}, {"id": 8, "type": 2, "tagName": "script", "attributes": {}, "childNodes": [{"id": 9, "type": 3, "textContent": "SCRIPT_PLACEHOLDER"}]}, {"id": 10, "type": 3, "textContent": "\n\n"}, {"id": 11, "type": 2, "tagName": "title", "attributes": {}, "childNodes": [{"id": 12, "type": 3, "textContent": "This page title"}]}]}, {"id": 13, "type": 3, "textContent": "\n\n"}, {"id": 14, "type": 2, "tagName": "body", "attributes": {}, "childNodes": [{"id": 15, "type": 2, "tagName": "h1", "attributes": {}, "childNodes": [{"id": 16, "type": 3, "textContent": "Demo Page"}]}, {"id": 17, "type": 3, "textContent": "\n\n"}, {"id": 18, "type": 2, "tagName": "form", "attributes": {}, "childNodes": [{"id": 19, "type": 3, "textContent": "\n"}, {"id": 20, "type": 2, "tagName": "input", "attributes": {"id": "name", "type": "text"}, "childNodes": []}, {"id": 21, "type": 3, "textContent": "\n"}, {"id": 22, "type": 2, "tagName": "input", "attributes": {"id": "submit", "type": "submit", "value": "Submit"}, "childNodes": []}, {"id": 23, "type": 3, "textContent": "\n"}]}, {"id": 24, "type": 3, "textContent": "\n\n\n"}]}]}]}, "initialOffset": {"top": 0, "left": 0}}, "type": 2, "timestamp": 1628792519816, "session_id": "1628792519814"}, {"data": {"source": 1, "positions": [{"x": 211, "y": 75, "id": 22, "timeOffset": 0}]}, "type": 3, "timestamp": 1628792520550, "session_id": "1628792519814"}, {"data": {"source": 1, "positions": [{"x": 221, "y": 58, "id": 14, "timeOffset": -439}, {"x": 233, "y": 27, "id": 15, "timeOffset": -389}, {"x": 237, "y": 12, "id": 15, "timeOffset": -339}, {"x": 241, "y": 5, "id": 2, "timeOffset": -289}, {"x": 249, "y": 4, "id": 2, "timeOffset": -239}, {"x": 273, "y": 15, "id": 15, "timeOffset": -189}]}, "type": 3, "timestamp": 1628792521052, "session_id": "1628792519814"}]}'.replace(/[\u0000-\u001F]+/g,""))['events'];

    const replayer = new rrweb.Replayer(events);