统一监听Vue组件报错

一、window.onerror

  • 全局监听所有JS报错
  • 但是它是JS级别的,识别不了Vue组件信息
  • 捕捉一些Vue监听不到的错误

统一监听Vue组件报错_第1张图片

统一监听Vue组件报错_第2张图片
也可以这么写
统一监听Vue组件报错_第3张图片

统一监听Vue组件报错_第4张图片
但是,如果用try…catch…捕获的error,无法被window.onerror捕获
统一监听Vue组件报错_第5张图片

二、errorCaptured生命周期

  • 监听所有下级组件的错误
  • 返回false会阻止向上传播
    统一监听Vue组件报错_第6张图片
    window.onerror也监听到了(有向上传播)
    统一监听Vue组件报错_第7张图片
    return false 阻止向上传播: (防止重复捕获)
    统一监听Vue组件报错_第8张图片
    统一监听Vue组件报错_第9张图片

三、errorHandler配置

  • Vue全局错误监听,所有组件错误都会汇总到这里
  • 但errorCaptured返回false,不会传播到这里

统一监听Vue组件报错_第10张图片
统一监听Vue组件报错_第11张图片
没有return false ,window.onerror也没有执行,errorHandler已经是全局的监听
window.onerror与errorHandler互斥

异步错误

  • 异步回调里的错误, errorHandler监听不到
  • 需要使用window.onerror

统一监听Vue组件报错_第12张图片
统一监听Vue组件报错_第13张图片
只有window.onerror监听到了错误

总结

  • errorCaptured监听下级组件的错误,返回false 阻止向上传播
  • errorHandler监听全局Vue组件的错误
  • window.onerror监听其他JS报错,如 异步
    统一监听Vue组件报错_第14张图片

你可能感兴趣的:(VUE,vue.js,javascript,前端)