前端效能監控

王海洋_前端關注

這類題有兩種問法，開門見山問你如果錯誤監控。或者問你如何保證產品質量。產品上線，線上錯誤如果都不能自動收集上來，怎麼保證產品質量體系。其實考察的都是錯誤監控。

兩種捕獲：第一種通過try catch部署到**中。第二個window.onerror ，這個是dom0的，也可以用addeventlistener 註冊dom2級事件也是可以的。

資源載入錯誤，特殊在什麼地方呢？說object.onerror，比如說這個object是，有乙個onerror事件，通過onerror就能捕獲這個載入錯誤。script標籤也是，也可以新增乙個onerror事件。

1）強調一下，window.onerror 只能捕獲即時執行錯誤，不能捕獲資源載入錯誤。資源載入錯誤不會冒泡。script標籤也是，這個節點發生錯誤，觸發它本身這個節點onerror就行了，不會冒泡到window了。所以為什麼window.onerror 無法捕獲資源載入錯誤的乙個原因。

2）高階瀏覽器會有performance物件，這個物件有個getentries（）用來獲得所有已載入資源的載入時長。通過這個方式間接的拿到沒有載入的資源錯誤。

比如慕課網，這個api返回乙個陣列，就有foreach方法，就遍歷一下。

通過這個方法，把陣列下面name列印出來，就能拿到資源。這些資源就是已經成功載入的。通過這種方式，判斷哪個資源沒有載入的話，比如，就可以document.getelementbytagname("img")

這是我們能拿到所有需要載入的img集合。減去上面已經成功載入的集合，就是沒有成功載入的。

3）可以通過window上事件捕獲，一樣可以攔截資源載入錯誤。onerror不是冒泡，但是有捕獲冒泡兩個過程，阻止了冒泡，但是沒有阻止捕獲啊。

true才是捕獲。列印一下物件。這個script引用的是乙個不存在的資源檔案，所以應該是報錯的。

這是用捕獲的方式，能拿到資源載入錯誤。

如果面試官問你，如果我們js錯誤是跨域的，也就是js本身是跨域的，裡面錯誤還會**獲嗎？如果可以，會出現什麼錯誤提示。這種情況應該怎麼處理？

跨域也可以，它會拿到乙個錯誤，但是所有跨域js錯誤都是乙個script error

行號列號都拿不到。只能拿到錯誤，

怎麼辦？兩步走：

1、2 如圖。後面可以是新號也可以是網域名稱。就可以拿到錯誤的具體資訊了。

1.能做到上報錯誤。但是所有利用image物件上報的。

這時候請求已經發出去了。利用這種方式傳送請求非常簡單，比ajax簡單的多。一行**搞定。輕鬆實現乙個資源網上報。