來自 | https://my.oschina.net/lav/blog/5146875

現(xiàn)在構(gòu)建前端應(yīng)用程序不像以前那么簡單，現(xiàn)在，應(yīng)用程序更加復(fù)雜和多樣。這就需要在構(gòu)建前端應(yīng)用程序的時候考慮很多，錯誤/異常處理是最重要的方面之一。在應(yīng)用程序中擁有良好的錯誤處理機(jī)制可以帶來很多的好處，如下：

良好的錯誤處理機(jī)制可以避免應(yīng)用程序在出現(xiàn)未處理的異常時崩潰
在生產(chǎn)環(huán)境下，可以輕松地存儲或者跟蹤錯誤記錄日志，以便異常的處理
可以統(tǒng)一處理錯誤信息，例如在不破壞應(yīng)用程序交互的情況下，更改錯誤信息展示UI
有助于改善用戶體驗(yàn)

在前端應(yīng)用程序中，最常見的錯誤/異常類型可能包括以下幾種：

語法錯誤：使用了一些錯誤的語法
運(yùn)行時錯誤：由于執(zhí)行期間的非法操作導(dǎo)致的
邏輯錯誤：由于程序邏輯錯誤
Http 錯誤：API 返回的錯誤

有很多方法可以解決上面的問題，例如使用 eslint 來檢查語法錯誤，使用適當(dāng)?shù)?try-catch 語句處理運(yùn)行時錯誤，通過適當(dāng)?shù)膯雾摶蛘呒蓽y試減少邏輯錯誤，http 錯誤可以通過使用 Promise 來處理。

全局配置

vue 應(yīng)用程序有一個全局配置 vue.config，可以配置禁止日志和告警、devtools、錯誤處理程序等等。

可以用自己的配置覆蓋這些配置，對于錯誤處理，可以為其分配一個處理函數(shù) Vue.config.errorHandler。

在整個應(yīng)用程序中，任何 Vue實(shí)例（Vue組件）中的任何未捕獲異常都會調(diào)用該處理程序。

以下代碼片段為Vue 應(yīng)用程序注冊一個錯誤處理方法（一般在項(xiàng)目的 main.js 文件中）：


/** * * @param {*} error 錯誤跟蹤 * @param {*} vm 組件錯誤 * @param {*} info 特定的錯誤信息，如生命周期鉤子、事件等。 */Vue.config.errorHandler = (error, vm, info) => {    console.info(error);    console.info(vm);    console.info(info);};

處理程序包含 3 個參數(shù)：

error：完整的錯誤跟蹤，包含 message 和 error stack
vm：發(fā)生錯誤的Vue組件/實(shí)例
info：特定的錯誤信息，例如生命周期鉤子、事件等。

Vue.config.errorHandler 捕獲特定于Vue實(shí)例的錯誤，但無法捕獲 Vue 實(shí)例之外的錯誤，如服務(wù)。

要捕獲 Vue 實(shí)例之外的錯誤，可以使用 window.onerror 事件，可以注冊一個錯誤處理函數(shù)，該函數(shù)將捕獲所有非特定于 Vue 實(shí)例的未處理異常。下面的代碼片段為其應(yīng)用注冊window.onerror 異常處理函數(shù)：


window.onerror = function(message, source, lineno, colno, error) {  // TODO: 定義跟蹤邏輯};

自定義異常組件

通常項(xiàng)目中有一些可預(yù)知的異常需要自定義 UI ，可以自定義異常組件來統(tǒng)一接管異常的處理。

實(shí)現(xiàn)的邏輯是如果有異常顯示異常信息，否則就顯示組件信息，代碼如下：


<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:"數(shù)據(jù)庫連接超時"}    },};</script>

以上面的組件作為容器來加載其他組件，如通過后臺接口拉取列表數(shù)據(jù)，調(diào)用如下：


<QtErrorContainer :errors="errors">    <a-table ></a-table></QtErrorContainer>

上面的代碼在 errors 為 null 或者 false 的時候，顯示表格組件 <a-table></a-table>，否則不顯示而顯示異常信息。這樣實(shí)現(xiàn)好處就是所有可預(yù)知的異常都由統(tǒng)一的組件來處理，提高復(fù)用和靈活性。

日志處理

對于日志處理，可以封裝為一個獨(dú)立的類，如 logger ，負(fù)責(zé)收集Vue中所有的異常日志，輸出到控制臺或者通過接口發(fā)送到服務(wù)器存儲或借助第三方日志跟蹤平臺，只需要修改 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 {            /** 在生產(chǎn)的情況下，替換函數(shù)定義 */            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 });};

總結(jié)

錯誤處理對于應(yīng)用程序非常重要，在本文中，討論了Vue.config.errorHandler 使用生命周期鉤子的全局錯誤處理程序和自定義組件來處理可預(yù)知的異常。

本文提供了基本細(xì)節(jié)，借助這些細(xì)節(jié)，可以輕松實(shí)現(xiàn)應(yīng)用程序的錯誤處理并記錄它們，這將有助于創(chuàng)建更好的用戶體驗(yàn)。

算法等重溫系列（16篇全）
5. Webpack4 入門（上）|| Webpack4 入門（下）
6. MobX 入門（上） || MobX 入門（下）
7. 120+篇原創(chuàng)系列匯總
回復(fù)“加群”與大佬們一起交流學(xué)習(xí)~
點(diǎn)擊“閱讀原文”查看 120+ 篇原創(chuàng)文章

【Vuejs】一種 Vue 應(yīng)用程序錯誤/異常處理機(jī)制

全局配置

自定義異常組件

日志處理

總結(jié)