javascript - RRWEB 读取记录的事件不起作用
问题描述
我正在尝试使用开源工具RRWEB保存浏览器用户活动
我能够保存工具生成的事件（记录）。我使用的代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Recorder</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rrweb@1.0.3/dist/rrweb.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/rrweb@1.0.3/dist/record/rrweb-record.js"></script>
<script>
let events = [];
rrwebRecord({
emit(event) {
// push event into the events array
events.push(event);
}
});
// this function will send events to the backend and reset the events array
function save() {
const body = JSON.stringify({
events: events
});
events = [];
fetch('recorder.php', {
mode: 'no-cors',
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body
});
}
// save events every 5 seconds
setInterval(save, 5 * 1000);
</script>
</head>
<body>
<div>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
控制台显示以下发送到我的后端脚本的对象：
{"events":[{"type":0,"data":{},"timestamp":1630354988708},{"type":1,"data":{},"timestamp":1630354988711},{"type":4,"data":{"href":"https://track.mobiuslogistics.biz/","width":741,"height":615},"timestamp":1630354988712},{"type":2,"data":{"node":{"type":0,"childNodes":[{"type":1,"name":"html","publicId":"","systemId":"","id":2},{"type":5,"textContent":"\nTo change this license header, choose License Headers in Project Properties.\nTo change this template file, choose Tools | Templates\nand open the template in the editor.\n","id":3},{"type":2,"tagName":"html","attributes":{},"childNodes":[{"type":2,"tagName":"head","attributes":{},"childNodes":[{"type":3,"textContent":"\n ","id":6},{"type":2,"tagName":"title","attributes":{},"childNodes":[{"type":3,"textContent":"Recorder","id":8}],"id":7},{"type":3,"textContent":"\n ","id":9},{"type":2,"tagName":"meta","attributes":{"charset":"UTF-8"},"childNodes":[],"id":10},{"type":3,"textContent":"\n ","id":11},{"type":2,"tagName":"meta","attributes":{"name":"viewport","content":"width=device-width, initial-scale=1.0"},"childNodes":[],"id":12},{"type":3,"textContent":"\n ","id":13},{"type":2,"tagName":"link","attributes":{"_cssText":".replayer-wrapper { position: relative; }.replayer-mouse { position: absolute; width: 20px; height: 20px; transition: left 0.05s linear 0s, top 0.05s linear 0s; background-size: contain; background-position: 50% center; background-repeat: no-repeat; background-image: url(\"data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjMwMCIgd2lkdGg9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBkYXRhLW5hbWU9IkxheWVyIDEiIHZpZXdCb3g9IjAgMCA1MCA1MCI+PHBhdGggZD0iTTQ4LjcxIDQyLjkxTDM0LjA4IDI4LjI5IDQ0LjMzIDE4YTEgMSAwIDAwLS4zMy0xLjYxTDIuMzUgMS4wNmExIDEgMCAwMC0xLjI5IDEuMjlMMTYuMzkgNDRhMSAxIDAgMDAxLjY1LjM2bDEwLjI1LTEwLjI4IDE0LjYyIDE0LjYzYTEgMSAwIDAwMS40MSAwbDQuMzgtNC4zOGExIDEgMCAwMC4wMS0xLjQyem0tNS4wOSAzLjY3TDI5IDMyYTEgMSAwIDAwLTEuNDEgMGwtOS44NSA5Ljg1TDMuNjkgMy42OWwzOC4xMiAxNEwzMiAyNy41OEExIDEgMCAwMDMyIDI5bDE0LjU5IDE0LjYyeiIvPjwvc3ZnPg==\"); border-color: transparent; }.replayer-mouse::after { content: \"\"; display: inline-block; width: 20px; height: 20px; background: rgb(73, 80, 246) none repeat scroll 0% 0%; border-radius: 100%; transform: translate(-50%, -50%); opacity: 0.3; }.replayer-mouse.active::after { animation: 0.2s ease-in-out 0s 1 normal none running click; }.replayer-mouse.touch-device { background-image: none; width: 70px; height: 70px; border-radius: 100%; margin-left: -37px; margin-top: -37px; border: 4px solid rgba(73, 80, 246, 0); transition: left 0s linear 0s, top 0s linear 0s, border-color 0.2s ease-in-out 0s; }.replayer-mouse.touch-device.touch-active { border-color: rgb(73, 80, 246); transition: left 0.25s linear 0s, top 0.25s linear 0s, border-color 0.2s ease-in-out 0s; }.replayer-mouse.touch-device::after { opacity: 0; }.replayer-mouse.touch-device.active::after { animation: 0.2s ease-in-out 0s 1 normal none running touch-click; }.replayer-mouse-tail { position: absolute; pointer-events: none; }@keyframes click {\n0% { opacity: 0.3; width: 20px; height: 20px; }\n50% { opacity: 0.5; width: 10px; height: 10px; }\n}@keyframes touch-click {\n0% { opacity: 0; width: 20px; height: 20px; }\n50% { opacity: 0.5; width: 10px; height: 10px; }\n}"},"childNodes":[],"id":14},{"type":3,"textContent":"\n ","id":15},{"type":2,"tagName":"script","attributes":{"src":"https://track.mobiuslogistics.biz/js/rrweb-record.js"},"childNodes":[],"id":16},{"type":3,"textContent":"\n ","id":17},{"type":2,"tagName":"script","attributes":{},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":19}],"id":18},{"type":3,"textContent":"\n ","id":20}],"id":5},{"type":3,"textContent":"\n ","id":21},{"type":2,"tagName":"body","attributes":{},"childNodes":[{"type":3,"textContent":"\n ","id":23},{"type":2,"tagName":"div","attributes":{},"childNodes":[{"type":3,"textContent":"\n ","id":25},{"type":2,"tagName":"form","attributes":{"action":"/action_page.php"},"childNodes":[{"type":3,"textContent":"\n ","id":27},{"type":2,"tagName":"label","attributes":{"for":"fname"},"childNodes":[{"type":3,"textContent":"First name:","id":29}],"id":28},{"type":2,"tagName":"br","attributes":{},"childNodes":[],"id":30},{"type":3,"textContent":"\n ","id":31},{"type":2,"tagName":"input","attributes":{"type":"text","id":"fname","name":"fname","value":"John"},"childNodes":[],"id":32},{"type":2,"tagName":"br","attributes":{},"childNodes":[],"id":33},{"type":3,"textContent":"\n ","id":34},{"type":2,"tagName":"label","attributes":{"for":"lname"},"childNodes":[{"type":3,"textContent":"Last name:","id":36}],"id":35},{"type":2,"tagName":"br","attributes":{},"childNodes":[],"id":37},{"type":3,"textContent":"\n ","id":38},{"type":2,"tagName":"input","attributes":{"type":"text","id":"lname","name":"lname","value":"Doe"},"childNodes":[],"id":39},{"type":2,"tagName":"br","attributes":{},"childNodes":[],"id":40},{"type":2,"tagName":"br","attributes":{},"childNodes":[],"id":41},{"type":3,"textContent":"\n ","id":42},{"type":2,"tagName":"input","attributes":{"type":"submit","value":"Submit"},"childNodes":[],"id":43},{"type":3,"textContent":"\n ","id":44}],"id":26},{"type":3,"textContent":" \n ","id":45}],"id":24},{"type":3,"textContent":"\n \n\n","id":46}],"id":22}],"id":4}],"id":1},"initialOffset":{"left":0,"top":0}},"timestamp":1630354988721},{"type":3,"data":{"source":2,"type":5,"id":1},"timestamp":1630354988723},{"type":3,"data":{"source":1,"positions":[{"x":348,"y":208,"id":4,"timeOffset":0}]},"timestamp":1630354988725},{"type":3,"data":{"source":1,"positions":[{"x":378,"y":169,"id":4,"timeOffset":-415},{"x":372,"y":165,"id":4,"timeOffset":-167},{"x":192,"y":99,"id":26,"timeOffset":-117},{"x":104,"y":74,"id":39,"timeOffset":-67},{"x":95,"y":59,"id":26,"timeOffset":-16}]},"timestamp":1630354989233},{"type":3,"data":{"source":2,"type":1,"id":32,"x":49,"y":28},"timestamp":1630354989556},{"type":3,"data":{"source":2,"type":5,"id":32},"timestamp":1630354989556},{"type":3,"data":{"source":2,"type":0,"id":32,"x":49,"y":28},"timestamp":1630354989642},{"type":3,"data":{"source":2,"type":2,"id":32,"x":49,"y":28},"timestamp":1630354989642},{"type":3,"data":{"source":1,"positions":[{"x":81,"y":46,"id":32,"timeOffset":-469},{"x":53,"y":31,"id":32,"timeOffset":-418},{"x":51,"y":30,"id":32,"timeOffset":-50}]},"timestamp":1630354989735},{"type":3,"data":{"source":1,"positions":[{"x":71,"y":52,"id":35,"timeOffset":-492},{"x":71,"y":54,"id":35,"timeOffset":-222},{"x":68,"y":57,"id":35,"timeOffset":-166}]},"timestamp":1630354990244},{"type":3,"data":{"source":5,"text":"Johno","isChecked":false,"id":32},"timestamp":1630354990507},{"type":3,"data":{"source":5,"text":"Johnoo","isChecked":false,"id":32},"timestamp":1630354990643},{"type":3,"data":{"source":1,"positions":[{"x":67,"y":58,"id":35,"timeOffset":-365},{"x":67,"y":55,"id":35,"timeOffset":-60},{"x":67,"y":73,"id":39,"timeOffset":0}]},"timestamp":1630354990755},{"type":3,"data":{"source":2,"type":1,"id":39,"x":67,"y":82},"timestamp":1630354990939},{"type":3,"data":{"source":2,"type":6,"id":32},"timestamp":1630354990940},{"type":3,"data":{"source":2,"type":5,"id":39},"timestamp":1630354990940},{"type":3,"data":{"source":2,"type":0,"id":39,"x":67,"y":82},"timestamp":1630354991050},{"type":3,"data":{"source":2,"type":2,"id":39,"x":67,"y":82},"timestamp":1630354991051},{"type":3,"data":{"source":5,"text":"Doeo","isChecked":false,"id":39},"timestamp":1630354991107},{"type":3,"data":{"source":5,"text":"Doeoo","isChecked":false,"id":39},"timestamp":1630354991250},{"type":3,"data":{"source":1,"positions":[{"x":67,"y":81,"id":39,"timeOffset":-438}]},"timestamp":1630354991264},{"type":3,"data":{"source":1,"positions":[{"x":68,"y":82,"id":39,"timeOffset":-489},{"x":126,"y":78,"id":39,"timeOffset":-426},{"x":337,"y":94,"id":26,"timeOffset":-376},{"x":683,"y":171,"id":4,"timeOffset":-325}]},"timestamp":1630354991783}],"timestamp":1630354993684}
{"events":[{"type":3,"data":{"source":1,"positions":[{"x":737,"y":243,"id":4,"timeOffset":0}]},"timestamp":1630354993778},{"type":3,"data":{"source":1,"positions":[{"x":736,"y":243,"id":4,"timeOffset":-237}]},"timestamp":1630354994285},{"type":3,"data":{"source":2,"type":6,"id":39},"timestamp":1630354996225},{"type":3,"data":{"source":2,"type":6,"id":1},"timestamp":1630354996225}],"timestamp":1630354998684}
播放器页面有以下代码：
<!DOCTYPE html>
<html>
<head>
<title>Player</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
var events = [{"events":[
[{"events":[{"type":0,"data":{},"timestamp":1630354988708},{"type":1,"data":{},"timestamp":1630354988711},{"type":4,"data":{"href":"https://track.mobiuslogistics.biz/","width":741,"height":615},"timestamp":1630354988712},{"type":2,"data":{"node":{"type":0,"childNodes":[{"type":1,"name":"html","publicId":"","systemId":"","id":2},{"type":5,"textContent":"\nTo change this license header, choose License Headers in Project Properties.\nTo change this template file, choose Tools | Templates\nand open the template in the editor.\n","id":3},{"type":2,"tagName":"html","attributes":{},"childNodes":[{"type":2,"tagName":"head","attributes":{},"childNodes":[{"type":3,"textContent":"\n ","id":6},{"type":2,"tagName":"title","attributes":{},"childNodes":[{"type":3,"textContent":"Recorder","id":8}],"id":7},{"type":3,"textContent":"\n ","id":9},{"type":2,"tagName":"meta","attributes":{"charset":"UTF-8"},"childNodes":[],"id":10},{"type":3,"textContent":"\n ","id":11},{"type":2,"tagName":"meta","attributes":{"name":"viewport","content":"width=device-width, initial-scale=1.0"},"childNodes":[],"id":12},{"type":3,"textContent":"\n ","id":13},{"type":2,"tagName":"link","attributes":{"_cssText":".replayer-wrapper { position: relative; }.replayer-mouse { position: absolute; width: 20px; height: 20px; transition: left 0.05s linear 0s, top 0.05s linear 0s; background-size: contain; background-position: 50% center; background-repeat: no-repeat; background-image: url(\"data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjMwMCIgd2lkdGg9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBkYXRhLW5hbWU9IkxheWVyIDEiIHZpZXdCb3g9IjAgMCA1MCA1MCI+PHBhdGggZD0iTTQ4LjcxIDQyLjkxTDM0LjA4IDI4LjI5IDQ0LjMzIDE4YTEgMSAwIDAwLS4zMy0xLjYxTDIuMzUgMS4wNmExIDEgMCAwMC0xLjI5IDEuMjlMMTYuMzkgNDRhMSAxIDAgMDAxLjY1LjM2bDEwLjI1LTEwLjI4IDE0LjYyIDE0LjYzYTEgMSAwIDAwMS40MSAwbDQuMzgtNC4zOGExIDEgMCAwMC4wMS0xLjQyem0tNS4wOSAzLjY3TDI5IDMyYTEgMSAwIDAwLTEuNDEgMGwtOS44NSA5Ljg1TDMuNjkgMy42OWwzOC4xMiAxNEwzMiAyNy41OEExIDEgMCAwMDMyIDI5bDE0LjU5IDE0LjYyeiIvPjwvc3ZnPg==\"); border-color: transparent; }.replayer-mouse::after { content: \"\"; display: inline-block; width: 20px; height: 20px; background: rgb(73, 80, 246) none repeat scroll 0% 0%; border-radius: 100%; transform: translate(-50%, -50%); opacity: 0.3; }.replayer-mouse.active::after { animation: 0.2s ease-in-out 0s 1 normal none running click; }.replayer-mouse.touch-device { background-image: none; width: 70px; height: 70px; border-radius: 100%; margin-left: -37px; margin-top: -37px; border: 4px solid rgba(73, 80, 246, 0); transition: left 0s linear 0s, top 0s linear 0s, border-color 0.2s ease-in-out 0s; }.replayer-mouse.touch-device.touch-active { border-color: rgb(73, 80, 246); transition: left 0.25s linear 0s, top 0.25s linear 0s, border-color 0.2s ease-in-out 0s; }.replayer-mouse.touch-device::after { opacity: 0; }.replayer-mouse.touch-device.active::after { animation: 0.2s ease-in-out 0s 1 normal none running touch-click; }.replayer-mouse-tail { position: absolute; pointer-events: none; }@keyframes click {\n0% { opacity: 0.3; width: 20px; height: 20px; }\n50% { opacity: 0.5; width: 10px; height: 10px; }\n}@keyframes touch-click {\n0% { opacity: 0; width: 20px; height: 20px; }\n50% { opacity: 0.5; width: 10px; height: 10px; }\n}"},"childNodes":[],"id":14},{"type":3,"textContent":"\n ","id":15},{"type":2,"tagName":"script","attributes":{"src":"https://track.mobiuslogistics.biz/js/rrweb-record.js"},"childNodes":[],"id":16},{"type":3,"textContent":"\n ","id":17},{"type":2,"tagName":"script","attributes":{},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":19}],"id":18},{"type":3,"textContent":"\n ","id":20}],"id":5},{"type":3,"textContent":"\n ","id":21},{"type":2,"tagName":"body","attributes":{},"childNodes":[{"type":3,"textContent":"\n ","id":23},{"type":2,"tagName":"div","attributes":{},"childNodes":[{"type":3,"textContent":"\n ","id":25},{"type":2,"tagName":"form","attributes":{"action":"/action_page.php"},"childNodes":[{"type":3,"textContent":"\n ","id":27},{"type":2,"tagName":"label","attributes":{"for":"fname"},"childNodes":[{"type":3,"textContent":"First name:","id":29}],"id":28},{"type":2,"tagName":"br","attributes":{},"childNodes":[],"id":30},{"type":3,"textContent":"\n ","id":31},{"type":2,"tagName":"input","attributes":{"type":"text","id":"fname","name":"fname","value":"John"},"childNodes":[],"id":32},{"type":2,"tagName":"br","attributes":{},"childNodes":[],"id":33},{"type":3,"textContent":"\n ","id":34},{"type":2,"tagName":"label","attributes":{"for":"lname"},"childNodes":[{"type":3,"textContent":"Last name:","id":36}],"id":35},{"type":2,"tagName":"br","attributes":{},"childNodes":[],"id":37},{"type":3,"textContent":"\n ","id":38},{"type":2,"tagName":"input","attributes":{"type":"text","id":"lname","name":"lname","value":"Doe"},"childNodes":[],"id":39},{"type":2,"tagName":"br","attributes":{},"childNodes":[],"id":40},{"type":2,"tagName":"br","attributes":{},"childNodes":[],"id":41},{"type":3,"textContent":"\n ","id":42},{"type":2,"tagName":"input","attributes":{"type":"submit","value":"Submit"},"childNodes":[],"id":43},{"type":3,"textContent":"\n ","id":44}],"id":26},{"type":3,"textContent":" \n ","id":45}],"id":24},{"type":3,"textContent":"\n \n\n","id":46}],"id":22}],"id":4}],"id":1},"initialOffset":{"left":0,"top":0}},"timestamp":1630354988721},{"type":3,"data":{"source":2,"type":5,"id":1},"timestamp":1630354988723},{"type":3,"data":{"source":1,"positions":[{"x":348,"y":208,"id":4,"timeOffset":0}]},"timestamp":1630354988725},{"type":3,"data":{"source":1,"positions":[{"x":378,"y":169,"id":4,"timeOffset":-415},{"x":372,"y":165,"id":4,"timeOffset":-167},{"x":192,"y":99,"id":26,"timeOffset":-117},{"x":104,"y":74,"id":39,"timeOffset":-67},{"x":95,"y":59,"id":26,"timeOffset":-16}]},"timestamp":1630354989233},{"type":3,"data":{"source":2,"type":1,"id":32,"x":49,"y":28},"timestamp":1630354989556},{"type":3,"data":{"source":2,"type":5,"id":32},"timestamp":1630354989556},{"type":3,"data":{"source":2,"type":0,"id":32,"x":49,"y":28},"timestamp":1630354989642},{"type":3,"data":{"source":2,"type":2,"id":32,"x":49,"y":28},"timestamp":1630354989642},{"type":3,"data":{"source":1,"positions":[{"x":81,"y":46,"id":32,"timeOffset":-469},{"x":53,"y":31,"id":32,"timeOffset":-418},{"x":51,"y":30,"id":32,"timeOffset":-50}]},"timestamp":1630354989735},{"type":3,"data":{"source":1,"positions":[{"x":71,"y":52,"id":35,"timeOffset":-492},{"x":71,"y":54,"id":35,"timeOffset":-222},{"x":68,"y":57,"id":35,"timeOffset":-166}]},"timestamp":1630354990244},{"type":3,"data":{"source":5,"text":"Johno","isChecked":false,"id":32},"timestamp":1630354990507},{"type":3,"data":{"source":5,"text":"Johnoo","isChecked":false,"id":32},"timestamp":1630354990643},{"type":3,"data":{"source":1,"positions":[{"x":67,"y":58,"id":35,"timeOffset":-365},{"x":67,"y":55,"id":35,"timeOffset":-60},{"x":67,"y":73,"id":39,"timeOffset":0}]},"timestamp":1630354990755},{"type":3,"data":{"source":2,"type":1,"id":39,"x":67,"y":82},"timestamp":1630354990939},{"type":3,"data":{"source":2,"type":6,"id":32},"timestamp":1630354990940},{"type":3,"data":{"source":2,"type":5,"id":39},"timestamp":1630354990940},{"type":3,"data":{"source":2,"type":0,"id":39,"x":67,"y":82},"timestamp":1630354991050},{"type":3,"data":{"source":2,"type":2,"id":39,"x":67,"y":82},"timestamp":1630354991051},{"type":3,"data":{"source":5,"text":"Doeo","isChecked":false,"id":39},"timestamp":1630354991107},{"type":3,"data":{"source":5,"text":"Doeoo","isChecked":false,"id":39},"timestamp":1630354991250},{"type":3,"data":{"source":1,"positions":[{"x":67,"y":81,"id":39,"timeOffset":-438}]},"timestamp":1630354991264},{"type":3,"data":{"source":1,"positions":[{"x":68,"y":82,"id":39,"timeOffset":-489},{"x":126,"y":78,"id":39,"timeOffset":-426},{"x":337,"y":94,"id":26,"timeOffset":-376},{"x":683,"y":171,"id":4,"timeOffset":-325}]},"timestamp":1630354991783}],"timestamp":1630354993684}],
[{"type":3,"data":{"source":2,"type":6,"id":1},"timestamp":1630347964190}]
]}];
const replayer = new rrweb.Replayer(events);
replayer.play();
</script>
</head>
<body>
<div id='player'></div>
</body>
</html>
我尝试了我能想到的一切让它工作，但我得到了
Uncaught Error: Replayer need at least 2 events.
o index.ts:138
<anonymous> player.php:8327
任何帮助将不胜感激。谢谢。
解决方案
推荐阅读
- jquery - 如何在ckeditor中使用jQuery通过按钮单击粘贴后更改整个文本的格式
- python - 在不使用循环的情况下迭代图像大小？
- javascript - 我想在 laravel PHP 中自动调用一个函数而不刷新页面
- debugging - Optaplanner：如何使用 Logback 进行调试？
- android - Android Google AdMob：无法解析事件 FE 预检响应但我已正确指示发布者 ID
- reactjs - 如何检查 redux 存储是否已更新，然后在 react js 中执行逻辑
- entity-framework - StructureMap 的 ISagaDbContextFactory 实现
- java - 在用于谷歌云存储的 java 中的 getServingUrl 方法中获取异常
- r - R diagrammeR：如何以动态方式制作集群？
- c# - 从 github 下载的 Angular 项目在我的 Windows PC 上开始，但在我的 Mac 上无法运行（空白页）