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

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

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

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

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

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

全局配置

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

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

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

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

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

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

• error：完整的錯(cuò)誤跟蹤，包含 message 和 error stack

• vm：發(fā)生錯(cuò)誤的Vue組件/實(shí)例

• info：特定的錯(cuò)誤信息，例如生命周期鉤子、事件等。

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

要捕獲 Vue 實(shí)例之外的錯(cuò)誤，可以使用 window.onerror 事件，可以注冊一個(gè)錯(cuò)誤處理函數(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錯(cuò)誤",description:"數(shù)據(jù)庫連接超時(shí)"}    },};</script>

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

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

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

日志處理

對于日志處理，可以封裝為一個(gè)獨(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 錯(cuò)誤跟蹤 * @param {*} vm 組件錯(cuò)誤 * @param {*} info 特定的錯(cuò)誤信息，如生命周期鉤子、事件等。 */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é)

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

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

學(xué)習(xí)更多技能

請點(diǎn)擊下方公眾號