构建前端异常监控系统

背景

最近，刚到新公司，对公司产品进行前端重构；在来公司近一个月中，发现以前产品问题很多，尤其兼容性问题等；在以前项目中也会经常遇到，可能因为某个兼容性问题，导致js代码出错，从而导致整个应用无法运行；但市场上，无论是pc端还是移动端，会有各种不同的系统，不同的浏览器内核，不管是从开发还是测试，都无法完全去兼容和测试所有系统的问题；

所以，使用一个方法能够尽快的定位错误问题就变的紧急及必需；在有一天，看到有一篇专门谈“前端异常监控”的文章，在以前，也有关注此问题，但是从来没有真正去实现过。这次，借助重构机会，在新的架构中，进行前端异常监控系统的搭建，从而能够更快，更好的定位错误，能够更及时的处理错误；

实现功能

为了能够达到以上目的，异常监控系统至少应该包含以下几个基础功能：

前端错误日志收集，包括通过及报出的错误信息；

保存开发过程中的自定义错误，如、调用第三方功能错误等；

后台保存日志数据(目前通过日志文件进行保存，根据日期，每天一个日志文件保存)；

后台对source map压缩文件进行还原定位处理；

日志查看，能够通过日期，快速、简明的查看每天的日志数据；

用户行为简单跟踪，主要包括点击、输入等操作；

因为错误发生原因很多，为了能够更好的定位错误发生原因及触发发生的时机，后面添加了用户行为跟踪数据，主要包括点击、输入等操作；

日志接口数据

前端错误拦截

对进行拦截，方法是通过变量保存原生onerror方法，然后，重新定义onerror方法，在方法中进行错误拦截，然后再重新调用保存下的原生方法；对使用同理方式处理即可；详细源码可见：debug.js;

而对错误信息，会进行转化，返回最终的错误相关数据；包括错误的行数、列数、错误消息、错误文件等；

对用户行为进行获取

用户行为包括用户的点击、输入等各种事件操作行为，所以，为了获取相关行为数据，必须去拦截所有页面上已经定义的操作事件，并在拦截函数中，获取相关的行为数据，这儿使用了进行拦截，相关api说明可见：EventTarget；

后台处理保存日志数据

后台主要对错误日志进行处理及保存，在处理时，需要处理将压缩、webpack编译过的错误文件能够精确定位的处理，就是如何才能从压缩过或者编译过的文件中，精确定位真正的错误文件呢？在浏览器中，如果你在打包时，开启了source map，它就可以进行精确定位；同理，可以使用source map，根据前端传的行数和列数，就可以进行精确定位；api参见：source-map；更多源代码见：server.js

最后，就是将日志信息通过页面进行展示，能够更加简单的查看；