这是我参与「第四届青训营 」笔记创作活动的的第 12 天。
前言
前端监控：指的是通过一定的手段来获取用户行为以及跟踪产品在客户端的运行情况，并以监控数据为基础，能够更快的发现问题和解决问题，并且可以作为产品的决策依据，优化升级迭代产品，为业务扩展提供更多可能性，提升用户使用体验。
前端埋点：指的是在产品的客户端获取用户行为和程序运行情况的一种监控方式。通过埋点可以获取到用户的行为数据，借助这些数据，我们可以从用户角度出发，优化产品，给用户提供更加精确、完善的服务。
前端常见异常及捕获方式 这篇文章介绍了前端常见的异常情况以及不同场景下的异常捕获方案，对前端异常不了解的小伙伴可以先看一下。
前端监控流程
- 前端埋点
- 数据上报
- 数据处理与分析
- 可视化展示
- 实时监控报警
埋点数据分类
用户数据
| 属性 | 描述 | 属性 | 描述 | |
|---|---|---|---|---|
| appID | 当前应用ID | appVersion | 当前应用版本 | |
| browserType | 浏览器类型 | browserVersion | 浏览器版本 | |
| browserEngine | 浏览器引擎 | deviceType | 用户设备类型 | |
| OSType | 操作系统类型 | OSVersion | 操作系统版本号 | |
| UserID | 用户的身份标识 | URL | 事件触发时页面URL | |
| eventTime | 埋点事件触发（上报）时间 | localTime | 用户本地时间 | |
| language | 语言 | extra | 用户自定义数据 |
用户行为数据
| 属性 | 描述 |
|---|---|
| PV | 页面访问量/点击量 |
| VV | 网站访问量（与PV区别：一个网站可以有多个页面） |
| UV | 一天内同个用户访问只统计一次 |
| IP | 一天内同个IP访问只统计一次 |
| 用户停留时间 | 用户在每个页面的停留时间 |
性能指标
| 指标 | 描述 |
|---|---|
| FP | 页面首个像素绘制时间 |
| FCP | 页面首次内容渲染 |
| FMP | 页面首次有效绘制 |
| LCP | 页面最大内容绘制 |
| TTI | 页面可交互时间 |
| FID | 用户首次交互延迟 |
| DCL | DOM加载完成 |
| L | onload |
异常数据
| 异常 | 异常 | |
|---|---|---|
| 静态资源加载错误 | 网络请求错误 | |
| 程序卡顿或崩溃 | 异步或Promise错误 | |
| DOMException | JSError |
常见埋点方案
| 埋点方式 | 分析 |
|---|---|
| 代码埋点（手动埋点） | 在需要监控的业务逻辑代码处，手动上报。优点是：可以方便设置自定义属性、自定义事件，方便定制化上报。缺点是：项目工程量大，埋点位置多的情况下不易于维护。 |
| 可视化埋点 | 通过可视化交互的方式，输入业务代码，系统自动嵌入埋点代码，输出耦合了两者的一段代码，即使用系统代替手动插入埋点代码 |
| 无痕埋点 | 全局捕获异常和采集数据。优点是：采集全量数据，不会出现漏埋和误埋的情况。缺点是：增加了数据传输和服务器的压力，无法灵活定制上报数据。 |
埋点上报的方式
传统的XHR请求
优点： 可以灵活地设置请求头属性，post请求可以发送大体量的数据，满足特定场景的埋点需求。
缺点： 数据量大时请求占用带宽资源多，页面销毁时若请求未完成则会上报失败。
img标签 / Image对象
利用img标签的src属性发送get请求上报数据。
优点： 使用方便，不受浏览器跨域影响，页面销毁时仍然会等上报请求发送完毕再进行页面卸载。
缺点： 上报的数据长度有限制。
sendBeacon API
navigator.sendBeacon()是W3C为了解决页面在触发销毁事件unload期间会中断所有异步XHR请求的问题而引入的补充性API。该方法接收一个URL和一个数据有效载荷参数，并会发送一个POST请求。可选的数据有效载荷参数有ArrayBufferView、Blob、DOMString、FormData实例。它会保证页面在已经关闭的情况下也会发送请求。
优点： 页面卸载时上报请求未完成也不影响上报。
缺点： 浏览器兼容性不好，只支持POST请求，发送的数据量因浏览器而异，需要配置跨域。
