Missing snapshot and exceptions: setAttribute(), removeChild()

[Kimmax]

Hey there,

we're running into various js exceptions when replaying recordings using the rrweb-player.
The records were taken on rrweb 0.9.6 and played back using rrweb-player 0.5.6.

In total, we have four different kinds of records, that do not work.
The first one plays mouse movement back, but is missing the snapshot. I attached our record code below.
Events (Escaped JSON, can be used using JSON.parse()

The second throws the following exception at the 02:03 mark (a page change):

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js:30:18768
    at Array.forEach (<anonymous>)
    at e.applyMutation (https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js:30:18510)
    at e.applyIncremental (https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js:30:16037)
    at n (https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js:30:12123)
    at https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js:30:12864
    at Object.doAction (https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js:30:4523)
    at i (https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js:16:17061)

Events

The third one throws the following exception at the 00:16 mark (probably a page change):

Uncaught TypeError: i.setAttribute is not a function
    at index.js:30
    at Array.forEach (<anonymous>)
    at e.applyMutation (index.js:30)
    at e.applyIncremental (index.js:30)
    at n (index.js:30)
    at index.js:30
    at Object.doAction (index.js:30)
    at i (index.js:16)

Events

And the last one throws the following exception at the 00:59 mark (and looks a bit wanky in general, is this "normal"?):

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': This node type does not support this method.
    at https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js:30:18768
    at Array.forEach (<anonymous>)
    at e.applyMutation (https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js:30:18510)
    at e.applyIncremental (https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js:30:16037)
    at n (https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js:30:12123)
    at https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js:30:12864
    at Object.doAction (https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js:30:4523)
    at i (https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js:16:17061)

Events

Also, we noticed that a lot of the recordings seem to lag when users scroll (especially mobile users). We were not able to reproduce that, is that a bug in rrweb-player itself?

<script type="text/javascript">
          $(function() {
              window.liveUpdateWS = new WebSocket('wss://xxxx');

              window.liveUpdateWS.onopen = function(e) {
                  rrweb.record({
                      emit(event) {
                          var eventJson = JSON.stringify(event);
                          window.liveUpdateWS.send(eventJson);
                      }
                  });
              };
          });
</script>

[NulSEO]

We're facing the exact same issues. Any idea what is causing this?

[NulSEO]

@Yuyz0112 ?

[Yuyz0112]

@Kimmax Thanks for the detailed report.

For the first one, the record is missing the full-snapshot event, which is an event with type: 2. Please check your transport and storage process to make sure no event is dropped during the procession.

For the 2~4 events, the data looks a little strange. I've also checked the site you are recording, looks like its a multipage website. So my question is are you collecting events from different pages and concat them into one session? Or have done something similar?
Because the data looks like being recorded from different sessions.

[Yuyz0112]

Please let me know if there is any further information.