错误监控原理解析

错误监控

原文地址

前言

作为一个前端，在开发过程即便十分小心，自测充分，在不同用户复杂的操作下也难免会出现程序员意想不到的问题，给公司或个人带来巨大的损失。
这时一款能够及时上报错误和能够帮助程序员很好的解决错误的前端错误监控系统就必不可少了。
接下来我们就聊聊常见的错误发生与处理。

本文主要围绕以下几点讨论：

1. 常见JS错误类型
2. 常见JS处理错误方式
3. 上报的方式，和上报内容的几点思考

问题：

1. JS、CSS、img等资源加载失败(CDN或图床挂了，无意删了、文件名变了)怎么实时获知？而不是用户告诉你？
2. 如何上报有用的错误信息能够让程序员快速定位错误并修复？而不是上报一些迷惑信息？
3. 在当今无不用压缩丑化代码的工程化中，怎么利用好 SourceMap 文件，处理错误信息？
4. 如何出了问题，不用在让用户帮助你复现？要机型？要操作步骤？
5. 如何更好统计问题的分布(机型设备、浏览器、地理位置、带宽等)，自主根据数据来取舍兼容倾向性？
6. …

常见错误

1. 脚本错误
   • 语法错误
   • 运行时错误
     • 同步错误
     • 异步错误
     • Promise 错误
2. 网络错误
   • 资源加载错误
   • 自定义请求错误

语法错误

例如，英文字符写成中文字符。一般容易在开发时被发现。

语法错误无法被try catch 处理

try {
   
  const error = 'error'；   // 圆角分号
} catch(e) {
   
  console.log('我感知不到错误');
}

同步错误

JS引擎在执行脚本时，把任务分块压入事件栈，轮询取出执行，每个事件任务都有自己的上下文环境，
在当前上下文环境同步执行的代码发生错误都能被try catch 捕获，保证后续的同步代码被执行。

try {
  error
} catch(e) {
  console.log(e);
}

异步错误

常见的 setTimeout 等方法会创建新的事件任务插入事件栈中，待后续执行。
所以try catch 无法捕获其他上下文的代码错误。

try {
   
  setTimeout(() => {
   
    error        // 异步错误
  })
} catch(e) {
   
  console.log('我感知不到错误');
}

为了便于分析发生的错误，一般利用 window.onerror 事件来监听错误的发生。
它比try catch的捕获错误信息的能力要强大。

/**
 * @param {String}  msg    错误描述
 * @param {String}  url    报错文件
 * @param {Number}  row    行号
 * @param {Number}  col    列号
 * @param {Object}  error  错误Error对象
 */
 window.onerror = function (msg, url, row, col, error) {
   
  console.log('我知道错误了');
  // return true; // 返回 true 的时候，异常不会向上抛出，控制台不会输出错误
};

window.onerror 注意事项

1. window.onerror 可以捕获常见语法、同步、异步错误等错误；
2. window.onerror 无法捕获 Promise 错误、网络错误；