前端开发工具集（十）：监控系统

本文是前端开发工具系列之日志监控，主要会讨论常见解决方案，并选取一种进行详细介绍，该系列其他部分请参考这里。

---

概述

前端监控系统虽重要却不像其他必要的工具一样受重视，一方面涉及到的功能可以被其他手段替代，一方面不可替代的部分影响大多也不会太致命，因此可按需引入。

监控系统解决了什么问题

前端监控主要是解决工作中的以下问题

• js错误，比如由于浏览器兼容和特定场景下出现的错误，会导致页面无响应、白屏等问题，这是监控系统解决的最主要问题，否则需要对线上出现问题时的环境进行还原，试图复现，但由于环境和操作流程难以完全还原。
• 性能问题，比如不同地区的资源加载速度、首屏时间等，这一项需要性能监测工具。
• 业务埋点，比如统计pv/uv，或某些事件触发及其他关注数据的监控，可通过专门的埋点工具GA等实现
• 接口调用监控，一般可通过后端日志查询。

以上问题该怎么解决

监控就是把事情发生的过程记录下来，整个逻辑很简单，即在源码中添加对目标事件的监测代码

• 当页面运行时对数据进行收集
• 适时发送到服务端，服务端对相关数据保存
• 通过可视化对获取的数据进行分析

graph TD
页面 --> 数据库 --> 可视化

数据收集

具体参考这里

错误信息

• 接口错误 对xhr和fetch相关方法进行重写
• js代码错误或资源加载错误

window.addEventListener('error',function(e){
  // 拿到错误信息，发布事件：triggerHandlers
}, true)

判断e.target.localName是否有值，有的话就是资源错误，否则是代码错误，可通过source-map和对应soucemap文件还原错误位置

注意onError事件不会监听到资源加载错误

• reject但没处理的promise

window.addEventListener("unhandledrejection", event => {
 // 拿到错误信息，发布事件：triggerHandlers
});

用户行为

• dom事件，比如点击

window.addEventListener('click',function(e){
	// 利用节流，以防事件触发过快
  // 发布事件 triggerHandlers
}, true)

• 路由切换信息,hashchange、history(需要监听pushState、replaceState和onpopstate)

console

重写console方法

React

ErrorBoundary

自定义上报

其他需要手动上报的地方

上传数据

多次数据可以合并发送

• 接口直接上报，如果异步跳转到新页面就会丢失这个请求，如果同步就会卡顿
• 图片get请求
• Navigator.sendBeacon

数据分析

对于获取的数据要进行进一步处理，可能需要关注的点包括

• 对于用户某个会话的完整追踪
• 对于压缩后代码报错使用sourceMap还原

现有解决方案

• sentry
• arms