一種Vue應用程式錯誤/異常處理機制

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

現在構建前端應用程式不像以前那麼簡單，現在，應用程式更加複雜和多樣。這就需要在構建前端應用程式的時候考慮很多，錯誤/異常處理是最重要的方面之一。在應用程式中擁有良好的錯誤處理機制可以帶來很多的好處，如下：良好的錯誤處理機制可以避免應用程式在出現未處理的異常時崩潰在生產環境下，可以輕鬆地存儲或者跟蹤錯誤記錄日誌，以便異常的處理可以統一處理錯誤信息，例如在不破壞應用程式交互的情況下，更改錯誤信息展示UI在前端應用程式中，最常見的錯誤/異常類型可能包括以下幾種：有很多方法可以解決上面的問題，例如使用 eslint 來檢查語法錯誤，使用適當的 try-catch 語句處理運行時錯誤，通過適當的單頁或者集成測試減少邏輯錯誤，http 錯誤可以通過使用 Promise 來處理。全局配置vue 應用程式有一個全局配置 vue.config，可以配置禁止日誌和告警、devtools、錯誤處理程序等等。可以用自己的配置覆蓋這些配置，對於錯誤處理，可以為其分配一個處理函數 Vue.config.errorHandler。在整個應用程式中，任何 Vue實例（Vue組件）中的任何未捕獲異常都會調用該處理程序。以下代碼片段為Vue 應用程式註冊一個錯誤處理方法（一般在項目的 main.js 文件中）：

Vue.config.errorHandler = (error, vm, info) => {    console.info(error);    console.info(vm);    console.info(info);};
處理程序包含 3 個參數：
Vue.config.errorHandler 捕獲特定於Vue實例的錯誤，但無法捕獲 Vue 實例之外的錯誤，如服務。
要捕獲 Vue 實例之外的錯誤，可以使用 window.onerror 事件，可以註冊一個錯誤處理函數，該函數將捕獲所有非特定於 Vue 實例的未處理異常。下面的代碼片段為其應用註冊window.onerror 異常處理函數：
window.onerror = function(message, source, lineno, colno, error) {  };
自定義異常組件
通常項目中有一些可預知的異常需要自定義 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,     },};</script>
以上面的組件作為容器來加載其他組件，如通過後臺接口拉取列表數據，調用如下：
<QtErrorContainer :errors="errors">    <a-table ></a-table></QtErrorContainer>
上面的代碼在 errors 為 null 或者 false 的時候，顯示表格組件 <a-table></a-table>，否則不顯示而顯示異常信息。這樣實現好處就是所有可預知的異常都由統一的組件來處理，提高復用和靈活性。
日誌處理
對於日誌處理，可以封裝為一個獨立的類，如 logger ，負責收集Vue中所有的異常日誌，輸出到控制臺或者通過接口發送到伺服器存儲或藉助第三方日誌跟蹤平臺，只需要修改 logger 的處理方式即可，如下：
import { environment } from "@/environment/";
class Logger {        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 = () => {};                        this.toServer = (err) => {                console.error(err);            };        }    }}
const logger = new Logger();
export { logger };
可以將 logger 類引用到上面的全局配置的處理方法中，如下：
import Vue from "vue";import { logger } from "@/logger";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 使用生命周期鉤子的全局錯誤處理程序和自定義組件來處理可預知的異常。
本文提供了基本細節，藉助這些細節，可以輕鬆實現應用程式的錯誤處理並記錄它們，這將有助於創建更好的用戶體驗。
學習更多技能
請點擊下方公眾號