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 组件发生错误
vueErrorHandler(err, instance, info)被调用
err：错误对象
instance：触发错误的 Vue 组件实例
info：错误发生的位置信息（如 "render function"）

2.2 全局脚本错误处理 (scriptErrorHandler)

作用：捕获 JavaScript 运行时错误和语法错误

// 示例 1：同步错误
function causeSyncError() {
  // 访问不存在的属性
  const obj = null
  console.log(obj.property) // TypeError: Cannot read property...
  
  // 调用不存在的函数
  undefinedFunction() // ReferenceError: undefinedFunction is not defined
  
  // 语法错误（在开发阶段就会报错）
  // 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."

参数说明：

window.onerror = function(
  message,    // 错误信息
  source,     // 发生错误的脚本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)

作用：捕获静态资源加载失败

<!-- 示例：资源加载错误 -->
<!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 拒绝
资源加载层：捕获静态资源加载失败

主要价值：

提高应用稳定性
快速定位和修复问题
改善用户体验
便于监控和分析

到此这篇关于Vue3 全局错误处理详解与示例的文章就介绍到这了,更多相关Vue3 全局错误内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue中get和post请求的区别点总结
在本篇文章里小编给大家分享的是一篇关于vue中get和post请求的区别点总结内容，对此有兴趣的朋友们可以跟着学习下。
2021-12-12
基于vue2实现一个日历组件
最近在做一个类似课程表的需求,需要自制一个日历来支持功能及展现,就顺便研究一下应该怎么开发日历组件,下面这篇文章主要给大家介绍了关于如何基于vue2实现一个日历组件的相关资料,需要的朋友可以参考下
2022-12-12
基于vue+electron实现文件下载打开wps预览
这篇文章主要给大家介绍了基于vue+electron实现文件下载打开wps预览,文中有详细的代码示例供大家借鉴参考,感兴趣的同学可以参考阅读下
2023-08-08
antd vue表格可编辑单元格以及求和实现方式
这篇文章主要介绍了antd vue表格可编辑单元格以及求和实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
el-table树形数据序号排序处理方案
这篇文章主要介绍了el-table树形数据序号排序处理方案,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2024-03-03
谈谈我在vue-cli3中用预渲染遇到的坑
这篇文章主要介绍了谈谈我在vue-cli3中用预渲染遇到的坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
elementUI弹窗里的表单重置不生效问题解决
本文主要介绍了elementUI弹窗里的表单重置不生效问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
vue-print-nb实现页面打印功能实例(含分页打印)
在项目中,有时需要打印页面的表格,在网上找了一个打印组件vue-print-nb,用了还不错,所以下面这篇文章主要给大家介绍了关于vue-print-nb实现页面打印功能的相关资料,需要的朋友可以参考下
2022-08-08
vue中下载文件的方法示例详解
这篇文章主要介绍了vue中下载文件的方法,通过实例代码讲解了下载后端返回文件和下载本地文件，本文结合实例代码给大家介绍的非常详细，需要的朋友可以参考下
2023-11-11
VUE渲染后端返回含有script标签的html字符串示例
今天小编就为大家分享一篇VUE渲染后端返回含有script标签的html字符串示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10