前端监控到底要做些什么？
基于数据驱动的做事原则，我们需要统计线上项目中，用户的行为和使用情况，从而更加贴近用户，为我们的决策提供相应的数据支持，更好地迭代升级我们的产品，创造用户价值。
既然如此，研发同学以及业务方对前端监控的诉求应该有：
- 主动监控，并提供告警功能
- 性能数据的采集，并提供慢会话的日志分析
- 错误，异常数据的采集
- 能重现用户行为
而目前，对于我们来说，需要做的前端监控包括：异常监控 ， 性能监控 ， 埋点监控
- 异常监控：由于前端代码的执行环境非常复杂，很难保证在不同的环境下不出现问题，而且有些问题往往是因为浏览器或者操作的原因，难以复现，所以我们需要收集异常数据，方便开发定位问题。
- 性能监控：主要包括监听网页或者说产品在用户端的体验。加载的延迟，操作的卡顿，尤其是在移动端，用户对页面相应延迟和连接中断的容忍度很低。
- 埋点监控：主要是用于还原用户行为，为业务方提供业务调整的方向和依据。
对于一个成熟的前端体系而言，一个靠谱的前端数据采集，上报，处理，监控报警平台也是非常有必要的。
我们需要收集哪些数据
根据上面说到的三个监控方向，我们需要的监控数据如下：
错误数据
- Ajax/Fetch 错误
- Promise 错误
- window.onerror 错误
- 静态资源加载错误
- 自定义错误
性能数据
性能数据包括：首屏时间，白屏时间，页面是否卡顿，页面加载所有资源的时间
用户行为数据
我们需要记录用户从进入页面，点击事件，滚动事件，离开页面等操作
其他数据
用户浏览器信息 , 用户硬件设备信息等等
整体架构设计
捕获数据
目前主流的监控工具库有 sentry,badjs.saiji 等等，经过充分调研后，认为 sentry 能够匹配我们的监控需求，但是由于 sentry 并不能完全满足我们的监控需求，所以我们对其进行了扩展。
实现捕获数据的基本原理如下：
- Ajax/Fetch 错误
通常是在 http 中使用中间件来处理，通过代理原生的 XHR 对象，以及原型方法和 Fetch 方法，来实现对 http 请求调用的拦截
- Promise 错误
通常是通过监听 unhandledrejection 来捕获 Promise 被 reject 但是没有 catch 的异常，并得到关于异常的信息
- window.onerror 错误
捕获全局异常，无论异步还是同步错误，onerror 都能捕获到运行时错误
- 静态资源加载错误
通常是通过 window.addEventListener('error', function(event) {...})来捕获
- 自定义错误
提供 capturenException 方法给用户主动上报错误
- 性能数据
通过 Performance API 获取页面性能
- 用户行为
记录用户从进入页面，点击事件，滚动事件，离开页面等操作
上报数据
- 避免频繁上报，即通过延时，且事件满足或者数量量达到上限之后，将这段时间的所有数据合并上报
- 避免数据丢失，即讲数据存储到本地，优先使用 indexDB, 并降级使用 localstorage，确保数据能离线存储
- 避免流量浪费，由于上报的数据包含大量的信息，如用户操作，异常信息等等，通过上报前的数据压缩，能极大地提高宽带利用率
Node server 中间层
- 与数据平台节藕，数据平台只需要关心数据的展示即可
- 上报的数据需要再次加工处理，比如通过前端上报的新鲜度时间，计算出实际的事件发生时间
大数据平台
通过该平台我们可以很直接地了解项目的各方面数据，以帮助我们作出决策
总结
目前监控系统已经广泛应用在团队的各个项目中，对了解项目性能，项目运行情况，管理项目等提供了很大的帮助，也方便团队做技术决策。