由于当前国内测试行业的未技术化，特别是对前端测试的忽略，大多数公司的还是停留在以人力+人肉进行前端的测试，虽然大部分情况下可以暴露出大部分的问题，但是有一些网页的异常报错，测试人员并不会注意到或者没办法还原错误操作和环境等。所以，前端能够通过在自己项目代码里自动监听 -> 捕获 -> 记录 -> 存储到数据库。再通过创建dashboard获取异常数据，就可以实现云异常监控了。
解决方案
实现异常的监控整体思路:
通过监听异常，当未达到页面错误记录数时先记录错误日志（此处可以通过throttle函数来优化，防止当页面密集报错时候，频繁请求）。错误日志包含发生的日期，错误类型（runtime或resource）,UA(快速定位错误发生环境),referrer和url(了解用户的操作流程)。当达到错误日志上限或在一段时间内无监测到其他异常错误时候则向服务端发送请求记录该页面错误。
javascript 运行时的异常报错监控
runtime error是比较严重的。对于同一段js代码，js报错常常会导致代码的中断且不会再向下执行。所以在测试环境中，大部分的runtime error是会被
暴露出来的，否则可能会导致整个页面的流程无法进行。但是由于纯人力+人肉的测试，难免有特殊的环境会导致运行的错误。
window.onerror
window.onerror = function(messageOrEvent, source, lineno, colno, error)
{ ... }
window.onerror是js运行时错误的一个监听处理函数,当js的语法错误或程序中抛出异常时触发，触发时候会返回一个errorEvent对象。对象包含错误信息，错误的目标来源，行数，列数及错误对象(对象包含堆栈信息)
document 资源加载错误的监控
页面资源加载失败，是测试环境比较难测试出来的，往往资源加载失败是因为用户网络问题或服务端或cdn服务商的服务问题等。这种问题的环境相对比较难以还原。
target.addEventListener(type, listener[, options]);
通过对window.addEventListener(‘error’, handler, true)的监听，可以监听到包含运行时错误及资源加载失败的错误,所以当对两者同时使用时，需要过滤掉运行时错误避免重复记录可以通过下面的方式过滤掉运行时错误
handler = function(err){
if(err.target !== window){
//过滤掉window的运行时错误
}
}
err.target.nodeName可以获取到未加载成功的资源的节点名字;
err.target.src可以记录未加载成功资源的资源路径
黑科技—针对vue报错的监控
因为当前业务基于vue，但由于vue的内部机制，并不能通过以上两种方法获取到它抛出的异常。下面教大家使用黑科技—通过重写console.error方法来达到记录错误日志。
console.error = (function(origin){ return function(errorlog) { handler();//基于业务的日志记录及数据报错 origin.call(console,errorlog); } })(console.error);
兼容&常见问题
##Script error. 无法记录到异常信息
1.当页面的js来自cdn，在chrome和firefox无法捕捉到异常信息
2.跨域，在cdn服务器上设置Access-Control-Allow-Origin可能会起效
3.通过设置该属性可能可以解决
