RRWEB.IO tracking hành vi người dùng

Đôi khi bạn muốn lưu lại hành vi người dùng để cải thiện các tính năng cho trang web, hoặc dùng để reproduce bug. Ta có thể quay video mỗi khi người dùng truy cập vào trang web tuy nhiên dữ liệu gửi lên server sẽ rất lớn. Rrweb.io cung cấp cho ta một giải pháp nhẹ nhàng hơn.

Cài đặt

<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> 

via npm:

 npm install --save rrweb 

Record

Ta có thể record 1 cách cực kì đơn giản như sau.

let events = [];

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

Mỗi khi người dùng có bất kì một sự kiện nào đấy, hàm emit sẽ được gọi. Biến event có lưu DOM thay vì hình ảnh hoặc video vì vậy ta có thể dễ dàng lưu vào database dưới dạng json.

Bảo mật:

Các element có class là rr-block sẽ không được lưu lại và sẽ được thay thế bằng 1 khối rỗng với kích thước tương đương.

Các element có class là rr-ignore sẽ không được lưu lại sự kiện input.

Các element có type = password mặc định sẽ không được lưu lại.

Checkout:

Lấy 100 sự kiện gần nhất:

rrweb.record({
  emit(event, isCheckout) {
     // isCheckout is a flag to tell you the events has been checkout 
  },
  checkoutEveryNth: 100, 
});

Lấy các sự kiện trong 10 giây gần nhất:

rrweb.record({
  emit(event, isCheckout) {
    // isCheckout is a flag to tell you the events has been checkout
  },
  checkoutEveryNms: 10 * 1000,
});

Replay

Việc replay lại record cũng cực kì đơn giản.

Thư viện rrweb-replayer

<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>

npm:
 npm install --save rrweb-player 

cách sử dụng

new rrwebPlayer({
  target: document.body, // customizable root element
  data: {
    events,
    autoPlay: true,
  },
});

các tuỳ chọn

Tài liệu tham khảo

https://github.com/rrweb-io/rrweb/blob/master/guide.md