前端监控系统 - 捕获报错

前言

要想搭建前端监控系统，首先我们需要去监听哪些前端的报错，本篇文章系统的分析一下我们所需要捕获的错误以及如果捕获

前端报错

• JS 代码运行错误、语法错误等
• 异步错误（分为普通异步错误：setTimeout、Promise、async 语法糖等）
• 静态资源加载错误
• 接口请求报错（window.XMLHttpRequest 、 window.fetch）

捕获错误的方法

• try catch
• window.onerror
• window.addEventListener 的 error
• window.addEventListener 的 unhandledrejection

try catch

1. 能捕获的错误

   • 常规的运行时错误

2. 不能捕获的错误

   • 不能捕获语法错误（因为在未运行时候就已经报错）
   • 不能捕获资源加载错误
   • 不能捕获异步模块中的错误（Promise、setTimeout）（可以将 try catch 放入异步代码内部去捕获） 备注：Promise 有自己的 catch，所以不向外部的 catch 冒泡；async await 作为语法糖可以捕获

const getInfo = async ()=({
   fun()
})
try {
  // 运行错误
  let a;
  console.log(a.name);
  // 异步任务
  setTimeout(() => {
    console.log(a.name);
  });
  // Promise
  new Promise((resolve) => {
    fun();
    resolve();
  });
  // async await
  await getInfo()
} catch (error) {
  console.log('error:', error);
}

window.onerror

/**
 * @param { string } message 错误信息
 * @param { string } source 发生错误的脚本URL
 * @param { number } lineno 发生错误的行号
 * @param { number } colno 发生错误的列号
 * @param { object } error Error对象
 */
window.onerror = function (message, source, lineno, colno, error) {
  console.log('捕获到的错误信息是：', message, source, lineno, colno, error);
};

1. 能捕获的错误

   • 常规的运行错误
   • 异步模块中的错误（setTimeout 中的错误，不能捕获 promise 以及 async 中的错误）

2. 不能捕获的错误

   • 语法错误
   • 资源错误

window.addEventListener 的 error 事件

与 onerror 的功能大体类似，但是能捕获资源错误

window.addEventListener(
  'error',
  (error) => {
    console.log('捕获到异常：', error);
  },
  true
);

window.addEventListener 的 unhandledrejection 事件

能捕获  promise  中的错误：包括内部运行的错误；当 promise 被 reject 并且没有 catch 的时候，也会触发

window.addEventListener('unhandledrejection', function (e) {
  console.log('捕获到异常', e);
  // preventDefault阻止传播，不会在控制台打印
  e.preventDefault();
});

fetch 、XMLHttpRequest

XMLHttpRequest 监听 loadend 事件：可以监听到绝大多数的 ajax 请求

fetch：fetch 的代码是内置在浏览器中的，所以没办法监听到 fetch 里边的 XMLHttpRequest 对象，所以重写 fetch 即可监听到

本文只是理论分析，实际操作起来当然不会像现在这么简单

总结

捕获方式	常规运行错误	普通异步任务	Promise	async	资源加载
try catch	✔	✖	✖	✔	✖
window.onerror	✔	✔	✖	✖	✖
window.addEventListener 的 error	✔	✔	✖	✖	✔
window.addEventListener 的 unhandledrejection	✖	✖	✔	✔	✖

所以我们只需要 window.addEventListener 的 error 和 unhandledrejection 即可