播放页面空白一片

[stoneyallen]

问题描述：
A站使用rrweb记录了events并保存到mongo中，之后B站把mongo中的events取出并播放，但只看到了鼠标在移动，背景却是空白一片。

操作步骤：
1.A网站记录events
`let events = [];

rrweb.record({
emit(event) {
events.push(event);
},
});

function save() {
const body = JSON.stringify({ events });
events = [];
fetch('http://YOUR_BACKEND_API', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body,
});
}

setInterval(save, 10 * 1000)`

2.数据保存至mongodb
3.B网站取出数据
fetch('/api/rrweb/replay', { body: JSON.stringify(body), headers: { 'content-type': 'application/json' }, method: 'POST', }).then(response => response.json()).then(res => { if (res.code === 200) { new rrwebPlayer({ target: document.body, // 可以自定义 DOM 元素 data: { events: res.data, }, }); } })
4.页面只看到鼠标，没有其他页面元素

[Yuyz0112]

可以提供一些 events 数据用于 debug 吗？

[stoneyallen]

{"code":200,"msg":"","data":[{"type":3,"data":{"source":1,"positions":[{"x":471,"y":2,"id":130,"timeOffset":0}]},"timestamp":1559181481360},{"type":3,"data":{"source":1,"positions":[{"x":352,"y":8,"id":133,"timeOffset":-448}]},"timestamp":1559181481861},{"type":3,"data":{"source":1,"positions":[{"x":428,"y":2,"id":130,"timeOffset":-17}]},"timestamp":1559181482362},{"type":0,"timestamp":1559181485173},{"type":4,"data":{"href":"http://csp.sheincorp.cn/index.html#/order","width":1920,"height":557},"timestamp":1559181496771},{"type":1,"timestamp":1559181496771},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":105,"attributes":{"class":"ant-menu-item ant-menu-item-active"}}],"removes":[],"adds":[]},"timestamp":1559181497617},{"type":3,"data":{"source":1,"positions":[{"x":24,"y":410,"id":106,"timeOffset":0}]},"timestamp":1559181497622},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":105,"attributes":{"class":"ant-menu-item"}}],"removes":[],"adds":[]},"timestamp":1559181497639},{"type":3,"data":{"source":1,"positions":[{"x":502,"y":546,"id":53,"timeOffset":0}]},"timestamp":1559181498232},{"type":3,"data":{"source":1,"positions":[{"x":677,"y":545,"id":53,"timeOffset":-116}]},"timestamp":1559181498740},{"type":3,"data":{"source":1,"positions":[{"x":882,"y":543,"id":53,"timeOffset":-91}]},"timestamp":1559181499242},{"type":3,"data":{"source":1,"positions":[{"x":456,"y":538,"id":53,"timeOffset":-84}]},"timestamp":1559181499747},{"type":3,"data":{"source":1,"positions":[{"x":919,"y":555,"id":53,"timeOffset":-112}]},"timestamp":1559181500248},{"type":3,"data":{"source":1,"positions":[{"x":410,"y":544,"id":53,"timeOffset":-164}]},"timestamp":1559181500748},{"type":3,"data":{"source":1,"positions":[{"x":336,"y":545,"id":53,"timeOffset":0}]},"timestamp":1559181501327},{"type":3,"data":{"source":1,"positions":[{"x":1091,"y":543,"id":53,"timeOffset":-95}]},"timestamp":1559181501830},{"type":3,"data":{"source":1,"positions":[{"x":491,"y":553,"id":53,"timeOffset":-180}]},"timestamp":1559181502331},{"type":3,"data":{"source":1,"positions":[{"x":1214,"y":546,"id":53,"timeOffset":-213}]},"timestamp":1559181502836},{"type":3,"data":{"source":1,"positions":[{"x":780,"y":6,"id":130,"timeOffset":0}]},"timestamp":1559181946193},{"type":3,"data":{"source":1,"positions":[{"x":794,"y":185,"id":220,"timeOffset":-448},{"x":769,"y":296,"id":254,"timeOffset":-387},{"x":764,"y":332,"id":53,"timeOffset":-329},{"x":751,"y":354,"id":53,"timeOffset":-273},{"x":731,"y":358,"id":53,"timeOffset":-216},{"x":730,"y":358,"id":53,"timeOffset":-96},{"x":723,"y":435,"id":53,"timeOffset":-40}]},"timestamp":1559181946693},{"type":3,"data":{"source":1,"positions":[{"x":715,"y":539,"id":53,"timeOffset":-189},{"x":750,"y":458,"id":53,"timeOffset":-134},{"x":757,"y":440,"id":53,"timeOffset":-76},{"x":757,"y":440,"id":53,"timeOffset":-22}]},"timestamp":1559181947195},{"type":3,"data":{"source":1,"positions":[{"x":755,"y":522,"id":53,"timeOffset":-466},{"x":752,"y":555,"id":53,"timeOffset":-159},{"x":773,"y":479,"id":53,"timeOffset":-104},{"x":777,"y":466,"id":53,"timeOffset":-2}]},"timestamp":1559181947695},{"type":3,"data":{"source":1,"positions":[{"x":842,"y":548,"id":53,"timeOffset":-180},{"x":886,"y":445,"id":53,"timeOffset":-127},{"x":892,"y":418,"id":53,"timeOffset":-72},{"x":890,"y":415,"id":53,"timeOffset":0}]},"timestamp":1559181948197},{"type":3,"data":{"source":1,"positions":[{"x":854,"y":528,"id":53,"timeOffset":-178},{"x":821,"y":387,"id":53,"timeOffset":-125},{"x":810,"y":368,"id":53,"timeOffset":-69},{"x":786,"y":389,"id":53,"timeOffset":-13}]},"timestamp":1559181948698},{"type":3,"data":{"source":1,"positions":[{"x":752,"y":553,"id":53,"timeOffset":-183},{"x":773,"y":503,"id":53,"timeOffset":-133},{"x":777,"y":491,"id":53,"timeOffset":-82},{"x":779,"y":483,"id":53,"timeOffset":-30}]},"timestamp":1559181949203},{"type":3,"data":{"source":1,"positions":[{"x":779,"y":486,"id":53,"timeOffset":-476},{"x":828,"y":525,"id":53,"timeOffset":-199},{"x":824,"y":395,"id":53,"timeOffset":-147},{"x":821,"y":383,"id":53,"timeOffset":-91},{"x":817,"y":388,"id":53,"timeOffset":-35}]},"timestamp":1559181949704},{"type":3,"data":{"source":1,"positions":[{"x":792,"y":542,"id":53,"timeOffset":-303},{"x":829,"y":420,"id":53,"timeOffset":-251},{"x":833,"y":403,"id":53,"timeOffset":-195},{"x":833,"y":412,"id":53,"timeOffset":-139}]},"timestamp":1559181950208},{"type":3,"data":{"source":1,"positions":[{"x":1066,"y":531,"id":53,"timeOffset":-377},{"x":1418,"y":204,"id":250,"timeOffset":-321}]},"timestamp":1559181950712},{"type":3,"data":{"source":1,"positions":[{"x":187,"y":9,"id":67,"timeOffset":0}]},"timestamp":1559185815544},{"type":0,"timestamp":1559185817500},{"type":1,"timestamp":1559185819373},{"type":4,"data":{"href":"http://csp.sheincorp.cn/index.html#/order","width":1920,"height":557},"timestamp":1559185819374},{"type":3,"data":{"source":1,"positions":[{"x":470,"y":163,"id":187,"timeOffset":-1}]},"timestamp":1559185819471},{"type":3,"data":{"source":2,"type":1,"id":193,"x":406,"y":135},"timestamp":1559185819774},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":192,"attributes":{"class":"so-input so-input-focus so-input-inline"}}],"removes":[],"adds":[]},"timestamp":1559185819786},{"type":3,"data":{"source":2,"type":5,"id":193},"timestamp":1559185819790},{"type":3,"data":{"source":2,"type":0,"id":193,"x":406,"y":135},"timestamp":1559185819924},{"type":3,"data":{"source":2,"type":2,"id":193,"x":406,"y":135},"timestamp":1559185819929},{"type":3,"data":{"source":1,"positions":[{"x":452,"y":154,"id":193,"timeOffset":-449},{"x":431,"y":142,"id":193,"timeOffset":-388},{"x":413,"y":137,"id":193,"timeOffset":-335}]},"timestamp":1559185819972},{"type":3,"data":{"source":1,"positions":[{"x":408,"y":135,"id":193,"timeOffset":-60},{"x":436,"y":135,"id":193,"timeOffset":-3}]},"timestamp":1559185820472},{"type":3,"data":{"source":1,"positions":[{"x":472,"y":135,"id":193,"timeOffset":-453},{"x":522,"y":135,"id":193,"timeOffset":-401},{"x":546,"y":135,"id":187,"timeOffset":-345},{"x":567,"y":135,"id":195,"timeOffset":-288},{"x":593,"y":135,"id":195,"timeOffset":-233},{"x":622,"y":135,"id":199,"timeOffset":-176},{"x":647,"y":135,"id":199,"timeOffset":-121},{"x":667,"y":135,"id":199,"timeOffset":-71},{"x":682,"y":135,"id":199,"timeOffset":-21}]},"timestamp":1559185820973},{"type":3,"data":{"source":2,"type":1,"id":199,"x":683,"y":135},"timestamp":1559185820981},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":192,"attributes":{"class":"so-input so-input-inline"}}],"removes":[],"adds":[]},"timestamp":1559185821010},{"type":3,"data":{"source":2,"type":6,"id":193},"timestamp":1559185821013},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":198,"attributes":{"class":"so-input so-input-focus so-input-inline"}}],"removes":[],"adds":[]},"timestamp":1559185821020},{"type":3,"data":{"source":2,"type":5,"id":199},"timestamp":1559185821025},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":221,"attributes":{"class":"so-input-placeholder so-select-ellipsis"}},{"id":241,"attributes":{"class":"so-input-placeholder so-select-ellipsis"}}],"removes":[{"parentId":220,"id":223},{"parentId":240,"id":244},{"parentId":241,"id":242}],"adds":[{"parentId":221,"previousId":null,"nextId":null,"node":{"type":3,"textContent":" ","id":311}},{"parentId":241,"previousId":null,"nextId":null,"node":{"type":3,"textContent":" ","id":312}}]},"timestamp":1559185821058},{"type":3,"data":{"source":2,"type":0,"id":199,"x":683,"y":135},"timestamp":1559185821126},{"type":3,"data":{"source":2,"type":2,"id":199,"x":683,"y":135},"timestamp":1559185821131},{"type":3,"data":{"source":1,"positions":[{"x":684,"y":135,"id":199,"timeOffset":-62},{"x":705,"y":135,"id":199,"timeOffset":-6}]},"timestamp":1559185821474},{"type":3,"data":{"source":1,"positions":[{"x":741,"y":135,"id":199,"timeOffset":-458},{"x":787,"y":135,"id":199,"timeOffset":-405},{"x":822,"y":135,"id":187,"timeOffset":-349},{"x":847,"y":135,"id":201,"timeOffset":-294},{"x":874,"y":135,"id":201,"timeOffset":-236},{"x":896,"y":135,"id":205,"timeOffset":-174},{"x":931,"y":137,"id":205,"timeOffset":-123},{"x":957,"y":141,"id":205,"timeOffset":-69},{"x":967,"y":142,"id":205,"timeOffset":-13}]},"timestamp":1559185821977},{"type":3,"data":{"source":2,"type":1,"id":205,"x":967,"y":142},"timestamp":1559185822021},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":198,"attributes":{"class":"so-input so-input-inline"}}],"removes":[],"adds":[]},"timestamp":1559185822028},{"type":3,"data":{"source":2,"type":6,"id":199},"timestamp":1559185822034},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":204,"attributes":{"class":"so-input so-input-focus so-input-inline"}}],"removes":[],"adds":[]},"timestamp":1559185822040},{"type":3,"data":{"source":2,"type":5,"id":205},"timestamp":1559185822048},{"type":3,"data":{"source":2,"type":0,"id":205,"x":967,"y":142},"timestamp":1559185822153},{"type":3,"data":{"source":2,"type":2,"id":205,"x":967,"y":142},"timestamp":1559185822157},{"type":3,"data":{"source":1,"positions":[{"x":967,"y":142,"id":205,"timeOffset":0}]},"timestamp":1559185822589},{"type":3,"data":{"source":1,"positions":[{"x":875,"y":145,"id":201,"timeOffset":-445},{"x":685,"y":145,"id":199,"timeOffset":-388},{"x":620,"y":145,"id":199,"timeOffset":-333},{"x":598,"y":148,"id":195,"timeOffset":-277},{"x":557,"y":151,"id":187,"timeOffset":-221},{"x":485,"y":151,"id":193,"timeOffset":-171},{"x":423,"y":151,"id":193,"timeOffset":-119},{"x":401,"y":149,"id":193,"timeOffset":-46}]},"timestamp":1559185823090},{"type":3,"data":{"source":2,"type":1,"id":193,"x":401,"y":149},"timestamp":1559185823108},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":204,"attributes":{"class":"so-input so-input-inline"}}],"removes":[],"adds":[]},"timestamp":1559185823113},{"type":3,"data":{"source":2,"type":6,"id":205},"timestamp":1559185823120},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":192,"attributes":{"class":"so-input so-input-focus so-input-inline"}}],"removes":[],"adds":[]},"timestamp":1559185823127},{"type":3,"data":{"source":2,"type":5,"id":193},"timestamp":1559185823132},{"type":3,"data":{"source":2,"type":0,"id":193,"x":401,"y":149},"timestamp":1559185823212},{"type":3,"data":{"source":2,"type":2,"id":193,"x":401,"y":149},"timestamp":1559185823217},{"type":3,"data":{"source":5,"text":"a","isChecked":false,"id":193},"timestamp":1559185824205},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":193,"attributes":{"value":"a"}}],"removes":[],"adds":[]},"timestamp":1559185824215},{"type":3,"data":{"source":5,"text":"aa","isChecked":false,"id":193},"timestamp":1559185824379},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":193,"attributes":{"value":"aa"}}],"removes":[],"adds":[]},"timestamp":1559185824386},{"type":3,"data":{"source":5,"text":"aaa","isChecked":false,"id":193},"timestamp":1559185824547},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":193,"attributes":{"value":"aaa"}}],"removes":[],"adds":[]},"timestamp":1559185824556},{"type":3,"data":{"source":5,"text":"aaaa","isChecked":false,"id":193},"timestamp":1559185824707},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":193,"attributes":{"value":"aaaa"}}],"removes":[],"adds":[]},"timestamp":1559185824715},{"type":3,"data":{"source":5,"text":"aaaaa","isChecked":false,"id":193},"timestamp":1559185824851},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":193,"attributes":{"value":"aaaaa"}}],"removes":[],"adds":[]},"timestamp":1559185824858},{"type":3,"data":{"source":1,"positions":[{"x":402,"y":147,"id":193,"timeOffset":0}]},"timestamp":1559185824966},{"type":3,"data":{"source":1,"positions":[{"x":523,"y":159,"id":192,"timeOffset":-450},{"x":873,"y":166,"id":187,"timeOffset":-400},{"x":1078,"y":186,"id":233,"timeOffset":-343},{"x":1080,"y":187,"id":233,"timeOffset":-160},{"x":1080,"y":188,"id":233,"timeOffset":-104},{"x":1081,"y":184,"id":233,"timeOffset":-40}]},"timestamp":1559185825468},{"type":3,"data":{"source":1,"positions":[{"x":1082,"y":184,"id":233,"timeOffset":-429},{"x":1082,"y":184,"id":233,"timeOffset":-373},{"x":1109,"y":187,"id":227,"timeOffset":-316},{"x":1276,"y":179,"id":240,"timeOffset":-265},{"x":1562,"y":129,"id":187,"timeOffset":-215},{"x":1735,"y":71,"id":179,"timeOffset":-165},{"x":1771,"y":47,"id":130,"timeOffset":-107},{"x":1770,"y":41,"id":130,"timeOffset":-53}]},"timestamp":1559185825969},{"type":3,"data":{"source":1,"positions":[{"x":1769,"y":30,"id":168,"timeOffset":-498},{"x":1763,"y":3,"id":130,"timeOffset":-446}]},"timestamp":1559185826474},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":192,"attributes":{"class":"so-input so-input-inline"}}],"removes":[],"adds":[]},"timestamp":1559185826510},{"type":3,"data":{"source":2,"type":6,"id":193},"timestamp":1559185826517}]}

[Yuyz0112]

从数据来看确实只存储了鼠标相关的事件，缺少 DOM 相关的，尤其是 DOM 的全量快照。

建议确认一下存储的过程中是否有哪一层对 data size 做了限制，导致没能保存成功。例如 nginx body size limit 等。

[stoneyallen]

我暂时是在本地环境开发，没有nginx的限制，直接使用node接收，可能是我dom没有存储

那请问下应该怎么存储dom数据呢？

以下是我存数据的代码

import { record } from 'rrweb';
record({ emit(event) { storagePush(event); } });
好像我没有存dom的过程

[Yuyz0112]

DOM 也是一种事件，前端代码像这样就可以，不需要特殊处理。
可以看下 mongoDB 的日志，看看是否有数据超过字段限制之类的有异常。

[Yuyz0112]

在 node 接收端也可以打印一些 event 的 type 和 timestamp，看看收到的和存入的是否有缺失。

[Yuyz0112]

Feel free to reopen this issue if you confirmed it was a rrweb's bug.

[qiaoyixuan]

push event后立即使用player进行播放，遇到同样的问题，没有后端存储的过程