JSFiddle - React, Tailwind, and code Playground

by leopoldthecuber

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/rrweb.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.css">
<div></div>

CSS

div {
  width: 200px;
  height: 200px;
  background-color: #fed;
  border: solid 2px #edf;
  box-shadow: 0 0 1px 2px #fde;
}

JavaScript

console.log(rrweb)

let events = [];

const stop = rrweb.record({
  emit(event) {
    // push event into the events array
    events.push(event);
  },
});

function replay() {
  const replayer = new rrweb.Replayer(events);
  replayer.play();
}

// this function will send events to the backend and reset the events array
function save() {
  const body = JSON.stringify({ events });
  stop();
  console.log(body)
  replay()
}

// save events every 10 seconds
setTimeout(save, 10 * 1000);