[[259544]]

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

一、為什么要處理異常？

1.增強用戶體驗；
2.遠程定位問題；
3.未雨綢繆，及早發(fā)現(xiàn)問題；
4.無法復線問題，尤其是移動端，機型，系統(tǒng)都是問題；
5.完善的前端方案，前端監(jiān)控系統(tǒng)；

對于 JS 而言，我們面對的僅僅只是異常，異常的出現(xiàn)不會直接導致 JS 引擎崩潰，最多只會使當前執(zhí)行的任務終止。

二、需要處理哪些異常？

對于前端來說，我們可做的異常捕獲還真不少?？偨Y(jié)一下，大概如下：

• JS 語法錯誤、代碼異常
• AJAX 請求異常
• 靜態(tài)資源加載異常
• Promise 異常
• Iframe 異常
• 跨域 Script error
• 崩潰和卡頓

三、Try-Catch 的誤區(qū)

try-catch 只能捕獲到同步的運行時錯誤，對語法和異步錯誤卻無能為力，捕獲不到。
1.同步運行時錯誤：

try { 
let name = 'jartto'; 
console.log(nam); 
} catch(e) { 
console.log('捕獲到異常：',e); 
} 

輸出：

捕獲到異常： ReferenceError: nam is not defined 
at <anonymous>:3:15 

2.不能捕獲到語法錯誤，我們修改一下代碼，刪掉一個單引號：

try { 
let name = 'jartto; 
console.log(nam); 
} catch(e) { 
  
console.log('捕獲到異常：',e); 
} 

輸出：

Uncaught SyntaxError: Invalid or unexpected token 

3.異步錯誤

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) 

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

四、window.onerror 不是***的

當 JS 運行時錯誤發(fā)生時，window 會觸發(fā)一個 ErrorEvent 接口的 error 事件，并執(zhí)行 window.onerror()。

/** 
* @param {String} message 錯誤信息 
* @param {String} source 出錯文件 
* @param {Number} lineno 行號 
* @param {Number} colno 列號 
* @param {Object} error Error對象（對象） 
*/ 
  
window.onerror = function(message, source, lineno, colno, error) { 
console.log('捕獲到異常：',{message, source, lineno, colno, error}); 
} 

1.首先試試同步運行時錯誤

window.onerror = function(message, source, lineno, colno, error) { 
// message：錯誤信息（字符串）。 
// source：發(fā)生錯誤的腳本URL（字符串） 
// lineno：發(fā)生錯誤的行號（數(shù)字） 
// colno：發(fā)生錯誤的列號（數(shù)字） 
// error：Error對象（對象） 
console.log('捕獲到異常：',{message, source, lineno, colno, error}); 
} 
Jartto; 

可以看到，我們捕獲到了異常：

2.再試試語法錯誤呢？

window.onerror = function(message, source, lineno, colno, error) { 
console.log('捕獲到異常：',{message, source, lineno, colno, error}); 
} 
let name = 'Jartto 

控制臺打印出了這樣的異常：

Uncaught SyntaxError: Invalid or unexpected token 

3.懷著忐忑的心，我們***來試試異步運行時錯誤：

window.onerror = function(message, source, lineno, colno, error) { 
console.log('捕獲到異常：',{message, source, lineno, colno, error}); 
} 
setTimeout(() => { 
Jartto; 
}); 

控制臺輸出了：

捕獲到異常： {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.接著，我們試試網(wǎng)絡(luò)請求異常的情況：

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

補充一點：window.onerror 函數(shù)只有在返回 true 的時候，異常才不會向上拋出，否則即使是知道異常的發(fā)生控制臺還是會顯示 Uncaught Error: xxxxx

window.onerror = function(message, source, lineno, colno, error) { 
console.log('捕獲到異常：',{message, source, lineno, colno, error}); 
return true; 
} 
setTimeout(() => { 
Jartto; 
}); 

控制臺就不會再有這樣的錯誤了：

Uncaught ReferenceError: Jartto is not defined 
at setTimeout ((index):36) 

需要注意：
onerror ***寫在所有 JS 腳本的前面，否則有可能捕獲不到錯誤；
onerror 無法捕獲語法錯誤；

到這里基本就清晰了：在實際的使用過程中，onerror 主要是來捕獲預料之外的錯誤，而 try-catch則是用來在可預見情況下監(jiān)控特定的錯誤，兩者結(jié)合使用更加高效。

五、window.addEventListener

當一項資源（如圖片或腳本）加載失敗，加載資源的元素會觸發(fā)一個 Event 接口的 error 事件，并執(zhí)行該元素上的onerror() 處理函數(shù)。這些 error 事件不會向上冒泡到 window ，不過（至少在 Firefox 中）能被單一的window.addEventListener 捕獲。

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

控制臺輸出：

由于網(wǎng)絡(luò)請求異常不會事件冒泡，因此必須在捕獲階段將其捕捉到才行，但是這種方式雖然可以捕捉到網(wǎng)絡(luò)請求的異常，但是無法判斷 HTTP 的狀態(tài)是 404 還是其他比如 500 等等，所以還需要配合服務端日志才進行排查分析才可以。

需要注意：

• 不同瀏覽器下返回的 error 對象可能不同，需要注意兼容處理。
• 需要注意避免 addEventListener 重復監(jiān)聽。

六、Promise Catch

沒有寫 catch 的 Promise 中拋出的錯誤無法被 onerror 或 try-catch 捕獲到，所以我們務必要在 Promise 中不要忘記寫 catch 處理拋出的異常。

解決方案： 為了防止有漏掉的 Promise 異常，建議在全局增加一個對 unhandledrejection 的監(jiān)聽，用來全局監(jiān)聽Uncaught Promise Error。使用方式：

window.addEventListener("unhandledrejection", function(e){ 
console.log(e); 
}); 

我們繼續(xù)來嘗試一下：

window.addEventListener("unhandledrejection", function(e){ 
e.preventDefault() 
console.log('捕獲到異常：', e); 
return true; 
}); 
Promise.reject('promise error'); 

可以看到如下輸出：

那如果對 Promise 不進行 catch 呢？

window.addEventListener("unhandledrejection", function(e){ 
e.preventDefault() 
console.log('捕獲到異常：', e); 
return true; 
}); 
new Promise((resolve, reject) => { 
reject('jartto: promise error'); 
}); 

所以，正如我們上面所說，為了防止有漏掉的 Promise 異常，建議在全局增加一個對 unhandledrejection 的監(jiān)聽，用來全局監(jiān)聽 Uncaught Promise Error。

補充一點：如果去掉控制臺的異常顯示，需要加上：

event.preventDefault(); 

七、VUE errorHandler

Vue.config.errorHandler = (err, vm, info) => { 
console.error('通過vue errorHandler捕獲的錯誤'); 
console.error(err); 
console.error(vm); 
console.error(info); 
} 

八、React 異常捕獲

React 16 提供了一個內(nèi)置函數(shù) componentDidCatch，使用它可以非常簡單的獲取到 react 下的錯誤信息

componentDidCatch(error, info) { 
console.log(error, info); 
} 

除此之外，我們可以了解一下：error boundary
UI 的某部分引起的 JS 錯誤不應該破壞整個程序，為了幫 React 的使用者解決這個問題，React 16 介紹了一種關(guān)于錯誤邊界（error boundary)的新觀念。

1.事件處理器
2.異步代碼
3.服務端的渲染代碼
4.在 error boundaries 區(qū)域內(nèi)的錯誤

我們來舉一個小例子，在下面這個 componentDIdCatch(error,info) 里的類會變成一個 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{} 模塊一樣工作，但是對于組件，只有 class 類型的組件(class component )可以成為一個 error boundaries 。

實際上，大多數(shù)情況下我們可以在整個程序中定義一個 error boundary 組件，之后就可以一直使用它了！

九、iframe 異常

對于 iframe 的異常捕獲，我們還得借力 window.onerror：

window.onerror = function(message, source, lineno, colno, error) { 
console.log('捕獲到異常：',{message, source, lineno, colno, error}); 
} 

一個簡單的例子可能如下：

  
<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 這樣的錯誤，基本上可以確定是出現(xiàn)了跨域問題。這時候，是不會有其他太多輔助信息的，但是解決思路無非如下：

<script src="http://jartto.wang/main.js" crossorigin></script>

或者動態(tài)去添加 js 腳本：

const script = document.createElement('script'); 
script.crossOrigin = 'anonymous'; 
script.src = url; 
document.body.appendChild(script); 

此外，我們也可以試試這個-解決 Script Error 的另類思路：

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); 
} 

簡單解釋一下：

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

利用包裝 addEventListener，我們還可以達到「擴展堆棧」的效果：

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

十一、崩潰和卡頓

卡頓也就是網(wǎng)頁暫時響應比較慢， JS 可能無法及時執(zhí)行。但崩潰就不一樣了，網(wǎng)頁都崩潰了，JS都不運行了，還有什么辦法可以監(jiān)控網(wǎng)頁的崩潰，并將網(wǎng)頁崩潰上報呢？

1.利用 window 對象的 load 和 beforeunload 事件實現(xiàn)了網(wǎng)頁崩潰的監(jiān)控。
不錯的文章，推薦閱讀：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 來實現(xiàn)網(wǎng)頁崩潰的監(jiān)控：

• Service Worker 有自己獨立的工作線程，與網(wǎng)頁區(qū)分開，網(wǎng)頁崩潰了，Service Worker 一般情況下不會崩潰；
• Service Worker 生命周期一般要比網(wǎng)頁還要長，可以用來監(jiān)控網(wǎng)頁的狀態(tài)；
• 網(wǎng)頁可以通過 navigator.serviceWorker.controller.postMessage API 向掌管自己的 SW 發(fā)送消息。

十二、錯誤上報

1.通過 Ajax 發(fā)送數(shù)據(jù)
因為 Ajax 請求本身也有可能會發(fā)生異常，而且有可能會引發(fā)跨域問題，一般情況下更推薦使用動態(tài)創(chuàng)建 img 標簽的形式進行上報。

2.動態(tài)創(chuàng)建 img 標簽的形式

function report(error) { 
let reportUrl = 'http://jartto.wang/report'; 
new Image().src = `${reportUrl}?logs=${error}`; 
} 

收集異常信息量太多，怎么辦？實際中，我們不得不考慮這樣一種情況：如果你的網(wǎng)站訪問量很大，那么一個必然的錯誤發(fā)送的信息就有很多條，這時候，我們需要設(shè)置采集率，從而減緩服務器的壓力：

Reporter.send = function(data) { 
// 只采集 30% 
if(Math.random() < 0.3) { 
send(data) // 上報錯誤信息 
} 
} 

十三、總結(jié)

1.可疑區(qū)域增加 Try-Catch
2.全局監(jiān)控 JS 異常 window.onerror
3.全局監(jiān)控靜態(tài)資源異常 window.addEventListener
4.捕獲沒有 Catch 的 Promise 異常：unhandledrejection
5.VUE errorHandler 和 React componentDidCatch
6.監(jiān)控網(wǎng)頁崩潰：window 對象的 load 和 beforeunload
7.跨域 crossOrigin 解決

其實很簡單，正如上文所說：采用組合方案，分類型的去捕獲異常，這樣基本 80%-90% 的問題都化于無形。