# 前端性能优化性能监控

# 错误捕获

script每个是独立标签，独立的块

<body>
  <script>
    error;
    console.log(1);
  </script>
  <script>
    // 2
    console.log(2);
  </script>
</body>

语法错误，try catch是捕获不了的
setTimeout等异步方法无法捕获

try {
  setTimeout(() => {
    error;
  });
} catch (e) {
  console.log("🍇");
}
//
window.onerror = function(msg, url, row, col, error) {
  console.log("🌺", msg);
  return true;
};

img 资源引用错误等 html 脚本的错误的捕获

<body>
  <img src="./xx.png" />
  <script>
    window.addEventListener(
      "error",
      function(msg, url, row, col, error) {
        console.log("🌺", msg);
        return false;
      },
      // 是否冒泡去接收
      true
    );
  </script>
</body>

promise错误

window.addEventListener("unhandledrejection", function(e) {
  e.preventDefault();
  console.log(e.reason);
  return true;
});
new Promise((resolve, reject) => {
  reject("第一个error");
}).catch(function(err) {
  console.log(err);
});
Promise.resolve().then(() => {
  throw "第三方error";
});
Promise.reject("第二个错误");

www.fundebug.com付费错误监控
badjs
监控报错转为视频
- 记录用户 xpath 用户操作栈
- 服务端 xpath -> gif
- socket 图片 html2canvas 服务端帧-> server
- sessionstack 记录用户操作错的记录执行
- 容错的时候，不能占用 ajax，会占用并发用navigator.sendBeacon("xx.php")专门用作统计
zanePerfor github 项目

← 前端性能优化_link 篇前端项目持续集成(一) →