笔记 前端需要了解的监控小知识

监控

前端监控一般分为三种，分别为页面埋点、性能监控以及异常监控

1. 页面埋点
   页面埋点应该是大家最常写的监控了，一般起码会监控以下几个数据：PV / UV；停留时长；流量来源；用户交互
   实现思路大致可以分为两种，分别为手写埋点和无埋点的方式。
2. 性能监控
   对于性能监控来说，我们可以直接使用浏览器自带的 Performance API 来实现这个功能。
   对于性能监控来说，其实我们只需要调用 performance.getEntriesByType(‘navigation’) 这行代码就行了
3. 异常监控
   分别是代码报错以及接口异常上报。
   对于代码运行错误，通常的办法是使用 window.onerror 拦截报错。该方法能拦截到大部分的详细报错信息，但是也有例外。
   对于跨域的代码运行错误会显示 Script error。 对于这种情况我们需要给 script 标签添加 crossorigin 属性。
   对于某些浏览器可能不会显示调用栈信息，这种情况可以通过 arguments.callee.caller 来做栈递归。
   对于异步代码来说，可以使用 catch 的方式捕获错误。比如 Promise 可以直接使用 catch 函数，async await 可以使用 try catch。
   但是要注意线上运行的代码都是压缩过的，需要在打包时生成 sourceMap 文件便于 debug。
   对于捕获的错误需要上传给服务器，通常可以通过 img 标签的 src 发起一个请求。
   另外接口异常就相对来说简单了，可以列举出出错的状态码。一旦出现此类的状态码就可以立即上报出错。接口异常上报可以让开发人员迅速知道有哪些接口出现了大面积的报错，以便迅速修复问题。