簡介： 為了提升應用穩定性，我們對前端項目開展了腳本異常治理的工作，對生産上報的js error進行了整體排查，試圖通過降低腳本異常的發生頻次來提升相關告警的準确率，結合最近在這方面閱讀的相關資料，嘗試階段性的做個總結，下面我們來介紹下js異常處理的一些經驗。
作者 | 肖榮強(路遷)
來源 | 阿裡開發者公衆号
寫在前面
為了提升應用穩定性，我們對前端項目開展了腳本異常治理的工作，對生産上報的js error進行了整體排查，試圖通過降低腳本異常的發生頻次來提升相關告警的準确率，結合最近在這方面閱讀的相關資料，嘗試階段性的做個總結，下面我們來介紹下js異常處理的一些經驗。
先說概念
什麼是異常
先來看一下官方的定義：
Error objects are thrown when runtime errors occur. The Error object can also be used as a base object for user-defined exceptions.
描述的很簡單，我們總結一下就是代碼在執行過程中遇到了問題，程式已經無法正常運作了，Error對象會被抛出，這一點它不同于大部分程式設計語言裡使用的異常對象Exception，甚至更适合稱之為錯誤，應該說事實也确實如此，Error對象在未被抛出時候和js裡其他的普通對象沒有任何差别是不會引發異常的，同時Error 對象也可用于使用者自定義錯誤的基礎對象。
看下面兩個例子：
↓↓↓執行結果↓↓↓
結論：隻有在執行過程中的異常可以被捕獲，文法解析階段的異常或者不在目前同步任務中的異常都無法被捕獲。
↓↓↓執行結果↓↓↓
以上紅色資訊裡包含了異常資訊（message）和棧跟蹤（stack trace）資訊，對于定位代碼中的問題起到重要作用，可以看到棧跟蹤是從底部檔案位置21:15到頂部25:7位置的；前兩個console在遇到異常時候未被執行，第二個script标簽内的代碼被正常執行。
結論：當任務執行過程中出現未處理的異常，會一直沿着調用棧一層層向外抛出（有點像事件冒泡），最終會導緻目前任務被終止執行。目前任務終止後JS 線程會繼續從任務隊列中提取下一個任務繼續執行。
異常的類型
| 錯誤名 | 描述 | 示例 |
| EvalError | 關于 eval [1]函數的錯誤，已不在目前ECMAScript規範中使用，不再會被運作時抛出。 | throw new EvalError('EvalError', 'file.js', 10); // 可以由業務代碼主動抛出 |
| RangeError | 值不在允許的範圍内，典型的是試圖傳遞一個數值給一個範圍内不包含該數值的函數，此時應該引發RangeError。 | const numObj = 123;numObj.toFixed(-1); // Uncaught RangeError: toFixed() digits argument must be between 0 and 100 at Number.toFixed |
| ReferenceError | 當一個不存在（或尚未初始化）的變量被引用時發生的錯誤。 | const a = undefinedVariable; // Uncaught ReferenceError: undefinedVariable is not defined |
| SyntaxError | 解析代碼階段，發現了不符合文法規範的代碼。 | const 111variable = 1; // Uncaught SyntaxError: Invalid or unexpected token |
| TypeError | 類型錯誤，用來表示值的類型是非預期類型。 | const a = null;a.doSomeThing(); // Uncaught TypeError: Cannot read properties of null (reading 'doSomeThing') |
| URIError | 使用URI處理函數産生的錯誤 | decodeURIComponent('%') // U |
點選連結檢視原文，擷取更多福利！
https://developer.aliyun.com/article/1058117?groupCode=alitech?utm_content=g_1000361548
版權聲明：本文内容由阿裡雲實名注冊使用者自發貢獻，版權歸原作者所有，阿裡雲開發者社群不擁有其著作權，亦不承擔相應法律責任。具體規則請檢視《阿裡雲開發者社群使用者服務協定》和《阿裡雲開發者社群知識産權保護指引》。如果您發現本社群中有涉嫌抄襲的内容，填寫侵權投訴表單進行舉報，一經查實，本社群将立刻删除涉嫌侵權内容。