前言

昨天写了一篇文章，在项目中使用了try-catch去捕获错误，但是因为没有在catch中输出日志，导致排查了很久才发现。

所以使用了try-catch，务必要在catch中把错误日志输出！！！

今天再来总结下js捕获错误的几种方式。

捕获错误

try-catch

try-catch用的比较多，可以捕获js的很多错误。

比如下面变量未声明就使用，以及访问不存在的属性等错误。

  try {
    console.log(a)
  } catch (error) {
    console.log('catch error:', error)
  }
  
  var obj = {}
  try {
    console.log(obj.name.a)
  } catch (error) {
    console.log('catch error:', error)
  }

但是有两个错误try-catch不能捕获到

第一个是try-catch只能捕获同步的错误，如果是异步的错误就无法捕获。

比如promise和setTimeout.

  try {
    new Promise((resolve, reject) => {
      reject('err')
    })
  } catch (error) {
    console.log('catch error:', error)
  }

  try {
    setTimeout(() => {
      console.log(a)
    }, 100)
  } catch (error) {
    console.log('catch error:', error)
  }

第二个是无法捕获语法错误。

我把答案cp3的引号去掉一半，以及把console.log的括号去掉一个。

  try {
    console.log('答案cp3
  } catch (error) {
    console.log('catch error:', error)
  }

语法错误，如果你安装了eslint，就会有避免这个问题，因为eslint会有提示。

监听error事件

有2种方式：

第一种：window.onerror

  window.onerror = function (message, source, line, col, error) {
    console.log("catch error:",{message, source, line, col, error});
    // message: 错误的信息
    // source:  错误发生的文件
    // line:    错误发生的行数
    // col:     错误发生的列数
    // error:   错误对象
  };

第二种：window.addEventListener('error')

  window.addEventListener('error', (error) => {
    console.log('catch error:', error)
  })

使用的时候都尽量在加载js资源前就实现监听。

这两种有什么区别呢？

这两者很相似，语法错误，代码错误都能捕获。然后和try-catch一样，异步错误不能捕获。

  window.onerror = function (message, source, line, col, error) {
    console.log("catch error:",{message, source, line, col, error});
  };
  window.addEventListener('error', (error) => {
    console.log('error：', error)
  })
  new Promise((resolve, reject) => {
    reject('err')
  })

window.onerror的打印日志比addEventListener方式的多一点。

然后如果是资源加载失败，window.onerror无法捕获，window.addEventListener('error')可以捕获，但是得是在捕获阶段才行。

捕获阶段就是第三个参数需要设置为true。

  window.addEventListener('error', (error) => {
    console.log('catch error:', error)
  }, true)
  
 <img src="https://www.baidu.com/404.jpg" alt="">

unhandledrejection

针对上面提到的异步错误， try-catch和监听error事件无法捕获，我们可以通过监听unhandledrejection事件来实现捕获。

  window.addEventListener('unhandledrejection', (error) => {
    console.log('catch error:', error)
  })
  new Promise((resolve, reject) => {
    reject('promise error')
  })

可以看到，捕获到reject的错误了。

vue的errorHandler函数

vue的捕获异常函数，可以通过全局配置来errorHandler函数来捕获错误。内部实现也是通过try-catch来捕获。

Vue.config.errorHandler = (err, vm, info) => {
  console.log(err, vm, info)
  // err: 错误对象
  // vm: 发生错误的实例
  // info: 错误信息
}
throw new Error('i am err')

大家如果还有其他方式或者疑问，可以评论交流。

感谢你的阅读。