前端一直是距離用戶最近的一層滋将，隨著產(chǎn)品的日益完善，我們會(huì)更加注重用戶體驗(yàn)症昏，而前端異常卻如鯁在喉随闽，甚是煩人。
一肝谭、為什么要處理異常掘宪？
異常是不可控的，會(huì)影響最終的呈現(xiàn)結(jié)果攘烛，但是我們有充分的理由去做這樣的事情魏滚。
1.增強(qiáng)用戶體驗(yàn)；
2.遠(yuǎn)程定位問(wèn)題坟漱；
3.未雨綢繆鼠次，及早發(fā)現(xiàn)問(wèn)題；
4.無(wú)法復(fù)線問(wèn)題靖秩，尤其是移動(dòng)端须眷，機(jī)型，系統(tǒng)都是問(wèn)題沟突；
5.完善的前端方案，前端監(jiān)控系統(tǒng)捕传；
對(duì)于JS而言惠拭，我們面對(duì)的僅僅只是異常，異常的出現(xiàn)不會(huì)直接導(dǎo)致JS引擎崩潰庸论，最多只會(huì)使當(dāng)前執(zhí)行的任務(wù)終止职辅。
二、需要處理哪些異常聂示？
對(duì)于前端來(lái)說(shuō)域携，我們可做的異常捕獲還真不少∮愫恚總結(jié)一下秀鞭，大概如下：
JS語(yǔ)法錯(cuò)誤趋观、代碼異常
AJAX請(qǐng)求異常
靜態(tài)資源加載異常
Promise異常
Iframe異常
跨域 Script error
崩潰和卡頓
下面我會(huì)針對(duì)每種具體情況來(lái)說(shuō)明如何處理這些異常。
三锋边、Try-Catch 的誤區(qū)
try-catch只能捕獲到同步的運(yùn)行時(shí)錯(cuò)誤皱坛，對(duì)語(yǔ)法和異步錯(cuò)誤卻無(wú)能為力，捕獲不到豆巨。
1.同步運(yùn)行時(shí)錯(cuò)誤：
try {
let name = 'jartto';
console.log(nam);
} catch(e) {
console.log('捕獲到異常：',e);
}
輸出：
捕獲到異常： ReferenceError: nam is not defined
at :3:15
2.不能捕獲到語(yǔ)法錯(cuò)誤剩辟，我們修改一下代碼，刪掉一個(gè)單引號(hào)：
try {
let name = 'jartto;
console.log(nam);
} catch(e) {
console.log('捕獲到異常：',e);
}
輸出：
Uncaught SyntaxError: Invalid or unexpected token
不過(guò)語(yǔ)法錯(cuò)誤在我們開(kāi)發(fā)階段就可以看到往扔，應(yīng)該不會(huì)順利上到線上環(huán)境贩猎。
3.異步錯(cuò)誤
try {
setTimeout(() => {
undefined.map(v => v);
}, 1000)
} catch(e) {
console.log('捕獲到異常：',e);
}
我們看看日志：
Uncaught TypeError: Cannot read property 'map' of undefined
at setTimeout (:3:11)
并沒(méi)有捕獲到異常，這是需要我們特別注意的地方萍膛。
四吭服、window.onerror 不是萬(wàn)能的
當(dāng)JS運(yùn)行時(shí)錯(cuò)誤發(fā)生時(shí)，window會(huì)觸發(fā)一個(gè)ErrorEvent接口的error事件卦羡，并執(zhí)行window.onerror()噪馏。
/**
* @param {String} message 錯(cuò)誤信息
* @param {String} source 出錯(cuò)文件
* @param {Number} lineno 行號(hào)
* @param {Number} colno 列號(hào)
* @param {Object} error Error對(duì)象（對(duì)象）
*/
window.onerror = function(message, source, lineno, colno, error) {
console.log('捕獲到異常：',{message, source, lineno, colno, error});
}
1.首先試試同步運(yùn)行時(shí)錯(cuò)誤
window.onerror = function(message, source, lineno, colno, error) {
// message：錯(cuò)誤信息（字符串）。
// source：發(fā)生錯(cuò)誤的腳本URL（字符串）
// lineno：發(fā)生錯(cuò)誤的行號(hào)（數(shù)字）
// colno：發(fā)生錯(cuò)誤的列號(hào)（數(shù)字）
// error：Error對(duì)象（對(duì)象）
console.log('捕獲到異常：',{message, source, lineno, colno, error});
}
Jartto;
可以看到绿饵，我們捕獲到了異常：
?
2.再試試語(yǔ)法錯(cuò)誤呢欠肾？
window.onerror = function(message, source, lineno, colno, error) {
console.log('捕獲到異常：',{message, source, lineno, colno, error});
}
let name = 'Jartto
控制臺(tái)打印出了這樣的異常：
Uncaught SyntaxError: Invalid or unexpected token
什么，竟然沒(méi)有捕獲到語(yǔ)法錯(cuò)誤拟赊？
3.懷著忐忑的心刺桃，我們最后來(lái)試試異步運(yùn)行時(shí)錯(cuò)誤：
window.onerror = function(message, source, lineno, colno, error) {
console.log('捕獲到異常：',{message, source, lineno, colno, error});
}
setTimeout(() => {
Jartto;
});
控制臺(tái)輸出了：
捕獲到異常： {message: "Uncaught ReferenceError: Jartto is not defined", source: "http://127.0.0.1:8001/", lineno: 36, colno: 5, error: ReferenceError: Jartto is not defined
at setTimeout (http://127.0.0.1:8001/:36:5)}
4.接著，我們?cè)囋嚲W(wǎng)絡(luò)請(qǐng)求異常的情況：
window.onerror = function(message, source, lineno, colno, error) {
console.log('捕獲到異常：',{message, source, lineno, colno, error});
return true;
}
我們發(fā)現(xiàn)吸祟，不論是靜態(tài)資源異常瑟慈，或者接口異常，錯(cuò)誤都無(wú)法捕獲到屋匕。
補(bǔ)充一點(diǎn)：window.onerror函數(shù)只有在返回true的時(shí)候葛碧，異常才不會(huì)向上拋出，否則即使是知道異常的發(fā)生控制臺(tái)還是會(huì)顯示Uncaught Error: xxxxx
window.onerror = function(message, source, lineno, colno, error) {
console.log('捕獲到異常：',{message, source, lineno, colno, error});
return true;
}
setTimeout(() => {
Jartto;
});
控制臺(tái)就不會(huì)再有這樣的錯(cuò)誤了：
Uncaught ReferenceError: Jartto is not defined
at setTimeout ((index):36)
需要注意：
onerror最好寫在所有JS腳本的前面过吻，否則有可能捕獲不到錯(cuò)誤进泼；
onerror無(wú)法捕獲語(yǔ)法錯(cuò)誤；
到這里基本就清晰了：在實(shí)際的使用過(guò)程中纤虽，onerror主要是來(lái)捕獲預(yù)料之外的錯(cuò)誤柠辞，而try-catch則是用來(lái)在可預(yù)見(jiàn)情況下監(jiān)控特定的錯(cuò)誤饲做，兩者結(jié)合使用更加高效基协。
問(wèn)題又來(lái)了蜘渣，捕獲不到靜態(tài)資源加載異常怎么辦？
五杰刽、window.addEventListener
當(dāng)一項(xiàng)資源（如圖片或腳本）加載失敗菠发，加載資源的元素會(huì)觸發(fā)一個(gè)Event接口的error事件王滤，并執(zhí)行該元素上的onerror()處理函數(shù)。這些error事件不會(huì)向上冒泡到window雷酪，不過(guò)（至少在Firefox中）能被單一的window.addEventListener捕獲淑仆。
window.addEventListener('error', (error) => {
console.log('捕獲到異常：', error);
}, true)
控制臺(tái)輸出：
?
由于網(wǎng)絡(luò)請(qǐng)求異常不會(huì)事件冒泡，因此必須在捕獲階段將其捕捉到才行哥力，但是這種方式雖然可以捕捉到網(wǎng)絡(luò)請(qǐng)求的異常蔗怠，但是無(wú)法判斷HTTP的狀態(tài)是404還是其他比如500等等，所以還需要配合服務(wù)端日志才進(jìn)行排查分析才可以吩跋。
需要注意：
不同瀏覽器下返回的error對(duì)象可能不同寞射，需要注意兼容處理。
需要注意避免addEventListener重復(fù)監(jiān)聽(tīng)锌钮。
六桥温、Promise Catch
在promise中使用catch可以非常方便的捕獲到異步error，這個(gè)很簡(jiǎn)單梁丘。
沒(méi)有寫catch的Promise中拋出的錯(cuò)誤無(wú)法被onerror或try-catch捕獲到侵浸，所以我們務(wù)必要在Promise中不要忘記寫catch處理拋出的異常。
解決方案： 為了防止有漏掉的Promise異常氛谜，建議在全局增加一個(gè)對(duì)unhandledrejection的監(jiān)聽(tīng)掏觉，用來(lái)全局監(jiān)聽(tīng)Uncaught Promise Error。使用方式：
window.addEventListener("unhandledrejection", function(e){
console.log(e);
});
我們繼續(xù)來(lái)嘗試一下：
window.addEventListener("unhandledrejection", function(e){
e.preventDefault()
console.log('捕獲到異常：', e);
return true;
});
Promise.reject('promise error');
可以看到如下輸出：
?
那如果對(duì)Promise不進(jìn)行catch呢值漫？
window.addEventListener("unhandledrejection", function(e){
e.preventDefault()
console.log('捕獲到異常：', e);
return true;
});
new Promise((resolve, reject) => {
reject('jartto: promise error');
});
嗯澳腹，事實(shí)證明，也是會(huì)被正常捕獲到的杨何。
所以酱塔，正如我們上面所說(shuō)，為了防止有漏掉的Promise異常危虱，建議在全局增加一個(gè)對(duì)unhandledrejection的監(jiān)聽(tīng)羊娃，用來(lái)全局監(jiān)聽(tīng)Uncaught Promise Error。
補(bǔ)充一點(diǎn)：如果去掉控制臺(tái)的異常顯示埃跷，需要加上：
event.preventDefault();
七迁沫、VUE errorHandler
Vue.config.errorHandler = (err, vm, info) => {
console.error('通過(guò)vue errorHandler捕獲的錯(cuò)誤');
console.error(err);
console.error(vm);
console.error(info);
}
八、React 異常捕獲
React 16提供了一個(gè)內(nèi)置函數(shù)componentDidCatch捌蚊，使用它可以非常簡(jiǎn)單的獲取到react下的錯(cuò)誤信息
componentDidCatch(error, info) {
console.log(error, info);
}
除此之外，我們可以了解一下：error boundary
UI的某部分引起的JS錯(cuò)誤不應(yīng)該破壞整個(gè)程序近弟，為了幫React的使用者解決這個(gè)問(wèn)題缅糟，React 16介紹了一種關(guān)于錯(cuò)誤邊界（error boundary)的新觀念。
需要注意的是： error boundaries 并不會(huì)捕捉下面這些錯(cuò)誤祷愉。
1.事件處理器
2.異步代碼
3.服務(wù)端的渲染代碼
4.在error boundaries區(qū)域內(nèi)的錯(cuò)誤
我們來(lái)舉一個(gè)小例子窗宦，在下面這個(gè)componentDIdCatch(error,info)里的類會(huì)變成一個(gè)error boundary：
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
componentDidCatch(error, info) {
// Display fallback UI
this.setState({ hasError: true });
// You can also log the error to an error reporting service
logErrorToMyService(error, info);
}
render() {
if (this.state.hasError) {
// You can render any custom fallback UI
return
Something went wrong.
;}
return this.props.children;
}
}
然后我們像使用普通組件那樣使用它：
componentDidCatch()方法像JS的catch{}模塊一樣工作赦颇，但是對(duì)于組件，只有class類型的組件(class component)可以成為一個(gè)error boundaries赴涵。
實(shí)際上媒怯，大多數(shù)情況下我們可以在整個(gè)程序中定義一個(gè)error boundary組件，之后就可以一直使用它了髓窜！
九扇苞、iframe 異常
對(duì)于iframe的異常捕獲，我們還得借力window.onerror：
window.onerror = function(message, source, lineno, colno, error) {
console.log('捕獲到異常：',{message, source, lineno, colno, error});
}
一個(gè)簡(jiǎn)單的例子可能如下：
<iframe src="./iframe.html" frameborder="0"></iframe>
<script>
window.frames[0].onerror = function (message, source, lineno, colno, error) {
console.log('捕獲到 iframe 異常：',{message, source, lineno, colno, error});
return true;
};
十寄纵、Script error
一般情況鳖敷，如果出現(xiàn)Script error這樣的錯(cuò)誤，基本上可以確定是出現(xiàn)了跨域問(wèn)題程拭。這時(shí)候定踱，是不會(huì)有其他太多輔助信息的，但是解決思路無(wú)非如下：
跨源資源共享機(jī)制(CORS)：我們?yōu)閟cript標(biāo)簽添加crossOrigin屬性恃鞋。
<script src="http://jartto.wang/main.js" crossorigin></script>
或者動(dòng)態(tài)去添加js腳本：
const script = document.createElement('script');
script.crossOrigin = 'anonymous';
script.src = url;
document.body.appendChild(script);
特別注意崖媚，服務(wù)器端需要設(shè)置：Access-Control-Allow-Origin
十一、崩潰和卡頓
卡頓也就是網(wǎng)頁(yè)暫時(shí)響應(yīng)比較慢恤浪，JS可能無(wú)法及時(shí)執(zhí)行畅哑。但崩潰就不一樣了，網(wǎng)頁(yè)都崩潰了资锰，JS都不運(yùn)行了敢课，還有什么辦法可以監(jiān)控網(wǎng)頁(yè)的崩潰，并將網(wǎng)頁(yè)崩潰上報(bào)呢绷杜？
崩潰和卡頓也是不可忽視的直秆，也許會(huì)導(dǎo)致你的用戶流失。
1.利用window對(duì)象的load和beforeunload事件實(shí)現(xiàn)了網(wǎng)頁(yè)崩潰的監(jiān)控鞭盟。
不錯(cuò)的文章圾结，推薦閱讀：Logging Information on Browser Crashes。
window.addEventListener('load', function () {
sessionStorage.setItem('good_exit', 'pending');
setInterval(function () {
sessionStorage.setItem('time_before_crash', new Date().toString());
}, 1000);
});
window.addEventListener('beforeunload', function () {
sessionStorage.setItem('good_exit', 'true');
});
if(sessionStorage.getItem('good_exit') &&
sessionStorage.getItem('good_exit') !== 'true') {
/*
insert crash logging code here
*/
alert('Hey, welcome back from your crash, looks like you crashed on: ' + sessionStorage.getItem('time_before_crash'));
}
2.基于以下原因齿诉，我們可以使用Service Worker來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)崩潰的監(jiān)控：
Service Worker有自己獨(dú)立的工作線程筝野，與網(wǎng)頁(yè)區(qū)分開(kāi)，網(wǎng)頁(yè)崩潰了粤剧，Service Worker一般情況下不會(huì)崩潰歇竟；
Service Worker生命周期一般要比網(wǎng)頁(yè)還要長(zhǎng)，可以用來(lái)監(jiān)控網(wǎng)頁(yè)的狀態(tài)抵恋；
網(wǎng)頁(yè)可以通過(guò)navigator.serviceWorker.controller.postMessage API向掌管自己的SW發(fā)送消息焕议。
十二、錯(cuò)誤上報(bào)
1.通過(guò)Ajax發(fā)送數(shù)據(jù)
因?yàn)锳jax請(qǐng)求本身也有可能會(huì)發(fā)生異常弧关，而且有可能會(huì)引發(fā)跨域問(wèn)題盅安，一般情況下更推薦使用動(dòng)態(tài)創(chuàng)建img標(biāo)簽的形式進(jìn)行上報(bào)唤锉。
2.動(dòng)態(tài)創(chuàng)建img標(biāo)簽的形式
function report(error) {
let reportUrl = 'http://jartto.wang/report';
new Image().src = `${reportUrl}?logs=${error}`;
}
收集異常信息量太多，怎么辦别瞭？實(shí)際中窿祥，我們不得不考慮這樣一種情況：如果你的網(wǎng)站訪問(wèn)量很大，那么一個(gè)必然的錯(cuò)誤發(fā)送的信息就有很多條蝙寨，這時(shí)候晒衩，我們需要設(shè)置采集率，從而減緩服務(wù)器的壓力：
Reporter.send = function(data) {
// 只采集 30%
if(Math.random() < 0.3) {
send(data) // 上報(bào)錯(cuò)誤信息
}
}
采集率應(yīng)該通過(guò)實(shí)際情況來(lái)設(shè)定籽慢，隨機(jī)數(shù)浸遗，或者某些用戶特征都是不錯(cuò)的選擇。
十三箱亿、總結(jié)
回到我們開(kāi)頭提出的那個(gè)問(wèn)題跛锌，如何優(yōu)雅的處理異常呢？
1.可疑區(qū)域增加Try-Catch
2.全局監(jiān)控JS異常window.onerror
3.全局監(jiān)控靜態(tài)資源異常window.addEventListener
4.捕獲沒(méi)有Catch的Promise異常：unhandledrejection
5.VUE errorHandler和React componentDidCatch
6.監(jiān)控網(wǎng)頁(yè)崩潰：window對(duì)象的load和beforeunload
7.跨域crossOrigin解決
其實(shí)很簡(jiǎn)單届惋，正如上文所說(shuō)：采用組合方案髓帽，分類型的去捕獲異常，這樣基本 80%-90% 的問(wèn)題都化于無(wú)形脑豹。
我自己是一名從事了多年前端開(kāi)發(fā)的老程序員郑藏，辭職目前在做自己的私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的前端學(xué)習(xí)干貨瘩欺，從最基礎(chǔ)的到深入的都有整理必盖。送給每一位想學(xué)習(xí)的小伙伴。
學(xué)習(xí)討論企鵝群：956766604
?
?
今天就整理這幾個(gè)問(wèn)題俱饿，后期再跟大家一起交流~
