一种 Vue 应用程序错误 / 异常处理机制
现在构建前端应用程序不像以前那么简单,现在,应用程序更加复杂和多样。这就需要在构建前端应用程序的时候考虑很多,错误/异常处理是最重要的方面之一。在应用程序中拥有良好的错误处理机制可以带来很多的好处,如下:
良好的错误处理机制可以避免应用程序在出现未处理的异常时崩溃
在生产环境下,可以轻松地存储或者跟踪错误记录日志,以便异常的处理
可以统一处理错误信息,例如在不破坏应用程序交互的情况下,更改错误信息展示 UI
有助于改善用户体验
在前端应用程序中,最常见的错误/异常类型可能包括以下几种:
语法错误:使用了一些错误的语法
运行时错误:由于执行期间的非法操作导致的
逻辑错误:由于程序逻辑错误
Http 错误:API 返回的错误
有很多方法可以解决上面的问题,例如使用 eslint
来检查语法错误,使用适当的 try-catch
语句处理运行时错误,通过适当的单页或者集成测试减少逻辑错误,http
错误可以通过使用 Promise
来处理。
之前在文章《浅谈前端异常监控平台实现方案》中简单介绍前端异常监控的实现方案,在本文中,将推荐一种在 Vue 应用程序中实现错误/异常处理机制。
全局配置
Vue 应用程序有一个全局配置 Vue.config
,可以配置禁止日志和告警、devtools、错误处理程序等等。
可以用自己的配置覆盖这些配置,对于错误处理,可以为其分配一个处理函数 Vue.config.errorHandler
。在整个应用程序中,任何 Vue 实例(Vue 组件)中的任何未捕获异常都会调用该处理程序。以下代码片段为 Vue 应用程序注册一个错误处理方法(一般在项目的 main.js
文件中):
处理程序包含 3 个参数:
error
:完整的错误跟踪,包含message
和error stack
vm
:发生错误的 Vue 组件/实例info
: 特定的错误信息,例如生命周期钩子、事件等。
Vue.config.errorHandler
捕获特定于 Vue 实例的错误,但无法捕获 Vue 实例之外的错误,如服务。
要捕获 Vue 实例之外的错误,可以使用 window.onerror
事件,可以注册一个错误处理函数,该函数将捕获所有非特定于 Vue 实例的未处理异常。下面的代码片段为其应用注册window.onerror
异常处理函数:
自定义异常组件
通常项目中有一些可预知的异常需要自定义 UI ,可以自定义异常组件来统一接管异常的处理。实现的逻辑是如果有异常显示异常信息,否则就显示组件信息,代码如下:
以上面的组件作为容器来加载其他组件,如通过后台接口拉取列表数据,调用如下:
上面的代码在 errors
为 null
或者 false
的时候,显示表格组件 <a-table></a-table>
,否则不显示而显示异常信息。这样实现好处就是所有可预知的异常都由统一的组件来处理,提高复用和灵活性。
日志处理
对于日志处理,可以封装为一个独立的类,如 logger
,负责收集 Vue 中所有的异常日志,输出到控制台或者通过接口发送到服务器存储或借助第三方日志跟踪平台,只需要修改 logger
的处理方式即可,如下:
可以将 logger
类引用到上面的全局配置的处理方法中,如下:
总结
错误处理对于应用程序非常重要,在本文中,讨论了Vue.config.errorHandler
使用生命周期钩子的全局错误处理程序和自定义组件来处理可预知的异常。本文提供了基本细节,借助这些细节,可以轻松实现应用程序的错误处理并记录它们,这将有助于创建更好的用户体验。
版权声明: 本文为 InfoQ 作者【devpoint】的原创文章。
原文链接:【http://xie.infoq.cn/article/78942c825a02e6c628dfb852a】。文章转载请联系作者。
评论