-
Notifications
You must be signed in to change notification settings - Fork 1.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
面试官:你是怎么处理vue项目中的错误的? #32
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
一、错误类型
任何一个框架,对于错误的处理都是一种必备的能力
在
Vue
中,则是定义了一套对应的错误处理规则给到使用者,且在源代码级别,对部分必要的过程做了一定的错误处理。主要的错误来源包括:
二、如何处理
后端接口错误
通过
axios
的interceptor
实现网络请求的response
先进行一层拦截代码逻辑问题
全局设置错误处理
设置全局错误处理函数
errorHandler
指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时,可获取错误信息和Vue
实例不过值得注意的是,在不同
Vue
版本中,该全局API
作用的范围会有所不同:生命周期钩子
errorCaptured
是 2.5.0 新增的一个生命钩子函数,当捕获到一个来自子孙组件的错误时被调用基本类型
此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回
false
以阻止该错误继续向上传播参考官网,错误传播规则如下:
config.errorHandler
被定义,所有的错误仍会发送它,因此这些错误仍然会向单一的分析服务的地方进行汇报errorCaptured
钩子,则它们将会被相同的错误逐个唤起。errorCaptured
钩子自身抛出了一个错误,则这个新错误和原本被捕获的错误都会发送给全局的config.errorHandler
errorCaptured
钩子能够返回false
以阻止错误继续向上传播。本质上是说“这个错误已经被搞定了且应该被忽略”。它会阻止其它任何会被这个错误唤起的errorCaptured
钩子和全局的config.errorHandler
下面来看个例子
定义一个父组件
cat
定义一个子组件
kitten
,其中dontexist()
并没有定义,存在错误页面中使用组件
在父组件的
errorCaptured
则能够捕获到信息三、源码分析
异常处理源码
源码位置:/src/core/util/error.js
小结
handleError
在需要捕获异常的地方调用,首先获取到报错的组件,之后递归查找当前组件的父组件,依次调用errorCaptured
方法,在遍历调用完所有errorCaptured
方法或errorCaptured
方法有报错时,调用globalHandleError
方法globalHandleError
调用全局的errorHandler
方法,再通过logError
判断环境输出错误信息invokeWithErrorHandling
更好的处理异步错误信息logError
判断环境,选择不同的抛错方式。非生产环境下,调用warn
方法处理错误参考文献
https://juejin.cn/post/6844904096936230925
https://segmentfault.com/a/1190000018606181
The text was updated successfully, but these errors were encountered: