[Bug]: Changes in the canvas within the Shadow DOM cannot be recorded
Libra-Lei opened this issue · comments
Preflight Checklist
- 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
Version
v2.0.0-alpha.4
Expected Behavior
Changes in the canvas within the Shadow DOM should be recorded (for example, changes in chart content display after the initialization of echarts charts).
Actual Behavior
Currently, only the initial snapshot has been recorded, and subsequent changes to the canvas have not been captured.
Steps to Reproduce
Here is a test case:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>
RECORD TEST
</title>
<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 type="text/javascript"
src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/echarts.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<echarts-container id="echartsElement" style="height: 500px; width: 800px;"></echarts-container>
<div id="player"></div>
<button id="start">START</button>
<button id="stop">STOP</button>
<script type="text/javascript">
class EChartsContainer extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
const container = document.createElement('div');
container.style.height = '500px';
container.style.width = '100%';
shadow.appendChild(container);
const myChart = echarts.init(container, null, {
renderer: 'canvas',
useDirtyRect: false
});
const option = {
title: {
text: 'Stacked Line'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
}
]
};
myChart.setOption(option);
window.addEventListener('resize', () => myChart.resize());
}
}
customElements.define('echarts-container', EChartsContainer);
</script>
<script type="text/javascript">
let events = [];
let stopRecorder;
const startRecord = () => {
events = [];
stopRecorder = rrweb.record({
emit: (event) => {
events.push(event);
},
recordCanvas: true,
inlineImages: true,
blockClass: /.*feedback-recorder.*/,
slimDOMOptions: {
script: true,
comment: true,
headFavicon: true,
headWhitespace: true,
headMetaDescKeywords: true,
headMetaSocial: true,
headMetaRobots: true,
headMetaHttpEquiv: true,
headMetaAuthorship: true,
headMetaVerification: true
},
sampling: {
scroll: 1500,
mousemove: true,
mouseInteraction: {
MouseUp: true,
MouseDown: true,
Click: true,
ContextMenu: false,
DblClick: false,
Focus: true,
Blur: true,
TouchStart: false,
TouchEnd: false
},
media: 1000,
input: 'last',
canvas: 15
},
dataURLOptions: {
type: 'image/webp',
quality: 0.6
}
});
};
document.getElementById('start').addEventListener('click', () => {
startRecord()
})
document.getElementById('stop').addEventListener('click', () => {
stopRecorder();
console.log('evts:', events)
})
</script>
</body>
</html>
Testcase Gist URL
No response
Additional Information
No response
It appears that the issue was caused by the CanvasManager's method for retrieving canvas elements not correctly accessing the canvas within the shadow DOM. After modifying the getCanvas method, I was able to resolve this problem.
const getCanvas = () => {
const matchedCanvas = [];
const searchCanvas = (root) => {
root.querySelectorAll('canvas').forEach((canvas) => {
if (!isBlocked(canvas, blockClass, blockSelector, true)) {
matchedCanvas.push(canvas);
}
});
root.querySelectorAll('*').forEach((elem) => {
if (elem.shadowRoot) {
searchCanvas(elem.shadowRoot);
}
});
};
searchCanvas(win.document);
return matchedCanvas;
};
```