如何统一监听vue报错

• 监听渲染报错

  • errorCaptured
  • errorHandler

• 监听事件报错

  • window.onerror
  • errorHandler

• 监听异步报错

  • window.onerror

window.onerror

• 需要和errorCaptured, 搭配使用
• 识别不了 vue 组件错误信息
• 捕捉一些vue监听不到的信息,
  • 例如点击事件
  • 异步错误

errorCaptured

• 需要和window.onerror, 搭配使用
• 只能捕获渲染错误
• 无法捕获点击事件的错误
• 无法捕获异步错误

<!-- ErrorBoundary.vue -->
<template>
  <div>
    <!-- 捕获错误就降级渲染 -->
    <div v-if="hasError">
      <h2>⚠️ 组件加载出错</h2>
      <p>{{ error?.message }}</p>
      <button @click="resetError">重试</button>
    </div>
    <!-- 正常渲染子组件 -->
    <slot v-else></slot>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const hasError = ref(false);
const error = ref(null);

// 捕获子组件错误
const errorCaptured = (err) => {
  hasError.value = true;
  error.value = err;
  return false; // 阻止错误继续向上传播
};

const resetError = () => {
  hasError.value = false;
  error.value = null;
};

defineExpose({ errorCaptured });
</script>

errorHandler

• 能捕获到点击事件的报错
• 但还是需要和window.onerror搭配使用
• 因为无法监听到异步报错

// main.js
import { createApp } from 'vue';
const app = createApp(App);
app.config.errorHandler = (err, instance, info) => {
  console.error(`[${info}] 错误:`, err.toString());
  // 上报逻辑（同上）
};
app.mount('#app');