Vue3 全局錯誤處理詳解與示例
更新時間：2026年02月27日 16:41:40 作者：UrbanJazzerati
本文展示一個完整的 Vue 3 全局錯誤處理模塊,用于捕獲和處理應(yīng)用中的各種錯誤,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
本文展示一個完整的 Vue 3 全局錯誤處理模塊，用于捕獲和處理應(yīng)用中的各種錯誤。讓我詳細(xì)解釋每個部分并提供實際示例。
一、模塊結(jié)構(gòu)解析
1.1 模塊導(dǎo)覽
// 文件結(jié)構(gòu) utils/sys/error-handle.ts ├── vueErrorHandler() // Vue 組件錯誤處理 ├── scriptErrorHandler() // JavaScript 全局錯誤處理 ├── registerPromiseErrorHandler() // Promise 錯誤處理 ├── registerResourceErrorHandler() // 資源加載錯誤處理 └── setupErrorHandle() // 安裝所有錯誤處理器
二、各功能詳解與示例
2.1 Vue 運(yùn)行時錯誤處理 (vueErrorHandler)
作用：捕獲 Vue 組件中的錯誤，包括：
- 組件渲染錯誤
- 生命周期鉤子錯誤
- 事件處理器錯誤
- 計算屬性錯誤
<!-- 示例：故意制造錯誤的組件 -->
<template>
<div>
<!-- 1. 渲染錯誤 -->
<div>{{ undefinedVariable }}</div> <!-- 訪問未定義的變量 -->
<!-- 2. 方法調(diào)用錯誤 -->
<button @click="throwError">點(diǎn)擊拋出錯誤</button>
<!-- 3. 計算屬性錯誤 -->
<p>{{ computedError }}</p>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
// 4. 生命周期錯誤
onMounted(() => {
// 故意拋出錯誤
throw new Error('生命周期鉤子錯誤！')
})
const throwError = () => {
// 5. 事件處理器錯誤
throw new Error('按鈕點(diǎn)擊錯誤！')
}
const computedError = computed(() => {
// 6. 計算屬性錯誤
const obj = null
return obj.someProperty // TypeError: Cannot read property...
})
</script>
錯誤捕獲流程：
- Vue 組件發(fā)生錯誤
vueErrorHandler(err, instance, info)被調(diào)用err：錯誤對象instance：觸發(fā)錯誤的 Vue 組件實例info：錯誤發(fā)生的位置信息（如 "render function"）
2.2 全局腳本錯誤處理 (scriptErrorHandler)
作用：捕獲 JavaScript 運(yùn)行時錯誤和語法錯誤
// 示例 1：同步錯誤
function causeSyncError() {
// 訪問不存在的屬性
const obj = null
console.log(obj.property) // TypeError: Cannot read property...
// 調(diào)用不存在的函數(shù)
undefinedFunction() // ReferenceError: undefinedFunction is not defined
// 語法錯誤（在開發(fā)階段就會報錯）
// console.log('hello' // 缺少右括號
}
// 示例 2：異步錯誤
setTimeout(() => {
throw new Error('setTimeout 中的錯誤')
}, 1000)
// 示例 3：跨域腳本錯誤（只能獲取部分信息）
// <script src="https://other-domain.com/error.js"></script>
// 如果 other-domain.com 的腳本出錯，只能獲得 "Script error."
參數(shù)說明：
window.onerror = function(
message, // 錯誤信息
source, // 發(fā)生錯誤的腳本URL
lineno, // 行號
colno, // 列號
error // Error對象
) {
return true // 返回true阻止默認(rèn)控制臺輸出
}
2.3 Promise 未捕獲錯誤處理 (registerPromiseErrorHandler)
作用：捕獲未處理的 Promise 拒絕（rejection）
// 示例 1：未處理的 Promise 拒絕
const brokenPromise = new Promise((resolve, reject) => {
reject(new Error('Promise 被拒絕！'))
})
// 沒有 .catch() 處理，錯誤會被捕獲
// 示例 2：異步操作中的錯誤
async function fetchData() {
const response = await fetch('/api/data')
if (!response.ok) {
throw new Error('API 請求失敗')
}
return response.json()
}
// 調(diào)用但未處理錯誤
fetchData() // 錯誤會被 unhandledrejection 捕獲
// 示例 3：鏈?zhǔn)秸{(diào)用中丟失的錯誤
Promise.resolve()
.then(() => {
throw new Error('鏈?zhǔn)秸{(diào)用中的錯誤')
})
// 如果這里沒有 .catch()，錯誤會被捕獲
2.4 資源加載錯誤處理 (registerResourceErrorHandler)
作用：捕獲靜態(tài)資源加載失敗
<!-- 示例：資源加載錯誤 -->
<!DOCTYPE html>
<html>
<body>
<!-- 1. 圖片加載失敗 -->
<img src="non-existent-image.jpg" alt="不存在的圖片">
<!-- 2. CSS 文件加載失敗 -->
<link rel="stylesheet" href="non-existent-style.css" rel="external nofollow" >
<!-- 3. JavaScript 文件加載失敗 -->
<script src="non-existent-script.js"></script>
<!-- 4. 字體文件加載失敗 -->
<style>
@font-face {
font-family: 'MyFont';
src: url('non-existent-font.woff2') format('woff2');
}
</style>
</body>
</html>
捕獲的事件詳情：
window.addEventListener('error', (event) => {
const target = event.target
if (target.tagName === 'IMG') {
console.log('圖片加載失敗:', target.src)
// 可以設(shè)置默認(rèn)圖片
target.src = '/default-image.jpg'
}
if (target.tagName === 'SCRIPT') {
console.log('腳本加載失敗:', target.src)
// 可以加載備用腳本
}
if (target.tagName === 'LINK' && target.rel === 'stylesheet') {
console.log('樣式表加載失敗:', target.href)
// 可以加載備用樣式
}
}, true) // 使用捕獲階段
三、實際應(yīng)用示例
3.1 完整配置示例
// main.ts - 使用錯誤處理
import { createApp } from 'vue'
import App from './App.vue'
import { setupErrorHandle } from './utils/sys/error-handle'
const app = createApp(App)
// 安裝錯誤處理
setupErrorHandle(app)
// 模擬各種錯誤（用于測試）
if (import.meta.env.DEV) {
// 測試全局錯誤
window.addEventListener('load', () => {
console.log('錯誤處理已安裝，可以測試以下錯誤：')
console.log('1. 訪問不存在的變量: window.nonExistent')
console.log('2. 拋出錯誤: throw new Error("測試錯誤")')
console.log('3. Promise 錯誤: Promise.reject(new Error("Promise錯誤"))')
console.log('4. 資源錯誤: <img src="error.jpg">')
})
}
app.mount('#app')
五、總結(jié)
這個錯誤處理模塊提供了四個層次的錯誤捕獲：
- Vue 組件層：捕獲組件內(nèi)部錯誤
- JavaScript 全局層：捕獲所有腳本錯誤
- Promise 層：捕獲未處理的 Promise 拒絕
- 資源加載層：捕獲靜態(tài)資源加載失敗
主要價值：
- 提高應(yīng)用穩(wěn)定性
- 快速定位和修復(fù)問題
- 改善用戶體驗
- 便于監(jiān)控和分析
到此這篇關(guān)于Vue3 全局錯誤處理詳解與示例的文章就介紹到這了,更多相關(guān)Vue3 全局錯誤內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue中g(shù)et和post請求的區(qū)別點(diǎn)總結(jié)
在本篇文章里小編給大家分享的是一篇關(guān)于vue中g(shù)et和post請求的區(qū)別點(diǎn)總結(jié)內(nèi)容，對此有興趣的朋友們可以跟著學(xué)習(xí)下。2021-12-12
最近在做一個類似課程表的需求,需要自制一個日歷來支持功能及展現(xiàn),就順便研究一下應(yīng)該怎么開發(fā)日歷組件,下面這篇文章主要給大家介紹了關(guān)于如何基于vue2實現(xiàn)一個日歷組件的相關(guān)資料,需要的朋友可以參考下2022-12-12
基于vue+electron實現(xiàn)文件下載打開wps預(yù)覽
這篇文章主要給大家介紹了基于vue+electron實現(xiàn)文件下載打開wps預(yù)覽,文中有詳細(xì)的代碼示例供大家借鑒參考,感興趣的同學(xué)可以參考閱讀下2023-08-08
antd vue表格可編輯單元格以及求和實現(xiàn)方式
這篇文章主要介紹了antd vue表格可編輯單元格以及求和實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了el-table樹形數(shù)據(jù)序號排序處理方案,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了談?wù)勎以趘ue-cli3中用預(yù)渲染遇到的坑，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
本文主要介紹了elementUI彈窗里的表單重置不生效問題解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
vue-print-nb實現(xiàn)頁面打印功能實例(含分頁打印)
在項目中,有時需要打印頁面的表格,在網(wǎng)上找了一個打印組件vue-print-nb,用了還不錯,所以下面這篇文章主要給大家介紹了關(guān)于vue-print-nb實現(xiàn)頁面打印功能的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue中下載文件的方法,通過實例代碼講解了下載后端返回文件和下載本地文件，本文結(jié)合實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-11-11
VUE渲染后端返回含有script標(biāo)簽的html字符串示例
今天小編就為大家分享 一篇VUE渲染后端返回含有script標(biāo)簽的html字符串示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10