rrweb
rrweb copied to clipboard
rrweb-io
[Bug]: DOM node not visible in playback
Preflight Checklist
- [X] I have searched the issue tracker for a bug report that matches the one I want to file, without success.
What package is this bug report for?
rrweb-player
Version
v2
Expected Behavior
DOM node should be visible in the playback.
Actual Behavior
DOM node is not visible in playback
Steps to Reproduce
Note that I am using a browser extension to inject the recording snippet and this only happens when the DOM nodes are captured as a mutation. If the page is loaded before recording starts and the nodes are captured as a full snapshot, they will display fine. I have also seen similar behavior with iframes as well.
If you are viewing the debug player, at around 4 seconds you'll see that the sidebar on the right hand side starts to fade away. If you inspect the DOM you'll see that we actually have duplicate nodes ($$('.cDVwyD > div')) that have opposite opacity. However, when the opacity animation completes, the one with opacity:0 is removed from the DOM but the remaining node with opacity:1 is not visible in the player. If you duplicate the DOM node, you'll see that it renders fine.
If you are debugging the events json, index 4 with timestamp = 1679436143262 is when we add the new nodes of interest.
At index 5, we see that node id #717 starts to reduce in opacity to 0, and #1624 increases from 0 to 1.
When animation is finished at index 43:
- #717 is removed from #716
- #1724 is removed from #1626
Testcase Gist URL
https://rrwebdebug.com/play/index.html?url=https%3A%2F%2Fgist.github.com%2Fbillyvg%2Ffb20412bb99cb1dc2add85c571816caf&version=1.0.0-alpha.4&play=on
Additional Information
No response
Experience the same problem using v2.0.0-alpha.0 and later v1.1.3 does not have this problem. Also I do not see the problem capturing events using v1.1.3 but playing them on v2.0.0
I'm not able to reproduce my problem anymore using recent v2.0.0-alpha.7 @billyvg would you be able to try v2.0.0-alpha.7 to make sure it's also working for you?
@billyvg It is caused by the style lost in shadow-root, and the style is even not in the mutation event(timestamp: 1679436143284).
There are probably two reasons to cause that
- bugs in
rrweb record: do not record the mutation of style in shadow-root - bugs when copying Web Components: the style is lost when copying nodes
considering the first reason, I wrote a Web Components Demo, it works for me:
<html>
<body>
<button id="start">start</button>
<button id="stop">stop</button>
<text-msg id="e1"></text-msg>
<template id="textMsg">
<style>
:host {
color: red;
}
</style>
<p>p-tag</p>
</template>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/rrweb.min.js"></script>
<script>
const startBtn = document.getElementById('start');
const stopBtn = document.getElementById('stop');
const e1 = document.getElementById('e1');
const events = [];
startBtn.addEventListener('click', () => {
const e2 = e1.cloneNode(true);
document.body.append(e2);
});
stopBtn.addEventListener('click', () => {
stopRecord();
console.log(events);
});
class TextMsg extends HTMLElement {
constructor() {
super();
let shadow = this.attachShadow({ mode: 'open' });
let templateElem = document.getElementById('textMsg');
let content = templateElem.content.cloneNode(true);
shadow.appendChild(content);
this.append('test')
}
}
window.customElements.define('text-msg', TextMsg);
let stopRecord = rrweb.record({
slimDOMOptions: true,
sampling: {
mouseInteraction: false,
mousemove: false,
},
emit(event) {
events.push(event);
},
});
</script>
</body>
</html>
could you please provide a minimum code to show how such events occurred to help us to locate this bug?
It seems that fullsnapshot works correctly when complete DOM is created. If fullspanshot is created before DOM being completed, mutations incorrectly detect changes and replay is broken
