Front-end exception monitoring
npm install frontend-monitorjsscroll,resize之类高频执行的回调中抛出的错误,或者循环中发起请求等(可能是由无意或BUG导致),因此异常上报需要有一定的过滤机制,例如缓冲,去重,自定义过滤(待补充)。
script标签引用cdn文件
html
`
通过npm引用
`javascript
import FrontMonitor from '@nightlighting/frontend-monitor'
FrontMonitor(options)
`
options[配置项]
`javascript
appId String 项目id
reportUrl String 上报地址,必填
reportFields Array 上报异常信息包含的字段名
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
`
$3
TODO
* 监控后台,接入数据中心,通过设置的线上异常阈值,自动触发邮件/短信/im警报
* 接入sourceMap分析工具,自动对运行时异常进行定位,并生成报表
* 主动上报功能
* 上报信息与行为的扩展
* 联动nginx日志对资源异常进行分析
$3
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`