Detailed explanation of Vue's exception handling mechanism

Recently, a global filter is needed to add to the business. The filter will verify the input for front-end monitoring. One of the problems to be dealt with is how to send exception logs after verification failed. During this process, I learned about the exception handling mechanism of vue.

errorCaptured、errorHandler

vue provides two APIs for exception capture, namelyerrorCaptured anderrorHandler：

1. errorCaptured

errorCaptured is a hook function of the component that is used to catch exceptions at the component level. When this hook function returns false, it prevents the exception from bubbled up further, otherwise it will be passed to the parent component until the root component.

1. errorHandler

errorHandler is a global configuration item used to catch exceptions globally. For example = function (err, vm, info) {}.

In the vue source code, the logic for exception handling is placed in /src/core/util/:

import config from '../config'
import { warn } from './debug'
import { inBrowser } from './env'

export function handleError (err: Error, vm: any, info: string) {
 if (vm) {
  let cur = vm
  while ((cur = cur.$parent)) {
   const hooks = cur.$
   if (hooks) {
    for (let i = 0; i < ; 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)
}

function globalHandleError (err, vm, info) {
 if () {
  try {
   return (null, err, vm, info)
  } catch (e) {
   logError(e, null, '')
  }
 }
 logError(err, vm, info)
}

function logError (err, vm, info) {
 if (.NODE_ENV !== 'production') {
  warn(`Error in ${info}: "${()}"`, vm)
 }
 /* istanbul ignore else */
 if (inBrowser && typeof console !== 'undefined') {
  (err)
 } else {
  throw err
 }
}

The file is not long, and a handleError method is exposed to the outside, called where the exception needs to be caught. The handleError method first gets the component that reports an error, then recursively searches for the parent component of the current component, and calls the errorCaptured method in turn. When all errorCaptured methods or errorCaptured methods are called after traversal call, the globalHandleError method will be called.

The globalHandleError method calls the global errorHandler method.

What if the errorHandler method reports an error again? It will be used in production environment output in the console.

You can see that the triggering times of errorCaptured and errorHandler are the same. The difference is that errorCaptured occurs first, and if the errorCaptured method of a certain component returns false, then the exception information will no longer bubble upwards and will no longer call the errorHandler method.

The above is a detailed explanation of Vue's exception handling mechanism. For more information about vue exception handling, please pay attention to my other related articles!