前端性能监控

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;
})

捕获异常

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");
})

image.png

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

iframe 异常

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