*如何保证产品质量?
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>