前端代码异常监控实战

本文大致围绕下面几点展开讨论：

1. JS 处理异常的方式

2. 上报方式

3. 异常监控上报常见问题

JS 异常处理

对于 Javascript 而言，我们面对的仅仅只是异常，异常的出现不会直接导致 JS 引擎崩溃，最多只会使当前执行的任务终止。

1. 当前代码块将作为一个任务压入任务队列中，JS 线程会不断地从任务队列中提取任务执行。

2. 当任务执行过程中出现异常，且异常没有捕获处理，则会一直沿着调用栈一层层向外抛出，最终终止当前任务的执行。

3. JS 线程会继续从任务队列中提取下一个任务继续执行。

<script>
error
console.log('永远不会执行');
</script>
<script>
console.log('我继续执行')
</script>

在对脚本错误进行上报之前，我们需要对异常进行处理，程序需要先感知到脚本错误的发生，然后再谈异常上报。

脚本错误一般分为两种：语法错误，运行时错误。

下面就谈谈几种异常监控的处理方式：

try-catch 异常处理

try-catch 在我们的代码中经常见到，通过给代码块进行 try-catch 进行包装后，当代码块发生出错时 catch 将能捕捉到错误的信息，页面也将可以继续执行。

但是 try-catch 处理异常的能力有限，只能捕获捉到运行时非异步错误，对于语法错误和异步错误就显得无能为力，捕捉不到。

示例：运行时错误

try {
error    // 未定义变量
} catch(e) {
console.log('我知道错误了');
console.log(e);
}

步错误就捕捉不到了。

示例：语法错误

try {var error = 'error'；// 大写分号} catch(e) {console.log('我感知不到错误');console.log(e);}

 

一般语法错误在编辑器就会体现出来，常表现的错误信息为：

Uncaught SyntaxError: Invalid or unexpected token xxx

这样。但是这种错误会直接抛出异常，常使程序崩溃，一般在编码时候容易观察得到。

 

示例：异步错误

try {setTimeout(() => {error // 异步错误})} catch(e) {console.log('我感知不到错误');console.log(e);}

除非你在 setTimeout 函数中再套上一层 try-catch，否则就无法感知到其错误，但这样代码写起来比较啰嗦。

window.onerror 异常处理

window.onerror 捕获异常能力比 try-catch 稍微强点，无论是异步还是非异步错误，onerror 都能捕获到运行时错误。

示例：运行时同步错误

/*** @param {String} msg 错误信息* @param {String} url 出错文件* @param {Number} row 行号* @param {Number} col 列号* @param {Object} error 错误详细信息*/window.onerror = function (msg, url, row, col, error) {console.log('我知道错误了');console.log({msg, url, row, col, error})return true;};error;

示例：异步错误

window.onerror = function (msg, url, row, col, error) {console.log('我知道异步错误了');console.log({msg, url, row, col, error})return true;};setTimeout(() => {error;});

然而 window.onerror 对于语法错误还是无能为力，所以我们在写代码的时候要尽可能避免语法错误的，不过一般这样的错误会使得整个页面崩溃，还是比较容易能够察觉到的。

在实际的使用过程中，onerror 主要是来捕获预料之外的错误，而 try-catch 则是用来在可预见情况下监控特定的错误，两者结合使用更加高效。

需要注意的是，window.onerror 函数只有在返回 true 的时候，异常才不会向上抛出，否则即使是知道异常的发生控制台还是会显示

Uncaught Error: xxxxx

。

关于 window.onerror 还有两点需要值得注意

1. 对于 onerror 这种全局捕获，最好写在所有 JS 脚本的前面，因为你无法保证你写的代码是否出错，如果写在后面，一旦发生错误的话是不会被 onerror 捕获到的。

2. 另外 onerror 是无法捕获到网络异常的错误。

当我们遇到

<img src="./404.png">

报 404 网络请求异常的时候，onerror 是无法帮助我们捕获到异常的。

 

<script>window.onerror = function (msg, url, row, col, error) {console.log('我知道异步错误了');console.log({msg, url, row, col, error})return true;};</script><img src="./404.png">

由于网络请求异常不会事件冒泡，因此必须在捕获阶段将其捕捉到才行，但是这种方式虽然可以捕捉到网络请求的异常，但是无法判断 HTTP 的状态是 404 还是其他比如 500 等等，所以还需要配合服务端日志才进行排查分析才可以。

<script>window.addEventListener('error', (msg, url, row, col, error) => {console.log('我知道 404 错误了');console.log(msg, url, row, col, error);return true;}, true);</script><img src="./404.png" alt="">

这点知识还是需要知道，要不然用户访问网站，图片 CDN 无法服务，图片加载不出来而开发人员没有察觉就尴尬了。

Promise 错误

通过 Promise 可以帮助我们解决异步回调地狱的问题，但是一旦 Promise 实例抛出异常而你没有用 catch 去捕获的话，onerror 或 try-catch 也无能为力，无法捕捉到错误。

window.addEventListener('error', (msg, url, row, col, error) => {console.log('我感知不到 promise 错误');console.log(msg, url, row, col, error);}, true);Promise.reject('promise error');new Promise((resolve, reject) => {reject('promise error');});new Promise((resolve) => {resolve();}).then(() => {throw 'promise error'});

虽然在写 Promise 实例的时候养成最后写上 catch 函数是个好习惯，但是代码写多了就容易糊涂，忘记写 catch。

所以如果你的应用用到很多的 Promise 实例的话，特别是你在一些基于 promise 的异步库比如 axios 等一定要小心，因为你不知道什么时候这些异步请求会抛出异常而你并没有处理它，所以你最好添加一个 Promise 全局异常捕获事件 unhandledrejection。

window.addEventListener("unhandledrejection", function(e){e.preventDefault()console.log('我知道 promise 的错误了');console.log(e.reason);return true;});Promise.reject('promise error');new Promise((resolve, reject) => {reject('promise error');});new Promise((resolve) => {resolve();}).then(() => {throw 'promise error'});

vue项目的异常处理

vue提供了一个全局配置 errorHandle,，用于收集Vue运行时发生的错误。

Vue.config.errorHandler = function (err, vm, info) {  // handle error  // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子  // 只在 2.2.0+ 可用 let componentName = formatComponentName(vm);}// 获取组件的名称  function formatComponentName(vm) {    if (vm.$root === vm) return 'root';    let name = vm._isVue      ? (vm.$options && vm.$options.name) ||      (vm.$options && vm.$options._componentTag)      : vm.name;    return (      (name ? 'component <' + name + '>' : 'anonymous component') +      (vm._isVue && vm.$options && vm.$options.__file        ? ' at ' + (vm.$options && vm.$options.__file)        : '')    );  }

拿到vue对应的实例之后，就可以获取vue对应的组件名称，定位到是哪一个组件报错；

 

异常上报方式

监控拿到报错信息之后，接下来就需要将捕捉到的错误信息发送到信息收集平台上，常用的发送形式主要有两种:

1. 通过 Ajax 发送数据

2. 动态创建 img 标签的形式

实例 - 动态创建 img 标签进行上报

function report(error) {var reportUrl = 'http://xxxx/report';new Image().src = reportUrl + 'error=' + error;}