錯誤處理和堆棧追蹤淺析

1、JavaScript錯誤處理和堆棧追蹤淺析有時我們會忽略錯誤處理和堆棧追蹤的一些細節(jié), 但是這些細節(jié)對于寫與測試或錯誤處理相關的庫來說是非常有用的. 例如這周, 對于 Chai 就有一個非常棒的PR, 該PR極大地改善了我們處理堆棧的方式, 當用戶的斷言失敗的時候, 我們會給予更多的提示信息(幫助用戶進行定位).作者：來源：dwqs|2017-03-08 08:57 收藏   分享 有時我們會忽略錯誤處理和堆棧追蹤的一些細節(jié), 但是這些細節(jié)對于寫與測試或錯誤處理相關的庫來說是非常有用的. 例如這周, 對于 Chai 就有一個非常棒的PR, 該PR極大地改善了我們處

2、理堆棧的方式, 當用戶的斷言失敗的時候, 我們會給予更多的提示信息(幫助用戶進行定位).合理地處理堆棧信息能使你清除無用的數(shù)據(jù), 而只專注于有用的數(shù)據(jù). 同時, 當更好地理解 Errors 對象及其相關屬性之后, 能有助于你更充分地利用 Errors.(函數(shù)的)調用棧是怎么工作的在談論錯誤之前, 先要了解下(函數(shù)的)調用棧的原理:當有一個函數(shù)被調用的時候, 它就被壓入到堆棧的頂部, 該函數(shù)運行完成之后, 又會從堆棧的頂部被移除.堆棧的數(shù)據(jù)結構就是后進先出, 以 LIFO (last in, first out) 著稱.例如:function c() console

3、.log('c');function b() console.log('b'); c();function a() console.log('a'); b();a();在上述的示例中, 當函數(shù) a 運行時, 其會被添加到堆棧的頂部. 然后, 當函數(shù) b 在函數(shù) a 的內部被調用時, 函數(shù) b 會被壓入到堆棧的頂部. 當函數(shù) c 在函數(shù) b 的內部被調用時也會被壓入到堆棧的頂部.當函數(shù) c 運行時, 堆棧中就包

4、含了 a, b 和 c(按此順序).當函數(shù) c 運行完畢之后, 就會從堆棧的頂部被移除, 然后函數(shù)調用的控制流就回到函數(shù) b. 函數(shù) b 運行完之后, 也會從堆棧的頂部被移除, 然后函數(shù)調用的控制流就回到函數(shù) a. 最后, 函數(shù) a 運行完成之后也會從堆棧的頂部被移除.為了更好地在demo中演示堆棧的行為, 可以使用 console.trace() 在控制臺輸出當前的堆棧數(shù)據(jù). 同時, 你要以從上至下的順序閱讀輸出的堆棧數(shù)據(jù).function c() co

5、nsole.log('c'); console.trace();function b() console.log('b'); c();function a() console.log('a'); b();a();在 Node 的 REPL 模式中運行上述代碼會得到如下輸出:Trace at c (repl:3:9) at b (repl:3:1) at a (repl:3:1) at repl:1:1 / <- For now feel free to ignore anything below this point, these are

6、Node's internals at realRunInThisContextScript (vm.js:22:35) at sigintHandlersWrap (vm.js:98:12) at ContextifyScript.Script.runInThisContext (vm.js:24:12) at REPLServer.defaultEval (repl.js:313:29) at bound (domain.js:280:14) at REPLServer.runBound as eval (domain.js:293:12)正如所看到的, 當從函數(shù) c&#

7、160;中輸出時, 堆棧中包含了函數(shù) a, b 以及c.如果在函數(shù) c 運行完成之后, 在函數(shù) b 中輸出當前的堆棧數(shù)據(jù), 就會看到函數(shù) c 已經從堆棧的頂部被移除, 此時堆棧中僅包括函數(shù) a 和 b.function c() console.log('c');function b() console.log('b'); c(); console.trace();function a() console.log('a'); b(

8、);正如所看到的, 函數(shù) c 運行完成之后, 已經從堆棧的頂部被移除.Trace at b (repl:4:9) at a (repl:3:1) at repl:1:1 / <- For now feel free to ignore anything below this point, these are Node's internals at realRunInThisContextScript (vm.js:22:35) at sigintHandlersWrap (vm.js:98:12) at ContextifyScript.Script.runI

9、nThisContext (vm.js:24:12) at REPLServer.defaultEval (repl.js:313:29) at bound (domain.js:280:14) at REPLServer.runBound as eval (domain.js:293:12) at REPLServer.onLine (repl.js:513:10)Error對象和錯誤處理當程序運行出現(xiàn)錯誤時, 通常會拋出一個 Error 對象. Error 對象可以作為用戶自定義錯誤對象繼承的原型.Etotype 對象包含如

10、下屬性：· constructor指向實例的構造函數(shù)· message錯誤信息· name錯誤的名字(類型)上述是 Etotype 的標準屬性, 此外, 不同的運行環(huán)境都有其特定的屬性. 在例如 Node, Firefox, Chrome, Edge, IE 10+, Opera 以及 Safari 6+ 這樣的環(huán)境中, Error 對象具備 stack 屬性, 該屬性包含了錯誤的堆棧軌跡. 一個錯誤實例的堆棧軌跡包含了自構造函數(shù)之后的所有堆棧結構.如果想了解更多關于 Error

11、 對象的特定屬性, 可以閱讀 MDN 上的這篇文章.為了拋出一個錯誤, 必須使用 throw 關鍵字. 為了 catch 一個拋出的錯誤, 必須使用 try.catch 包含可能跑出錯誤的代碼. Catch的參數(shù)是被跑出的錯誤實例.如 Java 一樣, JavaScript 也允許在 try/catch 之后使用 finally 關鍵字. 在處理完錯誤之后, 可以在 finally語句塊作一些清除工作.在語法上, 你可以使用 try 語句塊而其后不必跟著&

12、#160;catch 語句塊, 但必須跟著 finally 語句塊. 這意味著有三種不同的 try 語句形式:· try.catch· try.finally· try.catch.finallyTry語句內還可以在嵌入 try 語句:try try throw new Error('Nested error.'); / The error thrown here will be caught by its own catch clause catch (nestedErr) c

13、onsole.log('Nested catch'); / This runs catch (err) console.log('This will not run.');也可以在 catch 或 finally 中嵌入 try 語句:try throw new Error('First error'); catch (err) console.log('First catch running'); try throw new Error('Second erro

14、r'); catch (nestedErr) console.log('Second catch running.'); try console.log('The try block is running.'); finally try throw new Error('Error inside finally.'); catch (err) console.log('Caught an error inside the finally block.'); 需要重點說明一下的是在拋出錯誤時, 可以只拋出一個簡單值而不是&#

15、160;Error 對象. 盡管這看起來看酷并且是允許的, 但這并不是一個推薦的做法, 尤其是對于一些需要處理他人代碼的庫和框架的開發(fā)者, 因為沒有標準可以參考, 也無法得知會從用戶那里得到什么. 你不能信任用戶會拋出 Error 對象, 因為他們可能不會這么做, 而是簡單的拋出一個字符串或者數(shù)值. 這也意味著很難去處理堆棧信息和其它元信息.例如:function runWithoutThrowing(func) try func(); catch (e) console.log('There was an error, but I will n

16、ot throw it.'); console.log('The error's message was: ' + e.message) function funcThatThrowsError() throw new TypeError('I am a TypeError.');runWithoutThrowing(funcThatThrowsError);如果用戶傳遞給函數(shù) runWithoutThrowing 的參數(shù)拋出了一個錯誤對象, 上面的代碼能正常捕獲錯誤. 然后, 如果是拋出一個字符串, 就會碰到一些問題了:fu

17、nction runWithoutThrowing(func) try func(); catch (e) console.log('There was an error, but I will not throw it.'); console.log('The error's message was: ' + e.message) function funcThatThrowsString() throw 'I am a String.'runWithoutThrowing(funcThatThrowsString);現(xiàn)在第二個

18、0;console.log 會輸出undefined. 這看起來不是很重要, 但如果你需要確保 Error 對象有一個特定的屬性或者用另一種方式來處理 Error 對象的特定屬性(例如 Chai的throws斷言的做法), 你就得做大量的工作來確保程序的正確運行.同時, 如果拋出的不是 Error 對象, 也就獲取不到 stack 屬性.Errors 也可以被作為其它對象, 你也不必拋出它們, 這也是為什么大多數(shù)回調函數(shù)把 Errors 作為第一個參數(shù)的原因. 例如:const fs = req

19、uire('fs');fs.readdir('/example/i-do-not-exist', function callback(err, dirs) if (err instanceof Error) / readdir will throw an error because that directory does not exist / We will now be able to use the error object passed by it in our callback function console.log('Error Messa

20、ge: ' + err.message); console.log('See? We can use Errors without using try statements.'); else console.log(dirs); );最后, Error 對象也可以用于 rejected promise, 這使得很容易處理 rejected promise:new Promise(function(resolve, reject) reject(new Error('The promise was rejected.');).then(

21、function() console.log('I am an error.');).catch(function(err) if (err instanceof Error) console.log('The promise was rejected with an error.'); console.log('Error Message: ' + err.message); );處理堆棧這一節(jié)是針對支持 Error.captureStackTrace的運行環(huán)境, 例如Nodejs.Error.captureStackTrace

22、60;的第一個參數(shù)是 object, 第二個可選參數(shù)是一個 function. Error.captureStackTrace 會捕獲堆棧信息, 并在第一個參數(shù)中創(chuàng)建 stack 屬性來存儲捕獲到的堆棧信息. 如果提供了第二個參數(shù), 該函數(shù)將作為堆棧調用的終點. 因此, 捕獲到的堆棧信息將只顯示該函數(shù)調用之前的信息.用下面的兩個demo來解釋一下. 第一個, 僅將捕獲到的堆棧信息存于一個普通的對象之中:const myObj = ;function c() function b() / Here we will store the c

23、urrent stack trace into myObj Error.captureStackTrace(myObj); c();function a() b();/ First we will call these functionsa();/ Now let's see what is the stack trace stored into myObj.stackconsole.log(myObj.stack);/ This will print the following stack to the console:/ at b (repl:3:7) <- Since it

24、 was called inside B, the B call is the last entry in the stack/ at a (repl:2:1)/ at repl:1:1 <- Node internals below this line/ at realRunInThisContextScript (vm.js:22:35)/ at sigintHandlersWrap (vm.js:98:12)/ at ContextifyScript.Script.runInThisContext (vm.js:24:12)/ at REPLServer.defaultEval (

25、repl.js:313:29)/ at bound (domain.js:280:14)/ at REPLServer.runBound as eval (domain.js:293:12)/ at REPLServer.onLine (repl.js:513:10)從上面的示例可以看出, 首先調用函數(shù) a(被壓入堆棧), 然后在 a 里面調用函數(shù) b(被壓入堆棧且在a之上), 然后在 b 中捕獲到當前的堆棧信息, 并將其存儲到 myObj 中. 所以, 在控制臺輸出的堆棧信息中僅包含了 a和 

26、b 的調用信息.現(xiàn)在, 我們給 Error.captureStackTrace 傳遞一個函數(shù)作為第二個參數(shù), 看下輸出信息:const myObj = ;function d() / Here we will store the current stack trace into myObj / This time we will hide all the frames after b and b itself Error.captureStackTrace(myObj, b);function c() d();function b() c();function a() b();/ First we will call these functionsa();/ Now let's see what is the stack trace stored into myObj.stackconsole.log(myObj.stack);/ This will print the following stack to the console:/ at a (repl:2:1) <- As you can see here we only get fra