每天前端開發(fā)干貨第一時間送達！

作者: Jartto's blog

http:///2018/11/20/js-exception-handling/

一、為什么要處理異常？

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

二、需要處理哪些異常？

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

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

1. 同步運行時錯誤：

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

2. 不能捕獲到具體的語法錯誤，只有一個語法錯誤提示。我們修改一下代碼，刪掉一個單引號：

Uncaught SyntaxError: Invalid or unexpected token
不過語法錯誤在我們開發(fā)階段就可以看到，應(yīng)該不會順利上到線上環(huán)境。

3. 異步錯誤

Uncaught TypeError: Cannot read property 'map' of undefined
    at setTimeout (<anonymous>:3:11)

四、window.onerror 不是萬能的

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. 再試試語法錯誤呢？

Uncaught SyntaxError: Invalid or unexpected token

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

捕獲到異常：{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ò)請求異常的情況：

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

• onerror 最好寫在所有 JS 腳本的前面，否則有可能捕獲不到錯誤；
• onerror 無法捕獲語法錯誤；

五、window.addEventListener

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

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

六、Promise Catch

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

event.preventDefault();

VUE errorHandler

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

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

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

九、iframe 異常

<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

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

(() => {
   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);
   }
 })();

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

好文章，我在看??