详解如何在Vue3中捕获和处理错误

<template>
  <div>
    <h1>Vue 3 错误捕获演示</h1>
    <error-prone-component />
  </div>
</template>

<script>
import { defineComponent, h } from 'vue';

const ErrorProneComponent = defineComponent({
  template: `<div>
    <button @click="throwError">点击我产生错误</button>
  </div>`,
  methods: {
    throwError() {
      throw new Error("这是一个自定义错误！");
    }
  }
});

export default defineComponent({
  components: {
    ErrorProneComponent
  },
  errorCaptured(err, instance, info) {
    console.error("捕获到错误：", err);
    console.error("出错的组件实例：", instance);
    console.error("错误信息：", info);
    
    // 返回 false 以阻止错误进一步传播
    return false;
  }
});
</script>

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.config.errorHandler = (err, instance, info) => {
  console.error("捕获到全局错误：", err);
  console.error("出错的组件实例：", instance);
  console.error("错误信息：", info);

  // 执行全局错误处理逻辑，比如发送到日志系统
};

// 挂载 Vue 应用
app.mount('#app');

npm install @sentry/vue @sentry/tracing

import { createApp } from 'vue';
import App from './App.vue';
import * as Sentry from '@sentry/vue';
import { Integrations } from '@sentry/tracing';

const app = createApp(App);

Sentry.init({
  app,
  dsn: '你的 Sentry DSN URL',
  integrations: [
    new Integrations.BrowserTracing({
      // 跟踪路由性能
      tracingOrigins: ["localhost", "你的生产域名"]
    })
  ],
  tracesSampleRate: 1.0,
});

app.mount('#app');

<template>
  <div>
    <h1>异步错误处理</h1>
    <button @click="fetchData">获取数据</button>
    <p>{{ data }}</p>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  data() {
    return {
      data: null,
      error: null
    };
  },
  methods: {
    async fetchData() {
      try {
        let response = await fetch("https://api.example.com/data");
        if (!response.ok) {
          throw new Error("网络响应失败");
        }
        this.data = await response.json();
      } catch (error) {
        this.error = "获取数据时发生错误：" + error.message;
        console.error("异步操作错误：", error);
      }
    }
  }
});
</script>