跳到主要内容

JS异常监控

常见JS基本错误类型

JS 异常监控一般指的是JS在执行过程中遇到了错误，然后捕获这些错误，进而收集或者上报这些错误，复现问题分析问题解决问题。

异常类型

执行语句异常

try catch

try {
  // code 
} catch (error) {
  console.error(error);
}

try catch 分之前，之中，之后三个阶段。能被 try catch 捕捉到的异常，必须是在报错的时候，线程执行已经进入 try catch 代码块，且处在 try catch 里面，这个时候才能被捕捉到。如果是在之前，或者之后，都无法捕捉异常。

try catch 可以捕获到 async/await 错误。

Promise

Promise 的异常都是由 reject 和 Promise.prototype.catch 来捕获，不管是同步还是异步。

不要用 try catch 包裹 Promise，Promise 很强大，不用担心异常会往上抛！我们只需要给 Promise 增加 .catch 就 OK 了。

全局异常

window.onerror

// 方式一
window.onerror = function (msg, url, row, col, error) {
    console.log('我知道错误了');
    console.log({
        msg,  url,  row, col, error
    })
    return true;
};

// 方式二
window.addEventListener('error', (msg, url, row, col, error) => {
    console.log('我知道错误了');
    console.log(
        msg, url, row, col, error
    );
    return true;
}, true);

window.onerror 函数只有在返回 true 的时候，异常才不会向上抛出，否则即使是知道异常的发生控制台还是会显示 Uncaught Error: xxxxx。
window.onerror 是无法捕获到网络异常的错误。由于网络请求异常不会事件冒泡，因此必须在捕获阶段将其捕捉到才行，但是这种方式虽然可以捕捉到网络请求的异常，但是无法判断 HTTP 的状态是 404 还是其他比如 500 。还需要配合服务端日志才进行排查分析才可以。

Promise 全局捕获

window.addEventListener("unhandledrejection", function(e){
  e.preventDefault()
  console.log('我知道 promise 的错误了');
  console.log(e.reason);
  return true;
});

异常类型
- 执行语句异常
- 全局异常