Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Som Shekhar
    @shekharsom_twitter

    OK, why don't you re-assing the events array, and then re-play the same instance from the first timestamp!

    yes. tried doing that... for some reason that didn't work... but finally, moved to setting it to null.

    Yousef Alaqra
    @yousefalaqra
    i think that is it, could you please tell more about the resizing? @shekharsom_twitter
    Som Shekhar
    @shekharsom_twitter
    now, i am stuck at a different issue altogether!!
    Yousef Alaqra
    @yousefalaqra
    And what's it??
    Som Shekhar
    @shekharsom_twitter
    if the recording is long, it's a long array. now, i need to save and it and retrieve it to play.
    using simple ajax doesn't work well because if it's a huge object, it takes time to save or download to play.
    i wish to be able to use some kind of streaming to save and retrieve the array. figuring out how to do that with the player.

    i think that is it, could you please tell more about the resizing? @shekharsom_twitter

    I am using width: 100%; height: 100%; transform:scale(0.8); in CSS for the player wrapper. This reduces the size well.

    but it's not fit well.
    Yousef Alaqra
    @yousefalaqra
    So you mean when the array is to huge, the Replayer won't be able to play at once? you'll need to attach the events to the player seperatly?
    transform:scale(0.8) why do you scale it by 0.8?
    Som Shekhar
    @shekharsom_twitter
    @yousefalaqra the time to upload and download is very long. I would like to start playing as soon as array is getting downloaded like a video
    @yousefalaqra scaling 0.8 made it fit to my component
    Yousef Alaqra
    @yousefalaqra

    @yousefalaqra the time to upload and download is very long. I would like to start playing as soon as array is getting downloaded like a video

    I thnk you can do that

    Som Shekhar
    @shekharsom_twitter

    @yousefalaqra the time to upload and download is very long. I would like to start playing as soon as array is getting downloaded like a video

    I thnk you can do that

    yes. trying to figure out how to achieve that.

    vincenzocasu
    @vincenzocasu

    Hi everyone,
    what is the best way to record events and replay them, considering i use ajax and php?

    I currently send an ajax request during registration to php page, which appends the contents of the events of the last 10 seconds to the json file. During registration the page is ok, and there are no particular anomalies.
    The json at the end of the session is about 200 / 300MB, but today it also reached 700MB ...

    In the replay phase, I don't know how to read the events a little at a time and load the next ones dynamically without having to load all the internal JSON when loading the page.

    I also noticed that the page is always the same, but the length of the json for the same duration in minutes of the session varies from 50MB to 600MB, why? Can it depend on the browser version used?

    Yousef Alaqra
    @yousefalaqra
    @shekharsom_twitter
    If you look at Hotjar when they play the record, they don't load all the events one time, they use several ajax requests during the replay to get the events. For exalmple: at the intial state they send ajasx request to get first x events, then they load second x events ... etc
    @vincenzocasu Based on my experience on rrweb, I think the best way is to depend on real-time communication instead of using ajax requests.
    You can achieve that by using WebSockets, all you need is to open 1 connection between the client and the server and kepp send events in realtime.
    I hope that helped you.
    vincenzocasu
    @vincenzocasu
    hi @yousefalaqra and thank you for your reply! Why websocket is best way for you?
    Som Shekhar
    @shekharsom_twitter
    @yousefalaqra web socket is not necessary. These days http2 is good enough too
    vincenzocasu
    @vincenzocasu
    right! in fact the problem is not the generation of the json file.
    But its reading, as some sessions take up even 800MB
    Server goes down... :(
    In your opinion, should I create a json file for each request, rather than queuing all requests in one file?
    I do not understand what is the best implementation to make recordings with rrweb and then make them available without downing the server ...
    Yousef Alaqra
    @yousefalaqra
    @vincenzocasu because I'll be able to record all the events without a heavy load on the client.
    @shekharsom_twitter Webscoekt is based on HTTP as well, but I'm interested to know what do you mean by http2 in comparison with WebSockets?

    right! in fact the problem is not the generation of the json file.
    But its reading, as some sessions take up even 800MB

    Why do you read all the JSON file at once? you can load batches

    Som Shekhar
    @shekharsom_twitter
    @yousefalaqra http2 allows multiple parallel connections and without the overheads of typical Ajax.
    vincenzocasu
    @vincenzocasu
    How can i load json file in batches?
    at moment I have this code: in the player page:
    <?php
    
    /**** other previous code not relevant ***/
    
    $json = file_get_contents('records/'.$file_name, false, stream_context_create($arrContextOptions));
    $json = str_replace('],[', ',', $json);
    
    ?>
    
    const data = [{ events: <?php echo $json; ?> }];
    
    function player(data){
      const events = data.reduce((prev, cur) => prev.concat(cur.events), []);
    
      new rrwebPlayer({
        target: document.body,
        props: {
          events
        },
      });
    }
    
    player(data);
    loading 700MB of json data it's crazy :)
    Som Shekhar
    @shekharsom_twitter
    @vincenzocasu this is where I am stuck too. How to get push data to player in batches so that it plays consistently
    Yousef Alaqra
    @yousefalaqra

    I've not implemented that yer, I'm going to do so in the near future. But I think the way to do this is very similar to the pagination principle. So in pagination, we don't load all records from the server at once, instead, we do load 10 records per request or x records per request based on parameter. .
    in rrweb, you can the same as well, let's say you have a record that includes 1000 events, first things first you need to sort the events based on the timestamp, just in case. Second thing, you need to divide the whole record (1000 events) into multiple records, let's for example 10 records each one has 100 events (patch), 3rd, since you can know the total amount of time (in seconds) of the all record, and also, you know when each patch start/end time, with some calculation you would be able to know when to load a specifc patch.

    I;m going to make POC very soon.

    vincenzocasu
    @vincenzocasu
    @yousefalaqra do you have some code to share with us?
    Som Shekhar
    @shekharsom_twitter
    How to make player play chunk 1 followed by chunk 2 without break?
    Yousef Alaqra
    @yousefalaqra
    @shekharsom_twitter I think this is the key challenge, but i think there's a way to do it
    @vincenzocasu i'll work on that very soon, i'll share the code with you once i finish.
    vincenzocasu
    @vincenzocasu
    @yousefalaqra thanks!
    Som Shekhar
    @shekharsom_twitter

    @shekharsom_twitter I think this is the key challenge, but i think there's a way to do it

    That's where I got stuck.

    Som Shekhar
    @shekharsom_twitter
    @yousefalaqra any updates?
    John Eletto
    @johnanthonyeletto
    Hey, does anyone have a working example of recording the console. I'm using recordLog: true, but when I pass the events to rrwebPlayer (rrweb-player), I don't get any console results.
    rrwebStopRecording = rrwebRecord({
          emit(event) {
            chrome.runtime.sendMessage({ event, type: 'event' }, () => {
            });
          },
          recordLog: true,
          packFn: rrwebPack,
          sampling: {
            // do not record mouse movement
            mousemove: 250,
            // do not record mouse interaction
            mouseInteraction: 250,
            // set the interval of scrolling event
            scroll: 250, // do not emit twice in 150ms
          },
        });
     this.player = new rrwebPlayer({
            target: this.$refs.playerTarget,
            props: {
              events: events,
            },
            unpackFn: rrwebUnpack,
          });
    John Eletto
    @johnanthonyeletto
    I figured it out if anyone else is having the same issue with chrome extensions. It's because the content script in chrome extension does not have access to window. I solved this problem by injecting a script into the dom which then communicates with the content script.
    Som Shekhar
    @shekharsom_twitter

    Ref There is a way to add events to the player.

    const replayer = new rrweb.Replayer(events)
    
    for (const newEvent of newEvents) {
      replayer.addEvent(newEvent)
    }

    for future ref.

    Nir
    @nirbd
    Hi,
    Do you consider rrweb production ready for integrating into arbitrary websites or you would trust it only after testing its performance and accuracy on each specific site it is used on?
    Are there known issues which I should know about before considering rrweb?
    rishab0
    @rishab0
    Hello, I want to integrate rrweb.
    i am unable to do
    can anyone help me out ?
    vincenzocasu
    @vincenzocasu

    Ref There is a way to add events to the player.

    const replayer = new rrweb.Replayer(events)
    
    for (const newEvent of newEvents) {
      replayer.addEvent(newEvent)
    }

    for future ref.

    How can I implemet this on a rrwebPlayer instance?

    vincenzocasu
    @vincenzocasu
    const data = [{ events: <?php echo $json; ?> }];
    
    function player(data){
    
      const events = data.reduce((prev, cur) => prev.concat(cur.events), []);
    
      new rrwebPlayer({
        target: document.body, // customizable root element
        props: {
          events
        },
      });
    
    }
    
    player(data);
    At this moment the events are loaded on page init... i want to split the events load into multiple step by ajax request to avoid long page load time... But i really don't know how can i add event to rrwebPlayer instance... someone can share ideas?
    Pari-19
    @Pari-19
    Hi everyone,
    Anyone can help me,
    How to download a recording from collected events or from a player.
    I'm using the latest rrweb library, however I can't find any approach/code to execute that.
    Som Shekhar
    @shekharsom_twitter
    @vincenzocasu get your data in multiple chunks (e.g. array of 10 events each) . In the first chunk, create the player and keep the reference to it. Then when you receive the next chunk (which would be an array) use the method used above.
    vincenzocasu
    @vincenzocasu
    @shekharsom_twitter Hi, that's just what I did... but the player meta was not updated... check this -> https://github.com/rrweb-io/rrweb-player/issues/62#issuecomment-800390694