1. ErrorCaptured Hooks catch errors inside components

ErrorCaptured is an internal hook that is called when an error is captured from a descendant component, receives error, VM, or INFO, and returns false to prevent the error from being thrown upward

export default{
  data(){},
  methods: {},created(){},
  mounted(){},
  /** * Three parameters are received: the error object, the component instance where the error occurred, and a string containing information about the source of the error. * This hook can return false to prevent further propagation of the error. * /
  errorCaptured(err, vm, info){
    console.log(err)
    // -> Error return
    console.log(vm)
    // -> vue instance
    console.log(info)
    // -> Which hook failed
    return false}}Copy the code

2. ErrorHandler Indicates a global error

ErrorHandler is a global hook and is configured using vue.config. errorHandler. ErrorHandler is captured after 2.6, and is used to capture errors in V-ON and Promise chains

/** * Three parameters are received: the error object, the component instance where the error occurred, and a string containing information about the source of the error. * /
Vue.config.errorHandler = function (err, vm, info) {}Copy the code

On the official website, error propagation rules are as follows:

1. By default, if the global config.errorHandler is defined, all errors will still be sent to it, so these errors will still be reported to a single analysis service place

2. If there are multiple errorCaptured hooks in a component’s descendant or parent slave links, they are all triggered one by one by the same error.

3. If the errorCaptured hook throws an error itself, both the new and captured errors are sent to the global config.errorHandler

4. An errorCaptured hook returns false to prevent an error from escalating. Essentially saying “This error has been fixed and should be ignored”. It prevents errorCaptured hooks and the global config.errorHandler that are triggered by this error