参见的错误分类

  1. js运行错误
  2. 资源加载错误
  3. 未处理的promise错误
  4. 异步请求错误

js 运行错误

window.onerror 与 winod.addEventListenr(‘error’) 捕获 js 运行时错误

  1. window.error = function (msg, url, lineNo, columnNo, error) {
  2.   // demo
  3.   // msg: Uncaught TypeError: Uncaught ReferenceError: a is not defined
  4.   // error.statck: TypeError: ReferenceError: a is not defined at 
  5.   // window.addEventListener('error', event => (){ 
  6.   // 处理错误信息
  7. }
  9. window.addEventListener('error', event => (){ 
  10.   // 处理错误信息
  11. }, false);

资源加载错误

资源加载错误使用addEventListener去监听error事件捕获

  1. window.addEventListener('error', event => (){ 
  2.   // 过滤js error
  3.   let target = event.target || event.srcElement;
  4.   let isElementTarget = target instanceof HTMLScriptElement || target instanceof HTMLLinkElement || target instanceof HTMLImageElement;
  5.   if (!isElementTarget) return false;
  6.   // 上报资源地址
  7.   let url = target.src || target.href;
  8.   console.log(url);
  9. }, true);

未处理的 Promise 错误处理方式

实现原理：当promise被reject并且错误信息没有被处理的时候，会抛出一个unhandledrejection。

这个错误不会被window.onerror以及window.addEventListener(‘error’)捕获，但是有专门的window.addEventListener(‘unhandledrejection’)方法进行捕获处理。

  2. // 一开始没有捕获错误
  3. window.addEventListener('unhandledrejection', event => {
  4.   // 错误的详细信息在reason字段
  5.   // demo:settimeout error
  6.   console.log(event.reason);
  7. });
  9. // 一开始没有捕获 触发 unhandledrejection 之后，又被处理了 就触发 rejectionhandled
  10. window.addEventListener('rejectionhandled', event => {
  11.     console.log('rejection handled'); // 1秒后打印"rejection handled"
  12. });