Vue3 错误处理机制onErrorCaptured使用方法

Cejauh 发布于 2022-05-09 1061 次阅读

AI 摘要

在开发过程中，错误不可避免，但如何优雅地处理它们则成为了开发者的重要课题。在这篇文章中，我将分享如何通过Vue3生命周期钩子onErrorCaptured来高效捕获和处理错误，特别是在进行JSON转XML操作时遇到的Syntax Error。通过对错误的精确判断和捕获，我们不仅能提升代码的稳定性，更能提升用户体验。来看看如何实现这一点，确保你的程序永无BUG！

大家好，我在做JSON转XML时出现，如果字符串格式是XML，但是却强制进行JSON -> XML操作，控制台会报错Syntex Error，这个错误是人为导致的，并不是代码有问题，因此我需要捕获这个错误并处理。

尝试过使用try catch来捕获，发现根本没用。

经过查阅文档，发现可以使用生命周期钩子onErrorCaptured来处理

下面是我的代码，各位在使用时可以借鉴。

onErrorCaptured((err) => {
      // 判断是错误还是异常
      if (err.toString().indexOf('SyntaxError') !== -1) {
        ElNotification({
          title: '程序出错',
          message: err.message,
          type: 'error',
        })
        return false
      }
    })

err是返回的错误对象，你要查找特定的错误就得把他转字符串，你可以在控制台看到完整的错误信息（红色的），err.message只包含内容，不包含开头的错误或警告类型。

祝各位程序永无BUG