浅析Vue中的2种错误处理方式、源码分析及2种错误捕获流程

// main.js
Vue.config.errorHandler = function (err, vm, info) {
  console.log('全局捕获 err >>>', err)
  console.log('全局捕获 vm >>>', vm)
  console.log('全局捕获 info >>>', info)
}

// App.vue
...
created () {
  const obj = {}
  // 直接在App组件的created钩子中尝试错误操作，调用obj中不存在的fn
  obj.fn()
},
methods: {
  handleClick () {
    // 绑定一个click事件，点击时触发
    const obj = {}
    obj.fn()
  }
}
...

// App.vue
<template>
  // 模版中引用子组件 HelloWorld
  <HelloWorld />
</template>
...
errorCaptured(err, vm, info) {
  // 添加errorCaptured钩子，其余跟上述案例一致
  console.log('父组件捕获 err >>>', err, vm, info)
}
...

// HelloWorld组件
...
created () {
  const child = {}
  // 直接在子组件的 created 中抛出错误，看看打印效果
  child.fn()
}
...

// 很明显，这个参数的就是我们熟悉的 err、vm、info
function handleError (err: Error, vm: any, info: string) {
  pushTarget()
  try {
    if (vm) {
      let cur = vm
      // 向上查找$parent，直到不存在
      // 注意了！一上来 cur 就赋值给 cur.$parent，所以 errorCaptured 不会在当前组件的错误捕获中执行
      while ((cur = cur.$parent)) {
        // 获取钩子errorCaptured
        const hooks = cur.$options.errorCaptured
        if (hooks) {
          for (let i = 0; i < hooks.length; i++) {
            try {
              // 执行errorCaptured
              const capture = hooks[i].call(cur, err, vm, info) === false
              // errorCaptured返回false，直接return，外层的globalHandleError不会执行
              if (capture) return
            } catch (e) {
              // 如果在执行errorCaptured的时候捕获到错误，会执行globalHandleError，此时的info为：errorCaptured hook
              globalHandleError(e, cur, 'errorCaptured hook')
            }
          }
        }
      }
    }
    // 外层，全局捕获，只要上面不return掉，就会执行
    globalHandleError(err, vm, info)
  } finally {
    popTarget()
  }
}

function invokeWithErrorHandling (
  handler: Function,
  context: any,
  args: null | any[],
  vm: any,
  info: string
) {
  let res
  try {
    // 处理handle的参数并调用
    res = args ? handler.apply(context, args) : handler.call(context)
    // 判断返回是否为Promise 且 未被catch(!res._handled)
    if (res && !res._isVue && isPromise(res) && !res._handled) {
      res.catch(e => handleError(e, vm, info + ` (Promise/async)`))
      // _handled标志置为true，避免嵌套调用时多次触发catch
      res._handled = true
    }
  } catch (e) {
    // 捕获错误后调用 handleError
    handleError(e, vm, info)
  }
  return res
}

function globalHandleError (err, vm, info) {
  if (config.errorHandler) {
    try {
      // 调用全局的 errorHandler 并return
      return config.errorHandler.call(null, err, vm, info)
    } catch (e) {
      // 翻译源码注释：如果用户故意在处理程序中抛出原始错误，不要记录两次      
      if (e !== err) {
        // 对在 globalHandleError 中的错误进行捕获，通过 logError 输出
        logError(e, null, 'config.errorHandler')
      }
    }
  }
  // 如果没有 errorHandler 全局捕获，则执行到这里，用 logError 错误
  logError(err, vm, info)
}

// logError源码实现
function logError (err, vm, info) {
  if (process.env.NODE_ENV !== 'production') {
    // 开发环境中使用 warn 对错误进行输出
    warn(`Error in ${info}: "${err.toString()}"`, vm)
  }
  /* istanbul ignore else */
  if ((inBrowser || inWeex) && typeof console !== 'undefined') {
    // 直接用 console.error 打印错误信息
    console.error(err)
  } else {
    throw err
  }
}

// 简单看看 warn 的实现
warn = (msg, vm) => {
  const trace = vm ? generateComponentTrace(vm) : ''
  if (config.warnHandler) {
    config.warnHandler.call(null, msg, vm, trace)
  } else if (hasConsole && (!config.silent)) {
    // 这就是我们平时常见的 Vue warn 打印报错的由来了！
    console.error(`[Vue warn]: ${msg}${trace}`)
  }
}

function callHook (vm, hook) {
  pushTarget();
  var handlers = vm.$options[hook];
  // info信息，这里是 created hook
  var info = hook + " hook";
  if (handlers) {
    for (var i = 0, j = handlers.length; i < j; i++) {
      // 直接调用invokeWithErrorHandling，传入对应的 cb
      invokeWithErrorHandling(handlers[i], vm, null, vm, info);
    }
  }
  if (vm._hasHookEvent) {
    vm.$emit('hook:' + hook);
  }
  popTarget();
}

function updateListeners () {
  // 这里的 cur 就是我们写在 methods 中的 handleClick
  cur = on[name] = createFnInvoker(cur, vm);
}

function createFnInvoker (fns, vm) {
  function invoker () {
    var arguments$1 = arguments;
    // 从 invoker 的静态属性 fns 获取方法
    var fns = invoker.fns;
    if (Array.isArray(fns)) {
      // 一个fns的新数组
      var cloned = fns.slice();
      for (var i = 0; i < cloned.length; i++) {
        // 对fns使用 invokeWithErrorHandling 进行包装
        invokeWithErrorHandling(cloned[i], null, arguments$1, vm, "v-on handler");
      }
    } else {
      // 这里也是一样的，只是对单一的fns使用 invokeWithErrorHandling 进行包装
      return invokeWithErrorHandling(fns, null, arguments, vm, "v-on handler")
    }
  }
  // 这里的fns，就是上面的cur，也就是我们的handleClick方法
  invoker.fns = fns;
  // 返回一个 invoker ，我们点击触发的其实是这个函数
  return invoker
}