行为监控

用户行为监控指对用户在页面上的操作行为进行采集，记录用户每次会话过程中的操作路径，从而还原用户的使用场景、操作规律、访问路径及行为特点。利用采集到的用户行为信息，可以带来以下收益。

• 对产品而言，帮助验证产品的可行性，研究产品决策，清楚地了解用户的行为习惯，并找出产品的缺陷，以便迭代与优化需求。
• 对设计而言，帮助增加体验的友好性，匹配用户情感，细腻地贴合用户的个性服务，并发现交互的不足，以便完善与改进设计。
• 对运营而言，帮助裂变增长的有效性，实现精准营销，全面地挖掘用户的使用场景，并分析运营的问题，以便转变与调整决策。
• 对研发而言，帮助确定错误的操作路径，精准定位问题根因，从而快速修复难以复现的问题，以便保障页面的稳定性。

对于复杂的页面，部分错误需要很长的操作路径才能被触发，并且触发错误的原因可能与数据相关。仅依靠错误堆栈信息，很难对这些错误进行定位。如果能够记录用户的操作行为，在错误发生时就根据操作路径进行复现，将大大减少定位错误过程中投入的时间和精力。除了对错误的排查，对白屏、卡顿等问题的排查也可以借助操作路径进行快速定位。

• PV/UV:PV(page view)，即页面浏览量或点击量。UV:指访问某个站点或点击某条新闻的不同IP地址的人数
• 用户在每一个页面的停留时间
• 用户通过什么入口来访问该网页
• 用户在相应的页面中触发的行为
• 页面的进入、离开、点击、滚屏、自定义事件、控制台输出、网络请求

事件监听

用户的主要操作行为可以大致划分为鼠标事件、键盘事件、AJAX请求和URL变更4种类型，每种类型的操作行为又可以细分出很多子类。

鼠标事件包括单击、双击、按下和松开等子类，可以通过click、dbclick、mousedonw和mouseup等事件监听。除了需要记录鼠标事件的操作类型，还应该添加鼠标操作的关键信息，比如单击的按键是左键还是右键，触发单击事件的DOM节点信息。

键盘事件包括按下、松开、按下并松开等子类，可以通过keydown、keyup和keypress等事件监听。除了需要记录键盘事件的操作类型，还应该添加键盘操作的关键信息，比如按键的具体编码。AJAX请求包括请求的发起与取消两类，可以通过劫持XMLHttpRequest、Fetch的原生方法采集关键信息。如果使用Axios等网络库，那么可以直接利用拦截器采集信息。

AJAX请求中可收集的信息很多，包括请求的地址、方法、参数和报头等。在实际应用中，一般会根据情况自定义需要收集的信息。如果后端服务提供了根据UUID查询请求详情的功能，那么只需要简单收集请求的地址、方法及UUID即可。

相对于前3种操作行为，URL变更需要做的事情就简单多了，它不需要区分子类型，只需要通过popstate监听浏览器页面地址的变化，记录前后对应的URL信息即可。

除了4类操作行为的自定义属性，还需要收集一些通用属性。例如，时间戳用于定位操作行为发生的时间，页面URL用于定位操作行为发生在某个具体页面。每次页面初始化加载完成后，都应该创建一个会话ID，用于标记本次访问记录，并且应该添加用户身份标记，用来定位当前访问者的身份。数据结构定义如下。

enum ActionType{
    Mouse = 'mouse',
    Keyboard = 'keyboard',
    Url = 'url',
    Ajax = 'ajax'
}

type UserAction = {
    timeStamp:number; //操作发生的时间点
    url: string; //操作发生的页面
    type: ActionType: //操作类型
    customInfo: object; //不同操作类型具有独立的自定义对象
}

type SessionInfo = {
    sessionId: string;  //唯一会话ID，在页面第一次加载时创建
    userId: string; //用户身份ID，用于标记当前用户身份
    time: number;  //会话发生的时间点
    actions: UserAction[]; //操作路径
}

操作路径的会话信息被存储在内存中，当页面销毁时内存就会自动释放。然而，当用户停留在页面中不断操作时，actions就会存储大量的操作路径信息，导致内存飙升。为了解决这种问题，actions应该定时上传，并在上传成功后清空本地的actions数组，释放内存。

仅记录用户的操作路径对于开发人员来说没有太大的实际收益。因此，开发人员可以在上报其他监控时附带问题发生的时间戳和内存中的会话ID，根据这两项信息快速定位问题发生前后的操作路径，从而提高效率。

录制回放

rrweb是一种开源工具，它提供了对页面进行录制和回放的功能。页面中的视图状态可以通过DOM树的形式描述，当rrweb尝试录制一个页面时，实际上是在记录DOM树在各个时间点上的状态。它将页面中的DOM及用户操作保存为可序列化的数据，从而实现远程回放。

PV、UV、用户停留时间

PV、UV、用户停留时间

PV(page view) 是页面浏览量，UV(Unique visitor)用户访问量。PV 只要访问一次页面就算一次，UV 同一天内多次访问只算一次。

对于前端来说，只要每次进入页面上报一次 PV 就行，UV 的统计放在服务端来做，主要是分析上报的数据来统计得出 UV。

import tracker from "../util/tracker";
export function pv() {
  tracker.send({
    kind: "business",
    type: "pv",
    startTime: performance.now(),
    pageURL: getPageURL(),
    referrer: document.referrer,
    uuid: getUUID(),
  });
  let startTime = Date.now();
  window.addEventListener(
    "beforeunload",
    () => {
      let stayTime = Date.now() - startTime;
      tracker.send({
        kind: "business",
        type: "stayTime",
        stayTime,
        pageURL: getPageURL(),
        uuid: getUUID(),
      });
    },
    false
  );
}