Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug]: Changes in the canvas within the Shadow DOM cannot be recorded #1412

Open
1 task done
Libra-Lei opened this issue Feb 19, 2024 · 1 comment · May be fixed by #1428
Open
1 task done

[Bug]: Changes in the canvas within the Shadow DOM cannot be recorded #1412

Libra-Lei opened this issue Feb 19, 2024 · 1 comment · May be fixed by #1428
Labels
bug Something isn't working

Comments

@Libra-Lei
Copy link

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
@Libra-Lei Libra-Lei added the bug Something isn't working label Feb 19, 2024
@Libra-Lei
Copy link
Author

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;
        };
```

Libra-Lei pushed a commit to Libra-Lei/rrweb that referenced this issue Feb 20, 2024
[rrweb-io#1412] fix Changes in the canvas within the Shadow DOM canno…
51a1b7e 
…t be recorded
@p-mazhnik p-mazhnik linked a pull request Mar 15, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

support recording canvas in iframe and shadow dom p-mazhnik/rrweb
1 participant
@Libra-Lei