*如何保證產(chǎn)品質(zhì)量?
1.前端錯(cuò)誤的分類
2.錯(cuò)誤的捕獲方式
3.上報(bào)錯(cuò)誤的基本原理
一、前端錯(cuò)誤的分類
1.即時(shí)運(yùn)行錯(cuò)誤:代碼錯(cuò)誤
* try…catch(需要把try...catch布到代碼中)
*window.onerror(dom0)只能捕獲即時(shí)運(yùn)行錯(cuò)誤
2.資源加載錯(cuò)誤:(js、css、圖片加載失?。?/strong>
* object.onerror(通過(guò)節(jié)點(diǎn)綁onerror事件,捕獲加載錯(cuò)誤;)
* performance.getEntries();
獲取已加載資源時(shí)長(zhǎng),通過(guò)這個(gè)方式可以間接的拿到?jīng)]有加載資源的錯(cuò)誤;
返回的是一個(gè)數(shù)組,有forEach方法。 performance.getEntries().forEach(item=>{console.log(item.name)});可以得到已成功加載的資源。
document.getElementsByTagName(‘img’);能拿到所有img的一個(gè)集合,是我們所需要加載的所有
圖片的一個(gè)集合減去上面已成功加載的集合,剩下就是沒有成功加載的。
* Error事件捕獲
window上通過(guò)事件捕獲一樣可以攔截到資源加載錯(cuò)誤??梢栽诓东@階段拿到這個(gè)。
body中:
<script src=“//baidu.com/test.js” charset=“utf-8”></script>//不存在
為了證明捕獲可以拿到這個(gè)事件;
head中:
<script>
window.addEventListener(‘error’,function(e){
conosle.log(‘捕獲’,e);
});
</script>
==>報(bào)錯(cuò) GETfiles | baidu.com | test.js 沒找到
捕獲 Event {isTrusted:true,’type’:’error’,target:script,currentTarget:window,eventphase:1…}
不會(huì)冒泡,script標(biāo)簽發(fā)生了錯(cuò)誤,觸發(fā)本身onerror事件已經(jīng)可以了,不會(huì)向上冒泡到window。
-
延伸:跨域JS運(yùn)行錯(cuò)誤可以捕獲嗎,錯(cuò)誤提示是什么,應(yīng)該怎么處理?
可以拿到所有跨域文件的代碼錯(cuò)誤;
Resource interpreted as script but transferred
錯(cuò)誤信息:Script error.
出錯(cuò)文件:
出錯(cuò)行號(hào):0
出錯(cuò)列號(hào):0
錯(cuò)誤詳情:null
———都沒有拿到,因?yàn)榭缬驔]有權(quán)限,只能捕獲到這個(gè)錯(cuò)誤,但是沒拿到相應(yīng)的具體信息;-
這樣處理之后就可以拿到詳細(xì)信息:
1.在script標(biāo)簽增加crossorigin屬性(在客戶端做的)
2.設(shè)置JS資源響應(yīng)頭Access-control-Allow-origin;*
—在服務(wù)端做的,在響應(yīng)JS資源的實(shí)惠在http頭上加一個(gè)Access-control-Allow-origin:可以是,也可以是指定域名;
-
這樣處理之后就可以拿到詳細(xì)信息:
3、上報(bào)錯(cuò)誤的基本原理
1.采用Ajax通信的方式上報(bào)
(所有的錯(cuò)誤監(jiān)控都不是通過(guò)這種方式來(lái)做的;)
2.利用Image對(duì)象上報(bào)
(所有的監(jiān)控體系都是這樣做的)
<script>
//利用這種方式發(fā)送一個(gè)請(qǐng)求非常簡(jiǎn)單,比Ajax簡(jiǎn)單,不需要借助任何第三方庫(kù);
(new Image()).src=“http://baidu.com/tesjk?r=tksjk”;
//一行代碼實(shí)現(xiàn)一個(gè)資源向上報(bào);/tesjk?這個(gè)是上報(bào)路徑;r=tksjk加信息
</script>