前端监控指

• 页面埋点
• 性能监控
• 异常监控

TODO: 怎么设计一个监控体系

页面埋点

• PV / UV
• 停留时长
• 流量来源
• 用户交互

手动埋点：自主选择需要监控的数据然后在相应的地方写入代码。灵活性很大，缺点是工作量较大，每个需要监控的地方都得插入代码。

无埋点：统计所有的事件并且定时上报。因为统计的是所有事件，所以还需要后期过滤出需要的数据。

性能监控

直接使用浏览器自带的 Performance API 来实现这个功能。

👇 performance.getEntriesByType('navigation')

包含了 网络传输 到 页面加载完成 相应的数据

异常监控

• 代码报错
  • window.onerror 拦截报错
  • 该方法能拦截到大部分的详细报错信息，但是也有例外
  • 跨域的代码运行错误会显示 Script error. 对于这种情况我们需要给 script 标签添加 crossorigin 属性
  • 某些浏览器可能不会显示调用栈信息，这种情况可以通过 arguments.callee.caller 来做栈递归
• 接口异常
  • 列举出出错的状态码。一旦出现此类的状态码就可以立即上报出错

👆 捕获的错误需要上传给服务器，通常可以通过 img 标签的 src 发起一个请求。