远程call带try异常保护_异常哪里跑？

运行在用户浏览器环境下的前端项目中，可能会产生各种异常。要监控前端的运行稳定性，异常的捕获上报并收集数据进行分析是必要的一个环节。某次线上的异常捕获问题引起了笔者的关注，就顺便对项目中可用的异常捕获流程进行了研究。

问题背景

某段时间，在我们的前端监控系统中一直会捕获到一个错误，错误内容是 "Cannot read property '$refs' of undefined"。但是在本地开发环境中构建运行线上分支时，没有看到任何错误信息被抛出，因此一度以为本地无法复现问题。

实际上，换个角度想就不难理解了。既然监控系统能收集到错误的具体信息，说明这些信息应该被前端代码中使用的监控平台 SDK 捕获并通过 HTTP 请求将错误信息从浏览器发到了后台。因此被捕获的错误没有在控制台抛出是正常的。查看请求列表果然找到了相关的请求：

Vue 的异常捕获机制

由于上文提到的项目是基于 Vue 开发的，这里就来谈谈 Vue 如何进行异常的捕获。

对于 2.4.0+ 版本的 Vue，会捕获组件的渲染和观察期间、生命周期钩子中以及自定义事件处理函数内部的异常。这些捕获点在通过 try-catch 语句捕获到异常后，会通过 handleError 工具函数统一处理异常，这个工具函数定义在源码中的 /src/core/util/error.js 中：

export function handleError (err: Error, vm: any, info: string) {
  if (vm) {
    let cur = vm
    while ((cur = cur.$parent)) {
      const hooks = cur.$options.errorCaptured
      if (hooks) {
        for (let i = 0; i < hooks.length; i++) {
          try {
            const capture = hooks[i].call(cur, err, vm, info) === false
            if (capture) return
          } catch (e) {
            globalHandleError(e, cur, 'errorCaptured hook')
          }
        }
      }
    }
  }
  globalHandleError(err, vm, info)
}

可以看到，对于捕获到的异常，首先会查找抛出异常 Vue 组件实例的 errorCaptured 钩子（2.5.0+ 版本新增），并沿父组件的路径依次调用 errorCaptured 钩子（如果有的话）。如果 errorCaptured 钩子没有返回 false 来阻止异常继续传播，或是干脆没有提供 errorCaptured 钩子的话，则会将异常交由通用处理函数 globalHandleError 进行处理。如果提供了全局错误处理函数 errorHandler 的话，就会调用该函数，如果没有提供，或是在执行 errorHandler 函数时又抛出了错误，则会直接将异常打印在控制台上，如果运行在非浏览器环境中，则直接抛出错误。

实现错误上报服务

我们可以利用 Vue 的异常捕获机制实现自己的错误上报服务。实现思路也很简单，只需要劫持原有的 errorHandler 函数，保存原来的函数引用，取得传入的参数，执行上报逻辑后再继续执行原函数引用即可。

以错误追踪服务 Sentry 为例，它在为 Vue 项目提供的前端 SDK 中实现劫持逻辑的代码如下：

function vuePlugin(Raven, Vue) {
  Vue = Vue || window.Vue;
​
  // quit if Vue isn't on the page
  if (!Vue || !Vue.config) return;
​
  var _oldOnError = Vue.config.errorHandler;
  Vue.config.errorHandler = function VueErrorHandler(error, vm, info) {
    var metaData = {};
​
    // vm and lifecycleHook are not always available
    if (Object.prototype.toString.call(vm) === '[object Object]') {
      metaData.componentName = formatComponentName(vm);
      metaData.propsData = vm.$options.propsData;
    }
​
    if (typeof info !== 'undefined') {
      metaData.lifecycleHook = info;
    }
​
    Raven.captureException(error, {
      extra: metaData
    });
​
    if (typeof _oldOnError === 'function') {
      _oldOnError.call(this, error, vm, info);
    }
  };
}

它将全局配置下的 errorHandler 的引用保存于 _oldOnError 变量，并在最后通过 _oldOnError.call(this, error, vm, info) 语句执行原函数，在无感知的情况下完成了异常信息的上报。

然而，以上代码只能完成 Vue 组件内部的错误上报，并不能覆盖全局，要实现浏览器中全局的异常捕获，还需要填补一些“漏洞”。

window.onerror

首先处理这个全局 onerror 事件，处理方式和 Vue 的 errorHandler 一样劫持即可：

const _window = window
const _oldOnerrorHandler = _window.onerror
_window.onerror = customOnerrorHandler // 自定义的 onerror 函数

promise catch

当代码中的 promise reject 的时候，onerror 是捕获不到异常的。对于 promise reject 的异常，除了对每个用到 promise 的地方都加上 catch 之外，我们还应该在全局环境下进行一个兜底。

我们可以监听全局 unhandledrejection 事件：

window.addEventListener('unhandledrejection', (e) => {
  console.log(e)
})

如果要阻止异常输出到控制台上，可以加上 e.preventDefault()。

网页崩溃

对于网页崩溃的监控， @寸志 老师总结的一篇文章叙述得比较详细，可以参考这篇：https://zhuanlan.zhihu.com/p/40273861。

总结

浏览器环境中的错误监控有很多方面的工作要做，本文只是抛砖引玉，在具体实现过程中会有很多细节要处理。另外也推荐使用成熟的开源监控系统，例如 Sentry。可以节省很多时间将精力放在业务开发上。