错误监控类

如何保证产品质量？

1.前端错误的分类
2.错误的捕获方式
3.上报错误的基本原理

一、前端错误的分类
1.即时运行错误：代码错误

    * try…catch(需要把try...catch布到代码中)
    *window.onerror(dom0)只能捕获即时运行错误

2.资源加载错误：（js、css、图片加载失败）

    * object.onerror(通过节点绑onerror事件，捕获加载错误；)
    * performance.getEntries();
        获取已加载资源时长，通过这个方式可以间接的拿到没有加载资源的错误；
    返回的是一个数组，有forEach方法。   performance.getEntries().forEach(item=>{console.log(item.name)});可以得到已成功加载的资源。
 document.getElementsByTagName(‘img’);能拿到所有img的一个集合，是我们所需要加载的所有
图片的一个集合减去上面已成功加载的集合，剩下就是没有成功加载的。
      * Error事件捕获
    window上通过事件捕获一样可以拦截到资源加载错误。可以在捕获阶段拿到这个。
    body中:
        <script src=“//baidu.com/test.js” charset=“utf-8”></script>//不存在
        为了证明捕获可以拿到这个事件；
    head中：
        <script>
            window.addEventListener(‘error’,function(e){
                conosle.log(‘捕获’,e);
            });
        </script>
    ==>报错 GETfiles | baidu.com | test.js 没找到    
         捕获 Event {isTrusted:true,’type’:’error’,target:script,currentTarget:window,eventphase:1…}
        
 不会冒泡，script标签发生了错误，触发本身onerror事件已经可以了，不会向上冒泡到window。

• 延伸：跨域JS运行错误可以捕获吗，错误提示是什么，应该怎么处理？
  可以拿到所有跨域文件的代码错误；
  Resource interpreted as script but transferred
  错误信息：Script error.
  出错文件：
  出错行号：0
  出错列号：0
  错误详情：null
  ———都没有拿到，因为跨域没有权限，只能捕获到这个错误，但是没拿到相应的具体信息；

  • 这样处理之后就可以拿到详细信息：
    1.在script标签增加crossorigin属性（在客户端做的）
    2.设置JS资源响应头Access-control-Allow-origin；*
    —在服务端做的，在响应JS资源的实惠在http头上加一个Access-control-Allow-origin：可以是，也可以是指定域名；

3、上报错误的基本原理

1.采用Ajax通信的方式上报
（所有的错误监控都不是通过这种方式来做的；）
2.利用Image对象上报
（所有的监控体系都是这样做的）

      <script>
        //利用这种方式发送一个请求非常简单，比Ajax简单，不需要借助任何第三方库；
        (new Image()).src=“http://baidu.com/tesjk?r=tksjk”;
        //一行代码实现一个资源向上报；/tesjk?这个是上报路径；r=tksjk加信息
    </script>

作者：飞菲fly
链接：https://www.jianshu.com/p/ed3a0e42ad76
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。