前端监控之rrweb录制用户行为

一、概述

rrweb 是 'record and replay the web' 的简写，旨在利用现代浏览器所提供的强大 API 录制并回放任意 web 界面中的用户操作。

1.1、为什么要录制用户行为？

前端录制用户行为能够提供有价值的数据，帮助团队从多个角度分析和优化产品，提升用户体验，解决潜在问题，最终促进产品的持续改进和业务的增长。

录制用户行为在前端监控中有以下几个重要原因：

用户体验优化。通过录制用户的行为，可以直观地看到用户在页面上的互动过程，帮助开发团队发现页面设计中的不合理之处，及时调整以提升用户体验。例如，某些页面功能可能导致用户困惑或卡顿，录制能帮助迅速识别并定位问题。

BUG排查和复现问题。当用户遇到某些问题时，直接复现问题往往较为困难。通过录制用户行为，可以重现用户的操作流程，帮助开发人员准确找到导致问题的步骤，从而更加高效地进行修复。

数据分析。通过分析录制的用户行为数据，能够了解用户的操作习惯、使用路径、停留时长等信息。这些数据可以帮助产品团队了解哪些功能是用户最常用的，哪些功能可能存在被忽视的情况，帮助产品优化和决策。

用户行为分析与热图。录制可以结合热图工具，帮助团队分析用户点击、滑动、浏览的区域，这样可以更好地优化页面布局、内容展示等，提高页面的转化率。

记录和回放。录制的行为可以在发生问题后进行回放，提供给QA或开发人员作为问题复现的依据，减少沟通成本。

安全和合规性。有些情况下，监控用户行为可以帮助发现潜在的安全问题，例如恶意操作、作弊行为等。通过记录用户的点击流，可以提供审计和追踪支持。

用户研究与市场调研。通过观察用户行为，能够深入了解用户的使用习惯和需求，为产品迭代和市场决策提供数据支持。

二、实践

实现技术环境Vite+Vue3+Pinia

2.1、安装rrweb

在前端项目目录下使用npm或pnpm（需要先安装pnpm）安装rrweb

# 安装rrweb
npm i rrweb --save
# 安装播放器
npm i rrweb-player --save

2.2、实现录制

创建store存储rrweb录制内容，以便回放

./store/rrweb/eventStore.ts

import { defineStore } from 'pinia';
import type { eventWithTime } from '@rrweb/types';

interface EventState {
  events: eventWithTime[];
}
export const useEventStore = defineStore('eventStore', {
  state: (): EventState => ({
    events: []
  }),
  getters: {},
  actions: {
    setEvents(events: eventWithTime[]) {
      this.events = ev