少数情况下无法执行vue的全局errorHandler

Question

虽然我在 vue 2 项目中遇到问题，但演示也面临类似的问题，即 main.js 中定义的全局错误处理程序不起作用

Vue 3 https://stackblitz.com/edit/vitejs-vite-svaosh?file=src%2Fmain.js

错误处理程序

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

应用程序.vue

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

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

我希望这两个错误都能被 errorHandler 捕获并只显示一个简单的控制台

我假设错误是在 Vue 上下文中而不是在窗口上下文中，因为 vue 确实将它们显示为像这样的未处理错误

Vue2

我试图以某种方式实现一个可选的错误捕获机制，如果 api 抛出错误，我可以在需要时在组件中捕获它，否则全局错误处理程序捕获它并显示警告 toast 或其他内容。

由于某种原因，它之前工作得很好，我不知道它是如何损坏的，但现在对我来说不起作用，在我的项目中，全局错误处理程序捕获创建的错误，但如果抛出错误则不会捕获错误加载数据

export default {
  async created() {
    this.loadMastersCount();
    throw new Error("dasf"); // this one is caught by global error handler
  },
  methods: {
    async loadMastersCount() {
      throw new Error("dasf"); // this one is not caught and shown in red during dev on on screen
    },
  }
}

Answer 1

在您的示例中，在注册处理程序之前抛出错误：

const app = createApp(App)
app.mount('#app') // <--- exception is triggered here
app.config.errorHandler = (err) => {...}

在调用

app.mount()

解决问题之前注册处理程序：

const app = createApp(App)
app.config.errorHandler = (err) => {...}
app.mount('#app')