错误监控

发表于

错误监控

前端错误的分类

即时错误（代码错误）

资源加载错误（css，js加载出错）

错误的捕获方式

即时运行错误

try.catch

window.onerror

资源加载错误

object.onerror

window.onerror捕捉不到object.onerror因为后者捕捉到错误后不会在冒泡

performance.getEntries()

Error事件捕获

###跨域的JS运行错误可以捕获吗？错误提示是什么？如何处理
在script标签增加crossorigin属性

设置js资源响应头Access-Control-Allow-Origin:*

上报错误的基本原理

采用Ajax通信方式上报

利用Image对象上报

源码

error.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>错误监控</title>
    <script type="text/javascript">
      window.addEventListener('error', function (e) {
          console.log('捕获', e);
      }, false);
    </script>
  </head>
  <body>
    <script src="//badu.com/test.js" charset="utf-8"></script>
    <script type="text/javascript">
      (new Image()).src = 'http://baidu.com/tesjk?r=tksjk';
    </script>
  </body>
</html>