一、代碼執(zhí)行的錯(cuò)誤捕獲1.try......catch
1.使用try... catch包裹，影響代碼可讀性。無法處理異步中的錯(cuò)誤無法處理語法錯(cuò)誤
try{
//可能出現(xiàn)異常的代碼
}catch(異常類型 變量名){
//處理異常的代碼
}finally{
//無論try塊中是否有異常，均實(shí)現(xiàn)的代碼
}
2.window.onerrorwindow.onerror
比try catch要強(qiáng)那么一丟丟。無論是異步還是非異步錯(cuò)誤,onerror都能捕獲到運(yùn)行時(shí)錯(cuò)誤
缺點(diǎn):監(jiān)聽不到資源加載的報(bào)錯(cuò)onerror,事件處理函數(shù)只能聲明—次，不會(huì)重復(fù)執(zhí)行多個(gè)回調(diào):
window.onerror是一個(gè)全局變量，默認(rèn)值為null。當(dāng)有js運(yùn)行時(shí)錯(cuò)誤觸發(fā)時(shí)，window會(huì)觸發(fā)error事件，并執(zhí)行window.onerror()。onerror可以接受多個(gè)參數(shù)。
window.onerror = function(message, source, lineno, colno, error) { ... }
函數(shù)參數(shù)：
* message：錯(cuò)誤信息（字符串）?？捎糜贖TML onerror=""處理程序中的event。
* source：發(fā)生錯(cuò)誤的腳本URL（字符串）
* lineno：發(fā)生錯(cuò)誤的行號(hào)（數(shù)字）
* colno：發(fā)生錯(cuò)誤的列號(hào)（數(shù)字）
* error：Error對(duì)象
若該函數(shù)返回true，則阻止執(zhí)行默認(rèn)事件處理函數(shù)，如異常信息不會(huì)在console中打印。沒有返回值或者返回值為false的時(shí)候，異常信息會(huì)在console中打印
3.window.addEventListener('error')
可以監(jiān)聽到資源加載報(bào)錯(cuò)，也可以注冊(cè)多個(gè)事件處理函數(shù)。
監(jiān)聽js運(yùn)行時(shí)錯(cuò)誤事件，會(huì)比window.onerror先觸發(fā)，與onerror的功能大體類似，不過事件回調(diào)函數(shù)傳參只有一個(gè)保存所有錯(cuò)誤信息的參數(shù)，不能阻止默認(rèn)事件處理函數(shù)的執(zhí)行，但可以全局捕獲資源加載異常的錯(cuò)誤
window.addEventListener('error', function(event) { ... })
當(dāng)資源（如img或script）加載失敗，加載資源的元素會(huì)觸發(fā)一個(gè)Event接口的error事件，并執(zhí)行該元素上的onerror()處理函數(shù)。這些error事件不會(huì)向上冒泡到window，但可以在捕獲階段被捕獲
因此如果要全局監(jiān)聽資源加載錯(cuò)誤，需要在捕獲階段捕獲事件
//圖片加載失敗使用默認(rèn)圖片，依舊加載失敗超過三次使用base64圖片
window.addEventListener('error',function(e){
let target = e.target, // 當(dāng)前dom節(jié)點(diǎn)
tagName = target.tagName,
count = Number(target.dataset.count ) || 0, // 以失敗的次數(shù)，默認(rèn)為0
max= 3; // 總失敗次數(shù)，此時(shí)設(shè)定為3
// 當(dāng)前異常是由圖片加載異常引起的
if( tagName.toUpperCase() === 'IMG' ){
if(count >= max){
target.src = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//AK3/ALYH+5hX6FV5N4Y/5GHwx/vyf+iJa9ZrysPhoYVShDZu/potDmwWFhhIzhT2bv6aLQ//Z';
}else{
target.dataset.count = count + 1;
target.src = '//xxx/default.jpg';
}
}
},true)
4.window.addEventListener("'unhandledrejection')
捕獲未處理的promise異常與錯(cuò)誤
使用Promise編寫異步代碼時(shí)，使用reject來處理錯(cuò)誤。有時(shí)，開發(fā)者通常會(huì)忽略這一點(diǎn)，導(dǎo)致一些錯(cuò)誤沒有得到處理。例如：
function main() {
asyncFunc()
.then(···)
.then(() => console.log('Done!'));
}
由于沒有使用catch方法捕獲錯(cuò)誤，當(dāng)asyncFunc()函數(shù)reject時(shí)，拋出的錯(cuò)誤則沒有被處理。
瀏覽器中未處理的Promise錯(cuò)誤
一些瀏覽器(例如Chrome)能夠捕獲未處理的Promise錯(cuò)誤。
。unhandledrejection
監(jiān)聽unhandledrejection事件，即可捕獲到未處理的Promise錯(cuò)誤：
。reason: Promise的reject值
window.addEventListener('unhandledrejection', event => {
console.log(event.reason); // Hello, Fundebug!
});
function foo() {
Promise.reject('Hello, Fundebug!');
}
foo();
當(dāng)一個(gè)Promise錯(cuò)誤最初未被處理，但是稍后又得到了處理，則會(huì)觸發(fā)rejectionhandled事件
window.addEventListener('unhandledrejection', event =>
{
console.log(event.reason); // 打印"Unhandle Promise Error!"
});
window.addEventListener('rejectionhandled', event => {
console.log('rejection handled'); // 1秒后打印"rejection handled"
});
function foo() {
return Promise.reject('Unhandle Promise Error!');
}
var r = foo();
setTimeout(() => {
r.catch(e =>{});
}, 1000);
二、資源加載的錯(cuò)誤捕獲
1. imgObj.onerror()
大家上網(wǎng)的時(shí)候肯定見到過加載失敗的紅叉圖片，具體如下圖。當(dāng)然現(xiàn)在Google Chrome與Firefox對(duì)其處理會(huì)好看一些。
其實(shí)可以利用<img>圖片標(biāo)簽的onerror事件對(duì)其處理的，要求其加載失敗之后，馬上加載一張默認(rèn)圖片，而不是顯示為紅叉叉。
其代碼如下：
<img src="s.png" onerror="javascript:this.src='xx.png';this.width=80;this.height=80;" />
意為，如果加載s.png這張圖片失敗了，就馬上去加載xx.png這張圖片，同時(shí)xx.png這張圖片要求其以80x80的方式加載。
2. performance.getEntries)，獲取到成功加載的資源，對(duì)比可以間接的捕獲錯(cuò)誤
瀏覽器獲取網(wǎng)頁時(shí)，會(huì)對(duì)網(wǎng)頁中每一個(gè)對(duì)象（腳本文件、樣式表、圖片文件等等）發(fā)出一個(gè)HTTP請(qǐng)求。而通過window.performance.getEntries方法，則可以以數(shù)組形式，返回這些請(qǐng)求的時(shí)間統(tǒng)計(jì)信息，每個(gè)數(shù)組成員均是一個(gè)PerformanceResourceTiming對(duì)象！
用它小玩兒一下，統(tǒng)計(jì)頁面上的靜態(tài)資源加載耗時(shí)：
(function () {
// 瀏覽器不支持，就算了！
if (!window.performance && !window.performance.getEntries) {
return false;
}
var result = [];
// 獲取當(dāng)前頁面所有請(qǐng)求對(duì)應(yīng)的PerformanceResourceTiming對(duì)象進(jìn)行分析
window.performance.getEntries().forEach(function (perf) {
result.push({
'url': perf.name,
'entryType': perf.entryType,
'type': perf.initiatorType,
'duration(ms)': perf.duration
});
});
// 控制臺(tái)輸出統(tǒng)計(jì)結(jié)果
console.table(result);
})();
- window.addEventListener('error', fn, true)，會(huì)捕獲但是不冒泡，所以window.onerror不會(huì)觸發(fā)，捕獲階段可以觸發(fā) 上面已經(jīng)有示例代碼
三、錯(cuò)誤上報(bào)
—般使用image來上報(bào)，用請(qǐng)求圖片的方式來上報(bào)信息問題;
使用圖片發(fā)送get請(qǐng)求，上報(bào)信息，由于瀏覽器對(duì)圖片有緩存，同樣的請(qǐng)求，圖片只會(huì)發(fā)送一次，避免重復(fù)上報(bào)。
例: 和請(qǐng)求ajax的方式一樣
<script>
(new Image()).src="http://www.baidu.com?n=fff"
</script>
首先創(chuàng)建一個(gè)圖片,將其src屬性設(shè)置為
http://www.baidu.com?n=fff
后期的參數(shù)就是需要上報(bào)的錯(cuò)誤了,可以直接在network中查看參數(shù),類似于ajax請(qǐng)求.
四、借助第三方庫
o sentry-javascript
