front-monitor

前端异常监控解决方案

对于运行在浏览器环境下的前端页面，通常可能出现的异常情况可分类列为：

• 语法错误
• 运行时同步异常
• 运行时异步异常
• Promise Unhandledrejection
• 资源加载失败
• 异步请求状态异常

其中语法错误不用过多关注，由于其在开发阶段在IDE下就能获得明确提示，而且无法通过构建(对于有构建阶段的项目而言)。

Promise Unhandledrejection 在通常情况下没有提供足够有用的异常信息，也无法确定开发人员是否关心此Promise调用链的意外结果，因此可作为监听异常中的可选项。

运行时异常

对于运行时异常，上报错误信息，脚本链接地址和错误代码所在的行与列，如果代码在上线前已经经过压缩混淆，则在拿到上报信息之后，需要找到脚本对应的map文件，结合source-map分析工具进行进一步的定位，所以确保脚本文件的链接中含有指纹码或其他类型的版本信息。

资源加载失败

对于资源加载相关的异常信息，需要注意的是在监控行为初始化完成之后才能捕获(通常的优化建议包含将页面上的所有脚本至于body底部)，对于前端渲染为主的项目而言几乎没有影响，服务器直出的项目则根据需要提升脚本在页面结构中的位置。
此外，某些浏览器环境下，没有append到真实DOM树中的DOM片段所发起的资源请求失败会被忽略。

异步请求状态异常

对于异步请求状态异常，我们hook了原生的XMLHttpRequest原型对象，并暂时不考虑低版本IE浏览器下的ActiveXObject，如果使用了第三方库作为AJAX方案，建议进行足够的测试保证它们仍能正常运作。

某些场景下，脚本可能会产生大量的异常，例如在scroll,resize之类高频执行的回调中抛出的错误，或者循环中发起请求等(可能是由无意或BUG导致)，因此异常上报需要有一定的过滤机制，例如缓冲，去重，自定义过滤(待补充)。

如何使用

通过script标签引用cdn文件

<script type="text/javascript" src="path/to/monitor.min.js"></script>
<script type="text/javascript">
    FrontMonitor(options)
</script>

通过npm引用

import FrontMonitor from '@nightlighting/frontend-monitor'

FrontMonitor(options)

options[配置项]

appId               String          项目id

reportUrl           String          上报地址，必填

reportFields        Array<String>   上报异常信息包含的字段名

sameOrigin          Boolean         是否只检测同源脚本异常，默认true

distinct            Boolean         是否对同一异常去重，默认true

cacheKey            String          缓存key

bufferTime          Number          缓冲时间(毫秒)

bufferSize          Number          缓存数量

xhrErrorLevel       String|RegExp   自定义AJAX的异常范围，用`/`隔开设定的状态码，例如"404/500/502"，或正则，默认为'ALL'表示非`200`之外的所有情况

xhrErrorMessage     String          业务api中的异常信息字段

catchUnhandledrejection Boolean 是否捕获Uncaught Promise Error，默认false

解决方案

TODO

• 监控后台，接入数据中心，通过设置的线上异常阈值，自动触发邮件/短信/im警报
• 接入sourceMap分析工具，自动对运行时异常进行定位，并生成报表
• 主动上报功能
• 上报信息与行为的扩展
• 联动nginx日志对资源异常进行分析

参考资料

https://sentry.io/
异常监控解决方案sentry

https://www.frontjs.com/app
前端异常监控FrontJs

https://github.com/BetterJS
腾讯前端异常监控体系BetterJS

http://taobaofed.org/blog/2015/10/28/jstracker-how-to-collect-data/
淘宝前端异常监控体系JSTracker

https://github.com/saijs
支付宝前端异常监控体系Sai

http://www.aliued.cn/2012/10/27/%E6%9E%84%E5%BB%BAweb%E5%89%8D%E7%AB%AF%E5%BC%82%E5%B8%B8%E7%9B%91%E6%8E%A7%E7%B3%BB%E7%BB%9F-fdsafe.html
阿里前端异常监控体系FdSafe