前端性能监控

2019-04-18-09:53:于公司

需要处理哪些异常?

对于前端来说,我们可做的异常捕获还真不少。总结一下,大概如下:

  • JS 语法错误、代码异常
  • AJAX 请求异常
  • 静态资源加载异常
  • Promise 异常
  • Iframe 异常
  • 跨域 Script error
  • 崩溃和卡顿

window.onerror

当 JS 运行时错误发生时,window 会触发一个 ErrorEvent 接口的 error 事件,并执行 window.onerror()。

window.onerror = function(message, source, lineno, colno, error){
  console.log("捕获到异常:", {message, source, lineno, colno, error});
}

可以在浏览器尝试下:

window.onerror = function(message, source, lineno, colno, error){
  console.log("捕获到异常:", {message, source, lineno, colno, error});
};


setTimeout(()=>{
    ton;
})
前端性能监控_第1张图片
捕获异常

onerror 不是万能的

window.onerror = function(message, source, lineno, colno, error){
  console.log("捕获到异常:", {message, source, lineno, colno, error});
};

需要注意:

  • onerror 最好写在所有 JS 脚本的前面,否则有可能捕获不到错误;
  • onerror 无法捕获语法错误;

Promise Catch

在 promise 中使用 catch 可以非常方便的捕获到异步 error ,这个很简单。没有写 catch 的 Promise 中抛出的错误无法被 onerror 或 try-catch 捕获到,所以我们务必要在 Promise 中不要忘记写 catch 处理抛出的异常。

解决方案:为了防止有漏掉的 Promise 异常,建议在全局增加一个对 unhandledrejection 的监听,用来全局监听Uncaught Promise Error。使用方式:

window.addEventListener("unhandledrejection", function(e){
  console.log(e);
})

尝试:

window.addEventListener("unhandledrejection", function(e){
  e.preventDefault();
  console.log(e);
  return true()
});

new Promise((resolve, reject)=>{
  reject("jar: promise error");
})
前端性能监控_第2张图片
image.png

这样,无论promise是否去catch,都会捕获。

iframe 异常

对于 iframe 的异常捕获,我们还得借力 window.onerror: