@aaqibjavith
https://gist.github.com/aaqibjavith/abe2920dded20cee094ef60b13eab618
It seems you made it work. can you send me the table structure you are using to save the events and how are you merging events of same session and playing it?
When I'm trying to merge and play the events it's showing me White screen.
<head>replay</head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css" />
<script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js"></script>
<script>
function replay(){
const events = "./events.json"
const replayer = new rrwebPlayer({
target:document.getElementById("player"),
data:{events}
});
replayer.play();
console.log("replay")
}
</script>
<body>
<button onclick="replay()">replay</button>
<div id="player"></div>
</body>
</html>
at new e (index.js:1)
at we._e (index.js:1)
at index.js:1
at w (index.js:1)
at g (index.js:1)
at new we (index.js:1)
at replay (replay.html:10)
at HTMLButtonElement.onclick (replay.html:58)
new rrwebPlayer({
target: document.body, // customizable root element
data: {
events: PUT_YOUR_EVENTS_ARRAY_HERE,
autoPlay: true,
},
});
index.js:1 Uncaught Error: Replayer need at least 2 events.
at new e (index.js:1)
at we._e (index.js:1)
at index.js:1
at w (index.js:1)
at g (index.js:1)
at new we (index.js:1)
at Module../src/pages/Home/HomePage.js (HomePage.js:244)
at __webpack_require__ (bootstrap:784)
at fn (bootstrap:150)
at Module../src/core/routes.js (DispatcherConstants.js:30)
at __webpack_require__ (bootstrap:784)
at fn (bootstrap:150)
at Module../src/App.js (index.scss:7)
at __webpack_require__ (bootstrap:784)
at fn (bootstrap:150)
at Module../src/index.js (HomePageDispatcher.js:3)
at __webpack_require__ (bootstrap:784)
at fn (bootstrap:150)
at Object.1 (DateUtils.js:31)
at __webpack_require__ (bootstrap:784)
at checkDeferredModules (bootstrap:45)
at Array.webpackJsonpCallback [as push] (bootstrap:32)
at main.chunk.js:1
Is the source code of that player available somewhere ?
dist/rrweb-snapshot.min.js from sources, but I can't figure out how to use it. I want to snapshot the web page, save it serialized data to DB and rebuild html later. Using: const snap = rrwebSnapshot.snapshot(document); console.log(snap); const html = rrwebSnapshot.rebuild(snap); console.log(html); What's wrong here? Please, help :)
Hi everyone! I've just builded
dist/rrweb-snapshot.min.jsfrom sources, but I can't figure out how to use it. I want to snapshot the web page, save it serialized data to DB and rebuild html later. Using: const snap = rrwebSnapshot.snapshot(document); console.log(snap); const html = rrwebSnapshot.rebuild(snap); console.log(html); What's wrong here? Please, help :)
Same problem here. I don't understand how to rebuild the snapshot. rrwebSnapshot.rebuild(snap) returns only an array with 2 keys. index 0 is null and index 1 contains an empty object. @Yuyz0112, can you please point me in the right direction?
var snap = rrwebSnapshot.snapshot(document); works, rrwebSnapshot.rebuild(snap); however doesn't.
Hi everyone! I've just builded
dist/rrweb-snapshot.min.jsfrom sources, but I can't figure out how to use it. I want to snapshot the web page, save it serialized data to DB and rebuild html later. Using: const snap = rrwebSnapshot.snapshot(document); console.log(snap); const html = rrwebSnapshot.rebuild(snap); console.log(html); What's wrong here? Please, help :)Same problem here. I don't understand how to rebuild the snapshot. rrwebSnapshot.rebuild(snap) returns only an array with 2 keys. index 0 is null and index 1 contains an empty object. @Yuyz0112, can you please point me in the right direction?
I'm not sure rrweb snapshot is meant to be used as its own package. AFAIK its more for internal use of rrweb. You can however use rrweb-record to save your page to a backend and replay it with rrweb-replayer (bare replayer) or rrweb-player (has play/pause buttons, and a timeline).
https://github.com/rrweb-io/rrweb/blob/master/guide.md is a good starting point
1 reply
