Vue3 全局錯誤處理詳解與示例

更新時間：2026年02月27日 16:41:40 作者：UrbanJazzerati

本文展示一個完整的 Vue 3 全局錯誤處理模塊,用于捕獲和處理應用中的各種錯誤,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

一、模塊結構解析

1.1 模塊導覽

// 文件結構
utils/sys/error-handle.ts
├── vueErrorHandler()        // Vue 組件錯誤處理
├── scriptErrorHandler()     // JavaScript 全局錯誤處理
├── registerPromiseErrorHandler()  // Promise 錯誤處理
├── registerResourceErrorHandler() // 資源加載錯誤處理
└── setupErrorHandle()       // 安裝所有錯誤處理器

二、各功能詳解與示例

2.1 Vue 運行時錯誤處理 (vueErrorHandler)

作用：捕獲 Vue 組件中的錯誤，包括：

組件渲染錯誤
生命周期鉤子錯誤
事件處理器錯誤
計算屬性錯誤

<!-- 示例：故意制造錯誤的組件 -->
<template>
  <div>
    <!-- 1. 渲染錯誤 -->
    <div>{{ undefinedVariable }}</div> <!-- 訪問未定義的變量 -->
    
    <!-- 2. 方法調用錯誤 -->
    <button @click="throwError">點擊拋出錯誤</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('按鈕點擊錯誤！')
}

const computedError = computed(() => {
  // 6. 計算屬性錯誤
  const obj = null
  return obj.someProperty // TypeError: Cannot read property...
})
</script>

錯誤捕獲流程：

Vue 組件發(fā)生錯誤
vueErrorHandler(err, instance, info)被調用
err：錯誤對象
instance：觸發(fā)錯誤的 Vue 組件實例
info：錯誤發(fā)生的位置信息（如 "render function"）

2.2 全局腳本錯誤處理 (scriptErrorHandler)

作用：捕獲 JavaScript 運行時錯誤和語法錯誤

// 示例 1：同步錯誤
function causeSyncError() {
  // 訪問不存在的屬性
  const obj = null
  console.log(obj.property) // TypeError: Cannot read property...
  
  // 調用不存在的函數(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阻止默認控制臺輸出
}

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()
}

// 調用但未處理錯誤
fetchData() // 錯誤會被 unhandledrejection 捕獲

// 示例 3：鏈式調用中丟失的錯誤
Promise.resolve()
  .then(() => {
    throw new Error('鏈式調用中的錯誤')
  })
  // 如果這里沒有 .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)
    // 可以設置默認圖片
    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) // 使用捕獲階段

三、實際應用示例

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')

五、總結

這個錯誤處理模塊提供了四個層次的錯誤捕獲：

Vue 組件層：捕獲組件內部錯誤
JavaScript 全局層：捕獲所有腳本錯誤
Promise 層：捕獲未處理的 Promise 拒絕
資源加載層：捕獲靜態(tài)資源加載失敗

主要價值：

提高應用穩(wěn)定性
快速定位和修復問題
改善用戶體驗
便于監(jiān)控和分析

到此這篇關于Vue3 全局錯誤處理詳解與示例的文章就介紹到這了,更多相關Vue3 全局錯誤內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue中get和post請求的區(qū)別點總結
在本篇文章里小編給大家分享的是一篇關于vue中get和post請求的區(qū)別點總結內容，對此有興趣的朋友們可以跟著學習下。
2021-12-12
基于vue2實現(xiàn)一個日歷組件
最近在做一個類似課程表的需求,需要自制一個日歷來支持功能及展現(xiàn),就順便研究一下應該怎么開發(fā)日歷組件,下面這篇文章主要給大家介紹了關于如何基于vue2實現(xiàn)一個日歷組件的相關資料,需要的朋友可以參考下
2022-12-12
基于vue+electron實現(xiàn)文件下載打開wps預覽
這篇文章主要給大家介紹了基于vue+electron實現(xiàn)文件下載打開wps預覽,文中有詳細的代碼示例供大家借鑒參考,感興趣的同學可以參考閱讀下
2023-08-08
antd vue表格可編輯單元格以及求和實現(xiàn)方式
這篇文章主要介紹了antd vue表格可編輯單元格以及求和實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
el-table樹形數(shù)據(jù)序號排序處理方案
這篇文章主要介紹了el-table樹形數(shù)據(jù)序號排序處理方案,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2024-03-03
談談我在vue-cli3中用預渲染遇到的坑
這篇文章主要介紹了談談我在vue-cli3中用預渲染遇到的坑，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-04-04
elementUI彈窗里的表單重置不生效問題解決
本文主要介紹了elementUI彈窗里的表單重置不生效問題解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-04-04
vue-print-nb實現(xiàn)頁面打印功能實例(含分頁打印)
在項目中,有時需要打印頁面的表格,在網(wǎng)上找了一個打印組件vue-print-nb,用了還不錯,所以下面這篇文章主要給大家介紹了關于vue-print-nb實現(xiàn)頁面打印功能的相關資料,需要的朋友可以參考下
2022-08-08
vue中下載文件的方法示例詳解
這篇文章主要介紹了vue中下載文件的方法,通過實例代碼講解了下載后端返回文件和下載本地文件，本文結合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下
2023-11-11
VUE渲染后端返回含有script標簽的html字符串示例
今天小編就為大家分享一篇VUE渲染后端返回含有script標簽的html字符串示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10