Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    DecaK
    @DecaK
    Hello friends.
    May I ask you one question about rrweb project?
    I saw it is used for 'record and replay' web actions, but, it replays them in video format. What I need is them to be replayed in real-time browser. Does rrweb support that, or I need to upgrade it to support that? Or maybe quick edit would do the job?
    yz-yu
    @Yuyz0112

    Hi @DecaK

    it replays them in video format

    What do you mean 'video format'? Actually the replay is done by rebuild DOM and simulate actions, it's not a video format like MP4. You can insepct the replay frame in the devtool.

    DecaK
    @DecaK
    Thank you for the response,
    is it possible to be shown in a real-time web page?
    To get other's action and display them as my own, if you understand me.
    DecaK
    @DecaK
    Exactly!
    Is this actually part of rrweb now or it is only a suggestion?
    yz-yu
    @Yuyz0112
    rrweb-io/rrweb#73
    There is some internal support of dynamic add events to the replayer. But to build a solid live-replay still need to handle things like reorder/retry/missing-tolerant and I'm not sure whether this should be implemented in rrweb.
    DecaK
    @DecaK
    Thank you for the response. Do you, maybe, know any other tool that can help me in my project, if rrweb isn't good fit?
    yz-yu
    @Yuyz0112

    @DecaK
    I think you can check whether it's fit by answering the following questions.
    Does your app need collaboration? If yes, rrweb is not suitable. Because of real-time collaboration needs some algorithm to solve the confliction of write which is not included in rrweb's design.
    Does your app have some mechanism to describe the state of the app in a serializable format? If yes, it would be more efficient to send the state and rebuild a synced UI on the other side via it.
    I would like to explain a little more on the second point since it's a common mystery.
    For example, if you have a TODO app, then you can describe the state as

    [
      { content: "todo A", finished: true },
      { content: "todo B", finished: false }
    ]

    Syncing this array allows you to rebuild a TODO app, and it could be more efficient when you implement some incremental state algorithm. But with rrweb, you will have a much larger state contains many DOM things and will be hard to optimize because it was very general.

    chenqingpu
    @apulll
    HI,i want to ask a question. How to save the data when user leave the page
    @TonySchu HI,i want to ask a question. How to save the data when user leave the page
    yz-yu
    @Yuyz0112
    you can listen to the window's before unload event
    chenqingpu
    @apulll
    but if I want to call a async function before unload event, what can i do
    for example, get indexdb data and send it to the server before close the page
    chenqingpu
    @apulll
    @Yuyz0112
    yz-yu
    @Yuyz0112
    I think there is not too much you can do.
    You can use the beacon API to send data, but it has a size limitation.
    Or you can use a sync AJAX but it will block the unload.
    BTW the async API of indexdb can not be hacked.
    chenqingpu
    @apulll
    so , I can not to do anything
    yz-yu
    @Yuyz0112
    maybe send data in a smaller interval will be a better strategy?
    not sure how does others sovle this.
    Grohs Fabian
    @grohsfabian_twitter
    Hey @Yuyz0112, first of all congratulations for the great app you've made here! I was super curious and started doing some small tests and it works great and easy to get going. The one thing I have concerns about that I wanted to ask if you know is: Just by sitting and scrolling a bit and clicking on a single page for 30-50 seconds the recorded events were 2.5+mb's which could easily result in 100+ mb's per visitor and easily go into gigs of data. Just wanted to ask, do you know any way of minimizing or compressing the data and the best way to store it so that it does not take this much space?
    yz-yu
    @Yuyz0112

    Hi @grohsfabian_twitter
    Is the situation of “100+ mb per user” actually happens? Or just an estimation based on the testing?
    rrweb use an incremental op-log data structure, which contains a relative big full snapshot and many small incremental op-logs. As the time of recording increase, the size of events should increase slowly.

    But there are also some ways to increase the size of events, such as:

    1. Disable the inline CSS option if you are sure the remote stylesheet will not change.
    2. Block some DOM which log many events, like animation elements.
    3. Use some compression algorithm like gzip to compress the data.

    It would be helpful if you can share your events for a further analyze.

    Grohs Fabian
    @grohsfabian_twitter
    Thank you for such a fast response on this! It did not actually happen, it was just a calculation based on testing. I was considering the fact that 1 page could generate 2+mbs of data for each page and considering that a user can visit multiple pages in one or more sessions, then each visitor COULD have for just one session a pretty large amount of data if they navigate at least a few pages. Hope you understand what I am referring to. I was looking into the event where the body html /css is saved, to be somehow compressed down so it can be saved compressed in a database or a file for example and when needed to be decompressed
    But again, thank you for your quick response on this, right now I was looking at gzip to compress the data and this might be an ideal solution but yeah, just testing and playing with it as of now ^_^
    Javith
    @aaqibjavith
    @Yuyz0112 I recorded events and send it to our server for every 10 seconds. We will store 10 seconds events as one record in our db. While replaying, we will get all events related to one session(we get events in asc order), we will concat events and give those events to rrplayer. It works fine for 30 seconds of events. For more than 1m events, I am getting this error https://gist.github.com/aaqibjavith/abe2920dded20cee094ef60b13eab618 Could you please help me to resolve this issue.
    yz-yu
    @Yuyz0112
    @aaqibjavith
    You can try to sort the concat events by timestamp to make sure the order is right.
    If the problem keeps, you could send the events to me for debugging.
    Javith
    @aaqibjavith
    @Yuyz0112 Thanks. I will try and let you know.
    Javith
    @aaqibjavith
    @Yuyz0112 I installed recorder in my app. Recorder send event even if user is idle. Is it possible to not sending data?
    Grohs Fabian
    @grohsfabian_twitter

    Hey there @Yuyz0112

    After some more testing I see some more problems / things that can be improved and I hope I do not intrude when mentioning them:

    1. rrweb-player does auto play in some cases even though autoplay is false
    2. rrweb-player is not responsive ( not a big deal )
    3. Similar to @aaqibjavith I get those errors from time to time and I am sending the events to the database every few seconds + on click + on form submissions, I would have to check this more in depth to see when is happening more specifically
    4. The most annoying one is when trying to replay, the player with the iframe is making the browser show the "load" sign / animation infinitely in my case and you can see this happening on rrweb.io that after the page has been loaded fully, it still shows the loading icon and if you look on chrome, it shows "Waiting for github.io" and its coming from the iframe for the replayer
    khaled elrifaay
    @khaled-developer

    Hello,
    I tried to install rrweb. I can record it and I can replay the events (no errors).
    But the screen of the replay is just empty. The content of the homepage, where I recorded the events, is not showing.

    My events look like this:
    {"type":3,"data":{"source":1,"positions":[{"x":984,"y":720,"id":528,"timeOffset":0}]},"timestamp":1571996501626} {"type":3,"data":{"source":3,"id":1,"x":0,"y":1},"timestamp":1571996501626} {"type":3,"data":{"source":0,"texts":[],"attributes":[],"removes":[{"parentId":457,"id":461}],"adds":[]},"timestamp":1571996501727} {"type":3,"data":{"source":3,"id":1,"x":0,"y":300},"timestamp":1571996501727}

    yz-yu
    @Yuyz0112

    hi @khaled-developer
    Looks like your events missing some important event.

    How did you store your events? If you are sending events to a backend, could you check if there is a limitation on the request body size?

    Javith
    @aaqibjavith
    @khaled-developer I also faced the same issue, increased body size to 10MB both in nginx and in express body parser(node.js backend). Then it works.
    @Yuyz0112 Do you have any idea of how to draw heatmap based on events data?
    khaled elrifaay
    @khaled-developer
    rrweb.js:907 Blocked script execution in 'http://localhost:8100/' because the document's frame is sandboxed and the 'allow-scripts' permission is not set. where i should use iframe are there any good docs for using rrweb ?
    matthiasg
    @matthiasg
    I would like to monitor a web application. The initial state can be different based on login time and user. Do I correctly assume that I have to start by taking a snapshot and then start recording the events ? Later I would rebuild the snapshot and re-run the events ? I am not yet sure how the snapshotting plays into this since it is not referred to in the intial rrweb guide
    matthiasg
    @matthiasg
    Ah looking at the first event I see the first event is a snapshot
    Yan Chen
    @chensivan
    @Yuyz0112 just wanna say, great tool, i'm using it for my research project now, and it works like a charm
    bingjie3216
    @bingjie3216
    any database recommendation to store the records?
    gimme4free
    @gimme4free
    I'm watching my recording in repl. This is really interesting stuff. Is there any way to edit text inputs and other fields on the screen in the recording?
    Nikita Kogut
    @MrOnlineCoder
    Hi, rrweb is very cool, but the only problem I currently encounter is the events size. I store my rrweb events in MongoDB, and my documents reach about 400 KB in size, and I have about 100 sessions per day, which will start taking too much disk data very soon. So I am asking: did anyone succeed in compressing them? (preferably in MongoDB context)
    gimme4free
    @gimme4free
    @MrOnlineCoder How did you store it in Mongodb?
    Nikita Kogut
    @MrOnlineCoder
    As array of objects: {type: Number, data: Mixed, timestamp: Number}
    Nikita Kogut
    @MrOnlineCoder
    Okay, so I came with that solution: recorded events are sent to server in "slices" (basically setInterval on client side). Each slice is then compressed with zlib, and written to database. When I need to replay the session, each slice is decompressed, and they are concatenated into single array
    But I don't know whether it's best solution or not
    yz-yu
    @Yuyz0112
    I have some plan of optimizing the size of events which was described in this issue:rrweb-io/rrweb#151
    Since I'm having a lot of company works in this month, the development may start in weeks later. Any feedback/feature-requests are welcomed in the process.
    Praneet Nadkar
    @praneetnadkar
    Hello experts, I have a quick question. Can we track the interactions, like the play pause etc, inside an iFrame(like an embedded youtube iframe) or a video tag. Or can we record the interactions where a webpage/website is loaded in an iframe on the browser
    nwoodhouse
    @nwoodhouse
    Hi folks :-) Started experimenting with the project and knocked up a sample project. Thought that it was only polite to say a huge thanks the project authors and contributors :-).
    Appreciate your work -- i look forward to being able to contribute back :-)