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在antDesign框架或elementUI框架组件native事件中触发2次问题
这篇文章主要介绍了vue在antDesign框架或elementUI框架组件native事件中触发2次问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue debug 二种方法
这篇文章主要介绍了vue debug 二种方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-09-09
Vue+Echarts实现绘制多设备状态甘特图
这篇文章主要为大家详细介绍了Vue如何结合Echarts实现绘制多设备状态甘特图,文中的示例代码讲解详细,有需要的小伙伴可以跟随小编一起学习一下
2024-03-03
vue3中路由写法与传参方式的超详细指南
Vue Router是Vue.js官方的路由管理器,它主要用于单页面应用程序中,帮助解决页面导航、组件复用等问题,下面我们就来看看vue3中路由写法与传参方式吧
2024-11-11
详解Vue3 Composition API中的提取和重用逻辑
这篇文章主要介绍了Vue3 Composition API中的提取和重用逻辑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
vue3关于RouterView插槽和过渡动效
这篇文章主要介绍了vue3关于RouterView插槽和过渡动效,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-06-06
vue文件批量上传及进度条展示的实现方法
开发项目的时候,用到文件上传的功能很常见,包括单文件上传和多文件上传,下面这篇文章主要给大家介绍了关于vue文件批量上传及进度条展示的实现方法,需要的朋友可以参考下
2022-12-12
解决vue select当前value没有更新到vue对象属性的问题
今天小编就为大家分享一篇解决vue select当前value没有更新到vue对象属性的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
vue循环数组改变点击文字的颜色
这篇文章主要为大家详细介绍了vue循环数组改变点击文字的颜色，非常实用的切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-10-10
vue项目开启gzip压缩功能简单实例
这篇文章主要给大家介绍了关于vue项目开启gzip压缩功能的相关资料,gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2023-07-07