在vue中，有时候异常原因报错，我们需要针对错误进行处理，今天，整理一下方案

一：window.onerror

1：定义：

2：作用：全局监听所有的js、异步错误

3：局限性：识别不了Vue组件信息，Vue内部的错误还是用Vue来监听

4：代码

 window.onerror = function (msg, source, line, column, error) {
			console.info('window.onerror----', msg, source, line, column, error)
		  }

二：全局错误处理器（errorHandler实例或组件）

1：定义：主入口文件（如main.js）中创建一个全局错误处理器

2：作用：设置全局错误处理器，在组件发生错误时捕获并集中处理，从而提供更好的错误处理和调试体验

3：局限性：全局错误处理器只能捕获组件内部未被捕获的错误，而无法捕获外部的全局错误

4：代码

Vue.config.errorHandler = function (err, vm, info) {
  // 在这里处理错误
  //err：捕获到的错误对象。
  //vm：报错的Vue组件实例。
 //info：包含错误的额外信息，如错误来源组件的标识符等
  console.error('Vue组件报错:', err, vm, info);
  // 可以将错误信息上报到服务器或执行其他自定义逻辑
}

三：errorCaptured（组件内部）

1：定义：在组件内部创建一个错误处理器

2：作用：观察组件内部的错误

3：局限性：组件内部可用

4：代码

Vue.component('my-component', {
  // ...组件配置...

  errorCaptured(err, vm, info) {
    // 在这里处理错误
    console.error('Vue组件报错:', err, vm, info);
    // 可以将错误信息上报到服务器或执行其他自定义逻辑
    return false; // 如果希望错误继续传播，则返回true；如果希望停止错误传播，则返回false
  }
});

四：使用try-catch

1：定义：利用try-catch语句进行捕获和处理特定代码块错误

2：作用：将错误处理逻辑局限在特定的代码范围内，从而更加精确地处理错误

3：局限性：特定的代码块中使用

4：代码

 created() {
    try {
      // 可能出错的代码块
      // 执行某些操作可能会引发错误
    } catch (error) {
      // 在这里处理错误
      console.error('Vue组件报错:', error);
      // 可以将错误信息上报到服务器或执行其他自定义逻辑
    }
  }

五：总结

1：四种方案各有优势，结合使用

2：errorCaptured监听一些重要的、有风险组件的错误

3：window.onerror和errorHandler全局监听

4：特殊：promise（promise没有被catch的报错，使用onunhandledrejection监听）和setTimeout异步