前端错误监控类

一、前端错误的分类
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。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值