前端异常与监控

异常分类

1. 代码运行异常
2. 资源加载异常

异常捕获

try...catch

1. 无法捕捉到语法错误，只能捕捉运行时错误
2. 可以拿到出错的信息，堆栈，出错的文件、行号、列号
3. 需要借助工具把所有的function块以及文件块加入try,catch，可以在这个阶段打入更多的静态信息
4. 不能捕获异步的错误
5. finally语句会使try和catch里的return失效

window.onerror

1. 可以捕捉语法错误，也可以捕捉运行时错误
2. 可以拿到出错的信息，堆栈，出错的文件、行号、列号
3. 只要在当前页面执行的js脚本出错都会捕捉到，例如：浏览器插件的javascript、或者flash抛出的异常等
4. 跨域的资源需要特殊头部支持。
   • 客户端：在script标签增加crossorigin属性
   • 服务端：设置JS资源响应头Access-Control-Allow-Origin
5. 在window.onerror最后return true让浏览器不输出错误信息到控制台

Object.onerror

可以捕获资源加载错误

window.addEventListener('error', function (e) {
    console.log(e)
}, true/*！注意这是捕获阶段*/);

performance.getEntries()

返回一个成功加载资源的数组

promise.reject捕获

window.addEventListener('unhandledrejection', function (e) {
    console.log(e)//{reason:{stack}}
    return true
});

vue中的异常捕获

Vue.config.errorHandler = function (err, vm, info) {
  // handle error
  // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
  // 只在 2.2.0+ 可用
}

错误监控

实现一个错误监控的功能，首先捕获到各种错误，其次将错误发送到服务端

发送服务端的两种方式

1. ajax 调用错误收集接口传送错误数据
2. img标签,img.src="//path?message=&stack=&..."在onload里获取是否提交成功

成熟的前端监控方案

sentry 支持很多编程语言