这是我参与「第五届青训营 」伴学笔记创作活动的第 16 天

稳定性指标

• js错误
  • js运行错误：监听error事件
  • promise错误：监听unhandledrejection事件
  • js脚本异常：监听error事件 - 资源加载异常：监听error事件 - http请求异常：重写

用户体验指标/性能

• timing
  • PerformanceTiming

• paint
  • FP
  • FCP
  • FMP：页面首次有效绘制时间，FMP >= FCP
  • LCP
  • TTFB：发出请求到应答请求的第一个字节的耗时
  • FID：用户首次交互操作的延时时间
  • TTL:页面加载到页面处于完全可交互状态所花费的时间

用户行为指标

• PV:页面浏览量
• UV:24小时内访问网站的独立用户数（IP数目）
• 页面停留时间: load事件-beforeunload事件

埋点方案

无痕埋点

对用户的一些行为进行收集，一般用于粗颗粒度的数据分析

• 优点：接入简单，几乎无入侵；用户操作行为收集非常完整；
• 缺点：数据噪声大，不管有用没用都收集；无法定制化埋点，无法采集到指定事件和业务属性

代码埋点

前端开发人员在代码中自定义监听和收集

• 优点：可精确埋点；业务属性非常丰富；埋点出发方式可以灵活定义
• 缺点：工作量大，对代码侵入性很大，后期维护不方便

埋点SDK

sdk向外暴露上报埋点的接口，监听和收集过程开发人员无感知\

• 优点：业务开发只需关注事件标识、业务属性等；兼顾无痕埋点优点和代码埋点的优势
• 缺点：暂时想不到

数据上报方案

• 阿里云日志服务SLS

• Beacon API

  • Beacon - MDN文档
  • 使用 HTTP POST方法，并且不需要有响应。
  • 保证在页面卸载完成前发送请求
  • 使用：navigator.sendBeacon(url, data);

• Image

  • get请求方式，不同服务器针对uri的长度有限制，长度超过限制时会出现HTTP 414错误，所以还要注意上报频率，减少一次性上传的属性过多

• 文章： 前端埋点与监控方案