Vue 2/3全局errorHandler部分场景无法触发的问题咨询

Vue 3 场景 #

全局errorHandler无法正常工作，具体表现为：

• 组件created钩子中抛出的错误未被捕获
• 异步方法loadData中抛出的错误未被捕获

全局错误处理器代码（main.js） #

app.config.errorHandler = (err) => {
  console.log('error caught');
};

App.vue 代码 #

<script>
export default {
  created() {
    console.log('jello');
    throw new Error('dasf');
    this.loadData();
  },

  methods: {
    async loadData() {
      throw new Error('dasf');
    },
  },
};
</script>

现象：上述两处抛出的错误均未被errorHandler捕获，被标记为未处理错误，不符合预期。

Vue 2 场景 #

原本计划实现可选错误捕获机制：API抛出错误时，组件内可自行捕获，未捕获的则由全局errorHandler捕获并提示。当前功能失效，表现为：

• 全局errorHandler能捕获created钩子中抛出的错误
• 无法捕获异步方法（如loadData）中的错误

场景1：异步方法错误未被捕获 #

<script>
import HelloWorld from './components/HelloWorld.vue'

import { failingApi } from "@/api/dummy";

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  async created() {
    // await failingApi();
    this.loadData();
  },
  methods: {
    async loadData() {
      await failingApi();
    }
  }
}
</script>

场景2：created钩子中错误被捕获 #

<script>
import HelloWorld from './components/HelloWorld.vue'

import { failingApi } from "@/api/dummy";

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  async created() {
    await failingApi();
    // this.loadData();
  },
  methods: {
    async loadData() {
      await failingApi();
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者praveshishere