Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Natnael Getenew
    @Natnael123
    new here
    Jon Perl
    @jperl
    @Yuyz0112 I just wanted to apologize and give an update for rrweb-io/rrweb#124. I am finally going to be getting to that next week
    I have been busy setting up https://github.com/qawolf/qawolf which now includes an rrweb recording per test in the artifacts (you can see it by downloading the artifacts here https://github.com/qawolf/examples/commit/977e6b3d7ebd149d4dce597045c15a174231b8de/checks?check_suite_id=296939706)
    I completely agree with you about how rrweb can be great for helping w/ e2e tests (debugging etc) rrweb-io/rrweb#27
    What I would love to add to rrweb, after fixing the css-in-js, is to capture the console logs and view them in the replayer
    Jon Perl
    @jperl
    Do you think including console logs in rrweb would be valuable?
    yz-yu
    @Yuyz0112
    Sure, console logs can b a new kind of incremental event.
    daskhatri
    @daskhatri
    Any idea on how to follow the Guide for installing rrweb? After reading and putting efforts to install, I am feeling there is some specific pattern or certain knowledge that I am missing to follow this guide. Any help?
    yz-yu
    @Yuyz0112
    @daskhatri how about illustrate the things you want to do? Then I can write some demo for you.
    daskhatri
    @daskhatri
    @Yuyz0112 I need to create a demo that can demonstrate the rrweb.io. In other words to present the proof of concept.
    @Yuyz0112 as till now , I don't know whats the before & after rrweb.io. All I know is this rrweb.io website and guide for installation.
    bingjie3216
    @bingjie3216
    Hi, @Yuyz0112 do we have any plan to add the heatmap feature?
    bingjie3216
    @bingjie3216
    Also, met the same error even with the latest version: index.ts:177 Uncaught TypeError: Cannot read property 'appendChild' of null
    at t.setupDom (index.ts:177)
    at new t (index.ts:82)
    at replay.html:18
    bingjie3216
    @bingjie3216
    nvm, found the issue
    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 ?