處理JavaScript異常的方法

程式設計師在工作上一定會遇到的就是寫程式時會出現報錯，這篇文章是基於JavaScript中的錯誤處理部分的概念。希望在大家寫JavaScript程式的時候會幫助大家。

Demo示範

我們使用的Demo可以在GitHub下載，程式運行起來會呈現如下頁面：

##所有的按鈕都會觸發錯誤，拋出TypeError。下面是該模組的定義：

// scripts/error.jsfunction error() {var foo = {};return foo.bar();}

在error()中定義了一個空物件foo，因此呼叫foo.bar()會因為未被定義而報錯。我們使用單元測試來驗證一下：

// tests/scripts/errorTest.jsit('throws a TypeError', function () {should.throws(error, TypeError);});

    

我們使用了Mocha配合Should.js做單元測試。

當你複製了程式碼庫並安裝了依賴套件以後，你可以使用npm t來執行測試。當然，你也可以執行某個測試文件，例如：./node_modules/mocha/bin/mocha tests/scripts/errorTest.js

相信我，像JavaScript這樣的動態語言來說，不管誰都很容易遇到這樣的錯誤。

壞的處理方式

我已經將按鈕對應的處理事件函數抽像得簡單一點，如下所示：

// scripts/badHandler.jsfunction badHandler(fn) {try {return fn();} catch (e) { }return null;}

badHandler接收一個fn作為回調函數，該回呼函數在badHandler中被呼叫。我們寫對應的單元測試：

// tests/scripts/badHandlerTest.jsit('returns a value without errors', function() {var fn = function()
{return 1;};var result = badHandler(fn);result.should.equal(1);});it('returns a null with errors', function() 
{var fn = function() {throw new Error('random error');};var result = badHandler(fn);should(result).equal(null);});

你會發現，如果出現異常，badHandler只是簡單的回傳null。如果你配合完整的程式碼，你會發現問題所在：

// scripts/badHandlerDom.js(function (handler, bomb) {var badButton = document.getElementById('bad');
if (badButton) {badButton.addEventListener('click', function () {handler(bomb);console.log('Imagine, getting promoted for hiding mistakes');});
}}(badHandler, error));

如果出錯的時候將其try-catch，然後僅僅返回null，我根本找不到哪裡出錯了。這種安靜失敗(fail-silent)策略可能導致UI紊亂也可能導致資料錯亂，並且在Debug的時候可能花了幾個小時卻忽略了try-catch裡面的程式碼才是致禍根源。如果程式碼複雜到有多層次的調用，簡直不可能找到哪裡出了錯。因此，我們不建議使用安靜失敗策略，我們需要更優雅的方式。

不壞但很爛的方式

// scripts/uglyHandler.jsfunction uglyHandler(fn) {try {return fn();} catch (e) {throw new Error('a new error');}}

它處理錯誤的方式是抓到錯誤e，然後拋出一個新的錯誤。這樣做的確優於之前安靜失敗的策略。如果出了錯，我可以一層層找回去，直到找到原本拋出的錯誤e。簡單的拋出一個Error('a new error')信息量比較有限，不精確，我們來自定義錯誤對象，傳出更多信息：

// scripts/specifiedError.js// Create a custom errorvar SpecifiedError = function SpecifiedError(message)
 {this.name = 'SpecifiedError';this.message = message || '';this.stack = (new Error()).stack;};
 SpecifiedError.prototype = new Error();SpecifiedError.prototype.constructor = SpecifiedError;
 、//  scripts/uglyHandlerImproved.jsfunction uglyHandlerImproved(fn) {try {return fn();} catch (e)
  {throw new SpecifiedError(e.message);}}// tests/scripts/uglyHandlerImprovedTest.jsit('returns a specified error with errors',
   function () {var fn = function () {throw new TypeError('type error');};should.throws(function () {uglyHandlerImproved(fn);}, 
   SpecifiedError);});

 

#現在，這個自訂的錯誤物件包含了原本錯誤的訊息，因此變得更加有用。但是因為再度拋出來，依然是未處理的錯誤。

截獲異常

一個想法是對所有的函數用try...catch包圍起來：

function main(bomb) {try {bomb();} catch (e) {// Handle all the error things}}

但是，這樣的程式碼將會變得非常臃腫、不可讀，而且效率低。是否還記得？在本文開始我們有提到在JavaScript中異常不過也是一個事件而已，幸運的是，有一個全域的異常事件處理方法(onerror)。

// scripts/errorHandlerDom.jswindow.addEventListener('error', function (e) {var error = e.error;console.log(error);});

取得堆疊資訊

你可以將錯誤訊息傳送到伺服器：

// scripts/errorAjaxHandlerDom.jswindow.addEventListener('error', function (e)
{var stack = e.error.stack;var message = e.error.toString();if (stack) {message += '\n' + stack;}
var xhr = new XMLHttpRequest();xhr.open('POST', '/log', true);// Fire an Ajax request with error detailsxhr.send(message);});

為了取得更詳細的報錯訊息，並且省去處理資料的麻煩，你也可以使用fundebug的JavaScript監控外掛三分鐘快速接取bug監控服務。

下面是伺服器接收到的報錯訊息：

如果你的腳本是放在另一個網域下，如果你不開啟CORS，除了Script error.，你將看不到任何有用的報錯資訊。如果想知道具體解法，請參考：Script error.全面解析。

非同步錯誤處理

由於setTimeout非同步執行，下列的程式碼例外狀況將不會被try...catch捕捉：

// scripts/asyncHandler.jsfunction asyncHandler(fn) {try {// This rips the potential bomb from the current contextsetTimeout(function () {fn();}, 1);} catch (e) { }}

  

try...catch語句只會捕捉目前執行環境下的例外狀況。但是在上面異常拋出的時候，JavaScript解釋器已經不在try...catch中了，因此無法被捕獲。所有的Ajax請求也是這樣。

我們可以稍微改進一下，將try...catch寫到非同步函數的回呼中：

setTimeout(function () {try {fn();} catch (e) {// Handle this async error}}, 1);

 

不過，這樣的套路會導致項目中充滿了try...catch，程式碼非常不簡潔。並且，執行JavaScript的V8引擎不鼓勵在函數中使用try...catch。好在，我們不需要這麼做，全域的錯誤處理onerror會捕捉這些錯誤。

結論

我的建議是不要隱藏錯誤，勇敢地拋出。沒有人會因為程式碼出現bug而導致程式崩潰而羞恥，我們可以讓程式中斷，讓用戶重來。錯誤是無法避免的，如何去處理它才是最重要的。

以上內容就是處理JavaScript報錯時的方法，大家覺得有用的話，趕緊收藏起來吧。

相關推薦：

如何解決vue.js在撰寫過程中出現空格不規範報錯的問題

##完美解決php安裝擴充mysqli的實作步驟及報錯

MySQL資料庫封包錯誤：Too many connections的解決方法

以上是處理JavaScript異常的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！