Blog

关于前端监控的几点思考

time: 2019.11.6
author: heyunjiang

1. 背景

前端监控，通常指的是浏览器错误监控，或者其他用户信息数据采集埋点，这里我主要是说错误监控。

前端错误监控的意义：

1. 代码质量把控：同 eslint 一样，2者都是前端质量把控的工具，不过 eslint 是在代码编写期间的规范检查，而前端监控是项目已经上线的浏览器控制台错误监控，及时的错误上报，能让工程师及时修复相关问题。
2. 产品稳定性保证：产品线上运行是否稳定，其中一项指标就是功能正确，使用时不报错，所有功能能正常跑通

前端监控作为业务中一个业务技术点，在产品到达一定体量的时候，它的重要性就体现出来了。

2. 需求

如何实现前端错误监控呢？

1. 错误信息数据采集
2. 错误信息数据缓存
3. 错误信息上报
4. 错误信息存储
5. 错误信息读取并展示
6. 错误信息分析
7. 错误信息告警

3. 问题

从第二点需求来看，前端监控里面涉及到一些技术点，自己也有一些疑问，那么下来就自问自答一些点

3.1 错误信息如何采集呢？

问题分析：浏览器错误数据如果读取呢？
问题解答：主要有以下3种方式

1. window.onerror 采集错误数据，其中回掉函数支持以下参数： message, source, lineno, colno, error
2. unhandledrejection 当Promise 被 reject 且没有 reject 处理器的时候，会触发 unhandledrejection 事件
3. Vue.config.errorHandler 全局配置的 vue 错误信息数据采集(如果根组件配置了 errorHandler 并且返回了 false，那么将采集不到数据)

3.2 错误信息上报频率如何控制

3.3 错误信息本地如何存储

1. 缓存
2. 浏览器常驻存储

* 3.4 服务器端如何处理？为什么需要用到中间件？Badjs 又是什么？

参考文章

1. mdn window.onerror