前端知识之前端监控

前端监控

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

页面埋点

监控数据

一般起码会监控以下几个数据：

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

实现思路

• 手写埋点

可以自主选择需要监控的数据然后在相应的地方写入代码。

这种方式的灵活性很大，但是唯一的缺点就是工作量较大，每个需要监控的地方都得插入代码。

• 无埋点

不需要开发者手写埋点了，而是统计所有的事件并且定时上报。

这种方式虽然没有前一种方式繁琐了，但是因为统计的是所有事件，所以还需要后期过滤出需要的数据。

性能监控

• 性能监控可以很好的帮助开发者了解在各种真实环境下，页面的性能情况是如何的。
• 对于性能监控来说，我们可以直接使用浏览器自带的 Performance API 来实现这个功能。
• 对于性能监控来说，其实我们只需要调用performance.getEntriesByType(‘navigation’) 这行代码就行了。
• 这行代码返回了一个数组，内部包含了相当多的信息，从数据开始在网络中传输到页面加载完成都提供了相应的数据。
  

异常监控

• 代码报错

对于代码运行错误，通常的办法是使用 window.onerror 拦截报错。
该方法能拦截到大部分的详细报错信息，但是也 有例外
对于跨域的代码运行错误会显示 Script error. 对于这种情况我们需要给 script 标签添加 crossorigin 属性
对于某些浏览器可能不会显示调用栈信息，这种情况可以通过 arguments.callee.caller 来做栈递归
对于异步代码来说，可以使用 catch 的方式捕获错误。比如 Promise 可以直接使用 catch 函数， async await 可以使用 try catch 。 但是要注意线上运行的代码都是压缩过的，需要在打包时生成 sourceMap 文件便于 debug。
对于捕获的错误需要上传给服务器，通常可以通过 img 标签的 src 发起一个请求。

• 接口异常上报

接口异常上报可以列举出出错的状态码。一旦出现此类的状态码就可以立即上报出错。
接口异常上报可以让开发人员迅速知道有哪些接口出现了大面积的报错，以便迅速修复问题。