最近需要在業(yè)務(wù)中加一個(gè)全局的 filter，filter 會(huì)對(duì)輸入進(jìn)行驗(yàn)證，用于進(jìn)行前端監(jiān)控。其中一個(gè)要處理的問(wèn)題，就是驗(yàn)證失敗后如何發(fā)送異常日志，這個(gè)過(guò)程中順便了解了一下 vue 的異常處理機(jī)制。

errorCaptured、errorHandler

vue 提供了兩個(gè) API 用于異常的捕獲，分別是 errorCaptured 和 errorHandler：

errorCaptured 是組件的一個(gè)鉤子函數(shù)，用于在組件級(jí)別捕獲異常。當(dāng)這個(gè)鉤子函數(shù)返回 false 時(shí)，會(huì)阻止異常進(jìn)一步向上冒泡，否則會(huì)不斷向父組件傳遞，直到 root 組件。

errorHandler 是一個(gè)全局的配置項(xiàng)，用來(lái)在全局捕獲異常。例如Vue.config.errorHandler = function (err, vm, info) {}。

error.js

在 vue 源碼中，異常處理的邏輯放在 /src/core/util/error.js 中：

import config from ’../config’import { warn } from ’./debug’import { inBrowser } from ’./env’export function handleError (err: Error, vm: any, info: string) { if (vm) { let cur = vm while ((cur = cur.$parent)) { const hooks = cur.$options.errorCaptured if (hooks) { for (let i = 0; i < hooks.length; i++) { try { const capture = hooks[i].call(cur, err, vm, info) === false if (capture) return } catch (e) { globalHandleError(e, cur, ’errorCaptured hook’) } } } } } globalHandleError(err, vm, info)}function globalHandleError (err, vm, info) { if (config.errorHandler) { try { return config.errorHandler.call(null, err, vm, info) } catch (e) { logError(e, null, ’config.errorHandler’) } } logError(err, vm, info)}function logError (err, vm, info) { if (process.env.NODE_ENV !== ’production’) { warn(`Error in ${info}: '${err.toString()}'`, vm) } /* istanbul ignore else */ if (inBrowser && typeof console !== ’undefined’) { console.error(err) } else { throw err }}

文件不長(zhǎng)，向外暴露了一個(gè) handleError 方法，在需要捕獲異常的地方調(diào)用。handleError 方法中首先獲取到報(bào)錯(cuò)的組件，之后遞歸查找當(dāng)前組件的父組件，依次調(diào)用 errorCaptured 方法。在遍歷調(diào)用完所有 errorCaptured 方法、或 errorCaptured 方法有報(bào)錯(cuò)時(shí)，會(huì)調(diào)用 globalHandleError 方法。

globalHandleError 方法調(diào)用了全局的 errorHandler 方法。

如果 errorHandler 方法自己又報(bào)錯(cuò)了呢？生產(chǎn)環(huán)境下會(huì)使用 console.error 在控制臺(tái)中輸出。

可以看到 errorCaptured 和 errorHandler 的觸發(fā)時(shí)機(jī)都是相同的，不同的是 errorCaptured 發(fā)生在前，且如果某個(gè)組件的 errorCaptured 方法返回了 false，那么這個(gè)異常信息不會(huì)再向上冒泡也不會(huì)再調(diào)用 errorHandler 方法。

以上就是詳解Vue 的異常處理機(jī)制的詳細(xì)內(nèi)容，更多關(guān)于vue 異常處理的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！