Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bug in recording events

See original GitHub issue

I am using rrweb.record from this CDN

<script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js"></script>

This is how I record my events

let events = [];
  rrweb.record({
     emit(event) {
        events.push(event);
     }
});

I call this function every 10 sec

    function save() {
        console.log(events)
        events = [];
    }
    setInterval(save, 10 * 1000);

The first record is recorded correctly and displays the dom elements other wise all the other events are corrupted
and data is like this data: {source: 2, type: 0, id: 40, x: 286, y: 126} when I try to play it, it only displays a courser position

this is the whole code page


<html>
<head>
    <!-- <script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/record/rrweb-record.min.js"></script> -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js"></script> -->
    <!-- 
    <script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/record/rrweb-record.min.js"></script> -->

</head>
<script>
    let eventsArray = [];
    let events = [];
    rrweb.record({
        emit(event) {
            events.push(event);
        },
    });

    function save() {
        eventsArray.push(events)
        if (eventsArray.length == 1) {
            //  const replayer = new rrweb.Replayer(events);
            // replayer.play();
        }
        console.log(events)
        events = [];
    }
 
    setInterval(save, 10 * 1000);
</script>

<body>
    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>
</body>
</html>

Issue Analytics

State:
Created 4 years ago
Comments:12 (5 by maintainers)

Top GitHub Comments

2reactions

Yuyz0112commented, Apr 30, 2019

@hayait599 Okay, I think I catch your point.

It looks like you are trying to do the following things?

store emitted event in an array
save the array every 10 seconds and then empty the array
try to replay every 10 seconds events separately

The third step will not work because rrweb store event as full snapshot and incremental events, it works like a chain. So you need to concat all the events into one array before replay.

BTW, if you are wishing to have some feature like only keep the last 10 seconds events, you can try this config.

0reactions

mukeshsalaria01commented, Jul 20, 2020

@hayait599 @Yuyz0112 Do you have an end to end working example of this?

I need the table structure you are using? I also need how you are merging different events to play a big video.

I want to merge every 10-second event and play up to 5 minutes of video. Is it possible? Also, do you how we will differentiate if it’s a new session or old while merging the events?