Explain the exception handling mechanism of Vue in detail

Recently, a global filter needs to be added to the business, and 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 failure. In this process, I learned the exception handling mechanism of vue under 1.

errorCaptured, errorHandler

vue provides two API for exception capture, errorCaptured and errorHandler:

errorCaptured

errorCaptured is a hook function for a component that catches exceptions at the component level. When this hook function returns false, it prevents the exception from bubbling up one step, otherwise it will continue to be passed to the parent component until the root component.

errorHandler

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

error.js

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

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.$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)
}

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

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

The file is not long and exposes an handleError method that is called where exceptions need to be caught. In the handleError method, the component that reported the error is first obtained, then the parent component of the current component is recursively searched, and the errorCaptured method is called in turn. The globalHandleError method is called when all errorCaptured methods are traversed, or when the errorCaptured method reports an error.

The globalHandleError method calls the global errorHandler method.

What if the errorHandler method itself reports an error? console. error is used to output in the console in production environment.

It can be seen that the trigger timing of errorCaptured and errorHandler is the same, except that errorCaptured occurs before, and if the errorCaptured method of a component returns false, the exception information will not bubble up again and the errorHandler method will not be called again.

The above is a detailed explanation of the Vue exception handling mechanism in detail, more information about vue exception handling please pay attention to other related articles on this site!