前端面試準(zhǔn)備--12.錯(cuò)誤監(jiān)控類

*如何保證產(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:可以是,也可以是指定域名;

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>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容