這篇文章主要介紹了JavaScript代碼異常監控實現過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

JavaScript異常一般有兩方面：語法錯誤和運行時錯誤。兩種錯誤的捕獲和處理方式不同，從而影響具體的方案選型。通常來說，處理JS異常的方案有兩種：try...catch捕獲 和 window.onerror捕獲。以下就兩種方案分別分析各自的優劣。

雖然語法錯誤本應該在開發構建階段使用測試工具避免，但難免會有馬失前蹄部署到線上的時候。

try...catch捕獲

這種方案要求開發人員在編寫代碼的時候，在預估有異常發生的代碼段使用try...catch，在發生異常時將異常信息發送給接口：

try{//可能發生異常的代碼段}catch(e){//將異常信息發送服務端}

try...catch的優點是可以細化到每個代碼塊，并且可以自定義錯誤信息以便統計。

具體到上文提到的兩種js異常，try...catch無法捕獲語法錯誤，當遇到語法錯誤時，瀏覽器仍然會拋出錯誤Uncaught SyntaxError，但是不會被捕獲，不會走進catch的代碼塊內。

另外，如果try代碼塊中有回調函數也不會被捕獲，比如：

try{var btn = $('#btn');  btn.on('click',function(){    //throw error  });}catch(e){}

上述代碼中btn的監聽函數里拋出的異常無法被外層的catch捕獲到，必須額外套一層：

try{var btn = $('#btn');  btn.on('click',function(){    try{      //throw error    }catch(e){}  });}catch(e){}

綜上所述，try...catch方案的部署非常復雜，如果人工部署除了要求巨量的工作量，還跟開發人員的能力和經驗有關。如果依賴編譯工具部署（比如fis），那每個代碼塊都套一層try...catch也是非常難看的并且容易引發一些不可預估的問題。

window.onerror捕獲

這種方式不需要開發人員在代碼中書寫大量的try...catch，通過給window添加onerror監聽，在js發生異常的時候便可以捕獲到錯誤信息，語法異常和運行異常均可被捕獲到。但是window.onerror這個監聽必須放在所有js文件之前才可以保證能夠捕獲到所有的異常信息。

window.onerror事件的詳細信息參考這里。

/** * @param {String} errorMessage  錯誤信息 * @param {String} scriptURL   出錯文件的URL * @param {Long}  lineNumber   出錯代碼的行號 * @param {Long}  columnNumber  出錯代碼的列號 * @param {Object} errorObj    錯誤信息Object */window.onerror = function(errorMessage, scriptURL, lineNumber,columnNumber,errorObj) {   // code..}

onerror的實現方式各瀏覽器略有差異，但是前三個參數都是相同的，某些低版本瀏覽器沒有后兩個參數。