初识前端监控

那是一个平平无奇的工作日，和往常一样，我正在代码的海洋里遨游着。突然，产品来到我的面前，笑吟吟的睁着怪眼看我，一字一句的从嘴里突出四个字——“有新需求”。拿到文档的那一刻，我竟提不起半点翻开的欲望，可又想起产品脸上怪异的笑容，我从顶上直冷到脚跟，还是看看吧。凡事总须研究，才会明白。产品说的要求，我也还依稀记得，可是不甚清楚。我翻开需求文档一查，这文档没有尾页，歪歪斜斜的每叶上都写着“数据采集”几个字。我横竖睡不着，仔细看了半夜，才从字缝里看出字来，满本都写着两个字是“监控”！

1. 前端监控类型

1.1 数据监控

监控产品相关的数据指标

• PV（Page View） 页面浏览量或点击量
• UV（Unique Visitor） 访客量
• rpv 路由切换量
• 用户的点击操作

1.2 性能监控

项目质量、性能相关的性能监控

• DNS解析时间
• TCP建立时间
• 首屏加载时间
• DOM渲染完成时间
• 页面加载完成时间
• 。。。

使用 window.performanceAPI查询资源加载时间

1.3 报警监控

前端代码在执行过程种发生的异常

• js报错

  window.onerror = function(msg, url, row, col, error) {
      console.log(msg, url, row, col, error);
  }
  

• 请求报错

  addEventListener('unhandledrejection', e => {
      console.log(e)
  })
  

• 资源加载报错

  addEventListener('error', e => {
      const target = e.target
      if (target != window) {
          console.log(target)
      }
  }, true)
  

2. 埋点方式

2.1 手动埋点

通过手动嵌入代码的方式进行埋点，在需要监控的位置嵌入代码，发送监控信息

优点：可以在任意位置嵌入监控代码进行监控

缺点： 需要大量的工作量，每个埋点位置都需要嵌入监控代码

Vue可以通过自定义指令的方式实现半自动

2.2 可视化埋点

通过可视化系统埋点

优点：方法简便，工作量下

缺点：不能手动定制，局限性大

2.3 无痕埋点

统一对事件进行监控

优点：工作量小，不会出现监控遗漏

缺点：数据量大

引入SDK，该SDK包含全局事件的监听，数据的处理，数据的上传，同时还要向外暴露手动埋点的方法

3. 数据发送方式

3.1 image方式

将监控信息作为image的scr属性上传至服务端

3.2 Beacon方式

Navigator.sendBeacon(url,data)

优点：不会占用资源，在浏览器空闲时间发送，不会对业务代码造成阻塞。

缺点：有兼容性问题

\