一种Vue应用程序错误/异常处理机制
共 3778字,需浏览 8分钟
·
2021-08-05 19:25
来自 | https://my.oschina.net/lav/blog/5146875
良好的错误处理机制可以避免应用程序在出现未处理的异常时崩溃 在生产环境下,可以轻松地存储或者跟踪错误记录日志,以便异常的处理 可以统一处理错误信息,例如在不破坏应用程序交互的情况下,更改错误信息展示UI 有助于改善用户体验
语法错误:使用了一些错误的语法 运行时错误:由于执行期间的非法操作导致的 逻辑错误:由于程序逻辑错误 Http 错误:API 返回的错误
全局配置
/**
*
* @param {*} error 错误跟踪
* @param {*} vm 组件错误
* @param {*} info 特定的错误信息,如生命周期钩子、事件等。
*/
Vue.config.errorHandler = (error, vm, info) => {
console.info(error);
console.info(vm);
console.info(info);
};
处理程序包含 3 个参数:
error:完整的错误跟踪,包含 message 和 error stack
vm:发生错误的Vue组件/实例
info:特定的错误信息,例如生命周期钩子、事件等。
Vue.config.errorHandler 捕获特定于Vue实例的错误,但无法捕获 Vue 实例之外的错误,如服务。
要捕获 Vue 实例之外的错误,可以使用 window.onerror 事件,可以注册一个错误处理函数,该函数将捕获所有非特定于 Vue 实例的未处理异常。下面的代码片段为其应用注册window.onerror 异常处理函数:
window.onerror = function(message, source, lineno, colno, error) {
// TODO: 定义跟踪逻辑
};
自定义异常组件
通常项目中有一些可预知的异常需要自定义 UI ,可以自定义异常组件来统一接管异常的处理。
实现的逻辑是如果有异常显示异常信息,否则就显示组件信息,代码如下:
<template>
<div>
<slot v-if="errors" name="errors">
<a-alert
:message="errors.title"
:description="errors.description"
show-icon
type="warning"
class="mb-2"
>
</a-alert>
</slot>
<slot v-else></slot>
</div>
</template>
<script>
export default {
name: "QtErrorContainer",
props: {
errors: Object, // {title:"500错误",description:"数据库连接超时"}
},
};
</script>
以上面的组件作为容器来加载其他组件,如通过后台接口拉取列表数据,调用如下:
<QtErrorContainer :errors="errors">
<a-table ></a-table>
</QtErrorContainer>
上面的代码在 errors 为 null 或者 false 的时候,显示表格组件 <a-table></a-table>,否则不显示而显示异常信息。这样实现好处就是所有可预知的异常都由统一的组件来处理,提高复用和灵活性。
日志处理
对于日志处理,可以封装为一个独立的类,如 logger ,负责收集Vue中所有的异常日志,输出到控制台或者通过接口发送到服务器存储或借助第三方日志跟踪平台,只需要修改 logger 的处理方式即可,如下:
import { environment } from "@/environment/";
/**
* Logger 日志类
*/
class Logger {
/**
* @constructor AppLogger
*/
constructor() {
this.init();
}
init() {
if (environment !== "production") {
this.log = console.log.bind(console);
this.debug = console.debug.bind(console);
this.info = console.info.bind(console);
this.warn = console.warn.bind(console);
this.error = console.error.bind(console);
this.toServer = this.error;
} else {
/** 在生产的情况下,替换函数定义 */
this.log = this.debug = this.info = this.warn = this.error = () => {};
/** TODO: 方法中可以增加接口或者第三方平台跟踪的逻辑 */
this.toServer = (err) => {
console.error(err);
};
}
}
}
const logger = new Logger();
export { logger };
可以将 logger 类引用到上面的全局配置的处理方法中,如下:
import Vue from "vue";
import { logger } from "@/logger";
/**
*
* @param {*} error 错误跟踪
* @param {*} vm 组件错误
* @param {*} info 特定的错误信息,如生命周期钩子、事件等。
*/
Vue.config.errorHandler = (error, vm, info) => {
logger.toServer({ error, vm, info });
};
window.onerror = function (message, source, lineno, colno, error) {
logger.toServer({ message, source, lineno, colno, error });
};
总结
错误处理对于应用程序非常重要,在本文中,讨论了Vue.config.errorHandler 使用生命周期钩子的全局错误处理程序和自定义组件来处理可预知的异常。
本文提供了基本细节,借助这些细节,可以轻松实现应用程序的错误处理并记录它们,这将有助于创建更好的用户体验。
学习更多技能
请点击下方公众号