详解Vue 的异常处理机制

 更新时间:2020年11月30日 09:35:38   作者:梅旭光  
这篇文章主要介绍了Vue 的异常处理机制,帮助大家更好的理解和学习vue框架,感兴趣的朋友可以了解下

最近需要在业务中加一个全局的 filter,filter 会对输入进行验证,用于进行前端监控。其中一个要处理的问题,就是验证失败后如何发送异常日志,这个过程中顺便了解了一下 vue 的异常处理机制。

errorCaptured、errorHandler

vue 提供了两个 API 用于异常的捕获,分别是 errorCaptured errorHandler

  1. errorCaptured

errorCaptured 是组件的一个钩子函数,用于在组件级别捕获异常。当这个钩子函数返回 false 时,会阻止异常进一步向上冒泡,否则会不断向父组件传递,直到 root 组件。

  1. errorHandler

errorHandler 是一个全局的配置项,用来在全局捕获异常。例如Vue.config.errorHandler = function (err, vm, info) {}。

error.js

在 vue 源码中,异常处理的逻辑放在 /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
 }
}

文件不长,向外暴露了一个 handleError 方法,在需要捕获异常的地方调用。handleError 方法中首先获取到报错的组件,之后递归查找当前组件的父组件,依次调用 errorCaptured 方法。在遍历调用完所有 errorCaptured 方法、或 errorCaptured 方法有报错时,会调用 globalHandleError 方法。

globalHandleError 方法调用了全局的 errorHandler 方法。

如果 errorHandler 方法自己又报错了呢?生产环境下会使用 console.error 在控制台中输出。

可以看到 errorCaptured 和 errorHandler 的触发时机都是相同的,不同的是 errorCaptured 发生在前,且如果某个组件的 errorCaptured 方法返回了 false,那么这个异常信息不会再向上冒泡也不会再调用 errorHandler 方法。

以上就是详解Vue 的异常处理机制的详细内容,更多关于vue 异常处理的资料请关注脚本之家其它相关文章!

相关文章

  • vue配置启动项目自动打开浏览器方式

    vue配置启动项目自动打开浏览器方式

    这篇文章主要介绍了vue配置启动项目自动打开浏览器方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue全局方法plugins/utils的实现示例

    vue全局方法plugins/utils的实现示例

    很多时候我们会在全局调用一些方法,本文主要介绍了vue全局方法plugins/utils的实现示例,具有一定的参考价值,感兴趣的可以了解一下
    2024-07-07
  • vue实现登录页背景粒子特效

    vue实现登录页背景粒子特效

    这篇文章主要为大家详细介绍了vue实现登录页背景粒子特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 详解vue 组件注册

    详解vue 组件注册

    这篇文章主要介绍了vue 组件注册的相关资料,帮助大家更好的理解和学习vue 组件的相关知识,感兴趣的朋友可以了解下
    2020-11-11
  • vue如何实现动态的选中状态切换效果

    vue如何实现动态的选中状态切换效果

    这篇文章主要介绍了vue如何实现动态的选中状态切换效果,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue组件中重新渲染的3种方式小结

    vue组件中重新渲染的3种方式小结

    本文主要介绍了vue组件中重新渲染的3种方式小结,主要包括改变key,v-if,vm.$forceUpdate()这三种,具有一定的参考价值,感兴趣的可以了解一下
    2023-10-10
  • vue-cli-service和webpack-dev-server的区别及说明

    vue-cli-service和webpack-dev-server的区别及说明

    这篇文章主要介绍了vue-cli-service和webpack-dev-server的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法

    Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法

    这篇文章主要介绍了VUE.js 中取得后台原生HTML字符串 原样显示问题 ,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • VUE3函数的声明和使用举例

    VUE3函数的声明和使用举例

    这篇文章主要给大家介绍了关于VUE3函数的声明和使用的相关资料, Vue3是一种流行的JavaScript框架,它允许开发人员构建现代化的Web应用程序,需要的朋友可以参考下
    2023-07-07
  • Vue项目保存代码之后页面自动更新问题

    Vue项目保存代码之后页面自动更新问题

    这篇文章主要介绍了Vue项目保存代码之后页面自动更新问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论