一文告訴你如何優(yōu)雅處理前端異常？

作者：佚名 2019-03-14 15:59:44

前端一直是距離用戶(hù)最近的一層，隨著產(chǎn)品的日益完善，我們會(huì)更加注重用戶(hù)體驗(yàn)，而前端異常卻如鯁在喉，甚是煩人。一、為什么要處理異常？

前端一直是距離用戶(hù)最近的一層，隨著產(chǎn)品的日益完善，我們會(huì)更加注重用戶(hù)體驗(yàn)，而前端異常卻如鯁在喉，甚是煩人。

一、為什么要處理異常？

異常是不可控的，會(huì)影響最終的呈現(xiàn)結(jié)果，但是我們有充分的理由去做這樣的事情。

1.增強(qiáng)用戶(hù)體驗(yàn)；
2.遠(yuǎn)程定位問(wèn)題；
3.未雨綢繆，及早發(fā)現(xiàn)問(wèn)題；
4.無(wú)法復(fù)線(xiàn)問(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 <anonymous>: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ì)順利上到線(xiàn)上環(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 (<anonymous>:3:11)

并沒(méi)有捕獲到異常，這是需要我們特別注意的地方。

四、window.onerror 不是***的

當(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)求異常的情況：

<script> 
window.onerror = function(message, source, lineno, colno, error) { 
console.log('捕獲到異常：',{message, source, lineno, colno, error}); 
return true; 
} 
</script> 
<img src="./jartto.png">

我們發(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 ***寫(xiě)在所有 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 捕獲。

<scritp> 
window.addEventListener('error', (error) => { 
console.log('捕獲到異常：', error); 
}, true) 
</script> 
<img src="./jartto.png">

控制臺(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)有寫(xiě) catch 的 Promise 中拋出的錯(cuò)誤無(wú)法被 onerror 或 try-catch 捕獲到，所以我們務(wù)必要在 Promise 中不要忘記寫(xiě) 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) 里的類(lèi)會(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 <h1>Something went wrong.</h1>; 
} 
return this.props.children; 
} 
}

然后我們像使用普通組件那樣使用它：

<ErrorBoundary> 
<MyWidget /> 
</ErrorBoundary>

componentDidCatch() 方法像 JS 的 catch{} 模塊一樣工作，但是對(duì)于組件，只有 class 類(lèi)型的組件(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> 
十、Script error

一般情況，如果出現(xiàn) Script error 這樣的錯(cuò)誤，基本上可以確定是出現(xiàn)了跨域問(wèn)題。這時(shí)候，是不會(huì)有其他太多輔助信息的，但是解決思路無(wú)非如下：

跨源資源共享機(jī)制( CORS )：我們?yōu)?nbsp;script 標(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

此外，我們也可以試試這個(gè)-解決 Script Error 的另類(lèi)思路：

const originAddEventListener = EventTarget.prototype.addEventListener; 
EventTarget.prototype.addEventListener = function (type, listener, options) { 
const wrappedListener = function (...args) { 
try { 
return listener.apply(this, args); 
} 
catch (err) { 
throw err; 
} 
} 
return originAddEventListener.call(this, type, wrappedListener, options); 
}

簡(jiǎn)單解釋一下：

改寫(xiě)了 EventTarget 的 addEventListener 方法；
對(duì)傳入的 listener 進(jìn)行包裝，返回包裝過(guò)的 listener，對(duì)其執(zhí)行進(jìn)行 try-catch；
瀏覽器不會(huì)對(duì) try-catch 起來(lái)的異常進(jìn)行跨域攔截，所以 catch 到的時(shí)候，是有堆棧信息的；
重新 throw 出來(lái)異常的時(shí)候，執(zhí)行的是同域代碼，所以 window.onerror 捕獲的時(shí)候不會(huì)丟失堆棧信息；

利用包裝 addEventListener，我們還可以達(dá)到「擴(kuò)展堆棧」的效果：

(() => { 
const originAddEventListener = EventTarget.prototype.addEventListener; 
EventTarget.prototype.addEventListener = function (type, listener, options) { 
+ // 捕獲添加事件時(shí)的堆棧 
+ const addStack = new Error(`Event (${type})`).stack; 
const wrappedListener = function (...args) { 
try { 
return listener.apply(this, args); 
} 
catch (err) { 
+ // 異常發(fā)生時(shí)，擴(kuò)展堆棧 
+ err.stack += '\n' + addStack; 
throw err; 
} 
} 
return originAddEventListener.call(this, type, wrappedListener, options); 
} 
})();

十一、崩潰和卡頓

卡頓也就是網(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)致你的用戶(hù)流失。

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ú)立的工作線(xiàn)程，與網(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)?nbsp;Ajax 請(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)站訪(fǎ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ù)，或者某些用戶(hù)特征都是不錯(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 解決