search

HuolalaTech / page-spy-web

Debug remotely and easily like chrome devtools.
https://www.pagespy.org
MIT License
4.27k stars 257 forks source link

严重bug: 界面中媒体资源为 M3U8 时，回放文件大小剧增 #250

Closed qiushaocloud closed 1 week ago

qiushaocloud commented 1 month ago

Describe the bug

我界面中媒体资源使用 hls.js 播放 m3u8 媒体资源时，出现了回放文件大小剧增，而如果界面中 vconsole 加载了，且在 page-spy 之后实例化则大小不会剧增

  1. m3u8 不加载 vconsole 测试地址：https://www.qiushaocloud.top/common-static/spy-test-demo.html【结果：大小剧增】
  2. m3u8 且在 spy 之后加载 vconsole 测试地址：https://www.qiushaocloud.top/common-static/spy-test-demo.html?vconsole=true【结果：大小正常】

其它 bug

  1. 手动调用 window.$harbor.onOfflineLog('upload') 或 window.$harbor.onOfflineLog('download') 失败时不会触发 promise 失败，而是触发了成功【我的测试：文件大小剧增到一定大小后，调用接口上传会因为文件太大失败，但是 promise 走了成功】
  2. 手动调用 window.$harbor.onOfflineLog('download') 数据还在准备中，没下载成功时，promise 已经返回了成功的回调【试验：文件大小剧增后，调用接口下载，promise 直接返回成功了，但是这时候数据还在准备中，等一段时间后才下载成功】

Steps to reproduce

这是测试 demo 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spy Hls Test Demo</title>
    <!-- 引入 hls.js -->
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/hls.js/1.5.13/hls.js"></script>

    <!-- 引入 PageSpy 插件 -->
    <!-- PageSpy SDK -->
    <script crossorigin="anonymous" src="https://test.jikejishu.com/page-spy/index.min.js"></script>
    <!-- 插件（非必须，但建议使用） -->
    <script crossorigin="anonymous" src="https://test.jikejishu.com/plugin/data-harbor/index.min.js"></script>
    <script crossorigin="anonymous" src="https://test.jikejishu.com/plugin/rrweb/index.min.js"></script>

    <script>
        window.$harbor = new DataHarborPlugin();
        window.$rrweb = new RRWebPlugin();

        [window.$harbor, window.$rrweb].forEach(p => {
          PageSpy.registerPlugin(p)
        })

        window.$pageSpy = new PageSpy();
    </script>

    <script>
        if (new URLSearchParams(window.location.search).get('vconsole') === 'true')
            document.write('\<script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"\>\<\/script\>');
    </script>

    <script>
        if (window.VConsole) {
            new VConsole();
        }
    </script>

    <style>
        #videoPlayer {
            width: 100%;
            max-width: 600px;
        }
        .controls {
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }
        button {
            margin: 0 5px;
        }
    </style>
</head>
<body>
    <h1>HLS 播放器</h1>
    <video id="videoPlayer" controls></video>
    <div class="controls">
        <button id="playButton">播放</button>
        <button id="pauseButton">暂停</button>
        <button id="downloadSpyButton">下载回放</button>
        <button id="uploadSpyButton">上传回放</button>
    </div>

    <script>
    window.onload = function () {
        const videoPlayer = document.getElementById('videoPlayer');
        const playButton = document.getElementById('playButton');
        const pauseButton = document.getElementById('pauseButton');

        const urlParams = new URLSearchParams(window.location.search);
        let playUrl = 'https://wsvideo.aniu.tv/live/aniu/playlist.m3u8';
        // let playUrl = 'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4';
        if (urlParams.get('playUrl')) {
            playUrl = urlParams.get('playUrl');
            playUrl === 'mp4' && (playUrl = 'https://img.qunliao.info/4oEGX68t_9505974551.mp4');
            playUrl === 'm3u8' && (playUrl = 'https://ali-m-l.cztv.com/channels/lantian/channel002/1080p.m3u8');
        }

        console.log('playUrl:', playUrl);
        if (playUrl.indexOf('.m3u8') > -1 && Hls.isSupported()) {
            const hls = new Hls();
            hls.loadSource(playUrl);
            hls.attachMedia(videoPlayer);
            hls.on(Hls.Events.MANIFEST_PARSED, function () {
                console.log('manifest loaded, found ');
                videoPlayer.play();
            });
        } else {
            videoPlayer.src = playUrl;
            videoPlayer.addEventListener('loadedmetadata', function () {
                console.log('loadedmetadata');
                videoPlayer.play();
            });
        }

        playButton.addEventListener('click', () => {
            console.log('play clicked');
            videoPlayer.play();
        });

        pauseButton.addEventListener('click', () => {
            console.log('pause clicked');
            videoPlayer.pause();
        });

        // 下载回放
        const downloadSpyButton = document.getElementById('downloadSpyButton');
        downloadSpyButton.addEventListener('click', () => {
            downloadSpyButton.disabled = true;
            downloadSpyButton.innerHTML = '回放下载中...'
            window.$harbor.onOfflineLog('download')
                .then((res) => {
                    console.info('download spy success:', res);
                    downloadSpyButton.innerHTML = '下载成功';
                })
                .catch((err) => {
                    console.error('download spy error:', err);
                    downloadSpyButton.innerHTML = '下载失败';
                })
                .finally(() => {
                    setTimeout(() => {
                        downloadSpyButton.disabled = false;
                        downloadSpyButton.innerHTML = '下载回放'
                    }, 3000)
                })
        });

        // 上传回放
        const uploadSpyButton = document.getElementById('uploadSpyButton');
        uploadSpyButton.addEventListener('click', () => {
            uploadSpyButton.disabled = true;
            uploadSpyButton.innerHTML = '回放上传中...'
            window.$harbor.onOfflineLog('upload')
                .then((res) => {
                    console.info('upload spy success:', res);
                    uploadSpyButton.innerHTML = '上传成功';
                })
                .catch((err) => {
                    console.error('upload spy error:', err);
                    uploadSpyButton.innerHTML = '上传失败';
                })
                .finally(() => {
                    setTimeout(() => {
                        uploadSpyButton.disabled = false;
                        uploadSpyButton.innerHTML = '上传回放'
                    }, 3000)
                })
        });
    }
    </script>
</body>
</html>

System Info

mac,chrome

Logs

No response

Validations

wqcstrong commented 1 month ago

感谢你的反馈！

首先，这并非是一个 bug。具体原因和差异如下：

所以，日志文件体积的 “剧增” 是因为应用的确产生了很多数据，PageSpy 做的没问题，且表现还不错 😄～

当然我也能理解，在你的应用场景中，你可能更希望过滤掉某些数据、或者修改记录的数据内容。这个功能目前已经在规划中，会尽快在新的版本中发布。

wqcstrong commented 1 week ago

1.9.2 版本可通过 dataProcessor 选项处理，详情可参考：https://www.pagespy.org/#/docs/changelog#v1_9_2 。