有時我們會忽略錯誤處理和堆棧追蹤的一些細節, 但是這些細節對于寫與測試或錯誤處理相關的庫來說是非常有用的. 例如這周, 對于 Chai 就有一個非常棒的PR, 該PR極大地改善了我們處理堆棧的方式, 當用戶的斷言失敗的時候, 我們會給予更多的提示信息(幫助用戶進行定位).
合理地處理堆棧信息能使你清除無用的數據, 而只專注于有用的數據. 同時, 當更好地理解 Errors 對象及其相關屬性之后, 能有助于你更充分地利用 Errors.
(函數的)調用棧是怎么工作的
在談論錯誤之前, 先要了解下(函數的)調用棧的原理:
當有一個函數被調用的時候, 它就被壓入到堆棧的頂部, 該函數運行完成之后, 又會從堆棧的頂部被移除.
堆棧的數據結構就是后進先出, 以 LIFO (last in, first out) 著稱.
例如:
function ?c()?{? ? ????console.log('c' );? ? }? ? ?? ? function ?b()?{? ? ????console.log('b' );? ? ????c();? ? }? ? ?? ? function ?a()?{? ? ????console.log('a' );? ? ????b();? ? }? ? ?? ? a();?? 在上述的示例中, 當函數 a 運行時, 其會被添加到堆棧的頂部. 然后, 當函數 b 在函數 a 的內部被調用時, 函數 b 會被壓入到堆棧的頂部. 當函數 c 在函數 b 的內部被調用時也會被壓入到堆棧的頂部.
當函數 c 運行時, 堆棧中就包含了 a, b 和 c(按此順序).
當函數 c 運行完畢之后, 就會從堆棧的頂部被移除, 然后函數調用的控制流就回到函數 b. 函數 b 運行完之后, 也會從堆棧的頂部被移除, 然后函數調用的控制流就回到函數 a. 最后, 函數 a 運行完成之后也會從堆棧的頂部被移除.
為了更好地在demo中演示堆棧的行為, 可以使用 console.trace() 在控制臺輸出當前的堆棧數據. 同時, 你要以從上至下的順序閱讀輸出的堆棧數據.
function ?c()?{? ? ????console.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?//?<? ? ????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)?? 正如所看到的, 當從函數 c 中輸出時, 堆棧中包含了函數 a, b 以及c.
如果在函數 c 運行完成之后, 在函數 b 中輸出當前的堆棧數據, 就會看到函數 c 已經從堆棧的頂部被移除, 此時堆棧中僅包括函數 a 和 b.
function ?c()?{? ? ????console.log('c' );? ? }? ? ?? ? function ?b()?{? ? ????console.log('b' );? ? ????c();? ? ????console.trace();? ? }? ? ?? ? function ?a()?{? ? ????console.log('a' );? ? ????b();? ? }?? 正如所看到的, 函數 c 運行完成之后, 已經從堆棧的頂部被移除.
Trace? ? ????at ?b?(repl:4:9)? ? ????at ?a?(repl:3:1)? ? ????at ?repl:1:1??//?<? ? ????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)? ? ????at ?REPLServer.onLine?(repl.js:513:10)?? Error對象和錯誤處理
當程序運行出現錯誤時, 通常會拋出一個 Error 對象. Error 對象可以作為用戶自定義錯誤對象繼承的原型.
Error.prototype 對象包含如下屬性：
constructor–指向實例的構造函數 message–錯誤信息 name–錯誤的名字(類型) 上述是 Error.prototype 的標準屬性, 此外, 不同的運行環境都有其特定的屬性. 在例如 Node, Firefox, Chrome, Edge, IE 10+, Opera 以及 Safari 6+ 這樣的環境中, Error 對象具備 stack 屬性, 該屬性包含了錯誤的堆棧軌跡. 一個錯誤實例的堆棧軌跡包含了自構造函數之后的所有堆棧結構.
如果想了解更多關于 Error 對象的特定屬性, 可以閱讀 MDN 上的這篇文章.
為了拋出一個錯誤, 必須使用 throw 關鍵字. 為了 catch 一個拋出的錯誤, 必須使用 try...catch 包含可能跑出錯誤的代碼. Catch的參數是被跑出的錯誤實例.
如 Java 一樣, JavaScript 也允許在 try/catch 之后使用 finally 關鍵字. 在處理完錯誤之后, 可以在finally 語句塊作一些清除工作.
在語法上, 你可以使用 try 語句塊而其后不必跟著 catch 語句塊, 但必須跟著 finally 語句塊. 這意味著有三種不同的 try 語句形式:
try...catch try...finally try...catch...finally Try語句內還可以在嵌入 try 語句:
try?{? ? ????try?{? ? ????????throw?new?Error('Nested?error.' );?//?The?error?thrown?here?will?be?caught?by ?its?own?`catch`?clause? ? ????}?catch?(nestedErr)?{? ? ????????console.log('Nested?catch' );?//?This?runs? ? ????}? ? }?catch?(err)?{? ? ????console.log('This?will?not?run.' );? ? }?? 也可以在 catch 或 finally 中嵌入 try 語句:
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.' );? ? ????}? ? }?? 需要重點說明一下的是在拋出錯誤時, 可以只拋出一個簡單值而不是 Error 對象. 盡管這看起來看酷并且是允許的, 但這并不是一個推薦的做法, 尤其是對于一些需要處理他人代碼的庫和框架的開發者, 因為沒有標準可以參考, 也無法得知會從用戶那里得到什么. 你不能信任用戶會拋出 Error 對象, 因為他們可能不會這么做, 而是簡單的拋出一個字符串或者數值. 這也意味著很難去處理堆棧信息和其它元信息.
例如:
function ?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 ?funcThatThrowsError()?{? ? ????throw?new?TypeError('I?am?a?TypeError.' );? ? }? ? ?? ? runWithoutThrowing(funcThatThrowsError);?? 如果用戶傳遞給函數 runWithoutThrowing 的參數拋出了一個錯誤對象, 上面的代碼能正常捕獲錯誤. 然后, 如果是拋出一個字符串, 就會碰到一些問題了:
function ?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);?? 現在第二個 console.log 會輸出undefined. 這看起來不是很重要, 但如果你需要確保 Error 對象有一個特定的屬性或者用另一種方式來處理 Error 對象的特定屬性(例如 Chai的throws斷言的做法), 你就得做大量的工作來確保程序的正確運行.
同時, 如果拋出的不是 Error 對象, 也就獲取不到 stack 屬性.
Errors 也可以被作為其它對象, 你也不必拋出它們, 這也是為什么大多數回調函數把 Errors 作為第一個參數的原因. 例如:
const?fs?=?require('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?Message:?' ?+?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 (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);? ? ????}? ? });?? 處理堆棧
這一節是針對支持 Error.captureStackTrace的運行環境, 例如Nodejs.
Error.captureStackTrace 的第一個參數是 object, 第二個可選參數是一個 function.Error.captureStackTrace 會捕獲堆棧信息, 并在第一個參數中創建 stack 屬性來存儲捕獲到的堆棧信息. 如果提供了第二個參數, 該函數將作為堆棧調用的終點. 因此, 捕獲到的堆棧信息將只顯示該函數調用之前的信息.
用下面的兩個demo來解釋一下. 第一個, 僅將捕獲到的堆棧信息存于一個普通的對象之中:
const?myObj?=?{};? ? ?? ? function ?c()?{? ? }? ? ?? ? function ?b()?{? ? ????//?Here?we?will?store?the?current ?stack?trace?into ?myObj? ? ????Error.captureStackTrace(myObj);? ? ????c();? ? }? ? ?? ? function ?a()?{? ? ????b();? ? }? ? ?? ? //?First ?we?will?call?these?functions? ? a();? ? ?? ? //?Now?let's?see?what?is ?the?stack?trace?stored?into ?myObj.stack? ? console.log(myObj.stack);? ? ?? ? //?This?will?print?the?following?stack?to ?the?console:? ? //????at ?b?(repl:3:7)?<? ? //????at ?a?(repl:2:1)? ? //????at ?repl:1:1?<? ? //????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)? ? //????at ?REPLServer.onLine?(repl.js:513:10)?? 從上面的示例可以看出, 首先調用函數 a(被壓入堆棧), 然后在 a 里面調用函數 b(被壓入堆棧且在a之上), 然后在 b 中捕獲到當前的堆棧信息, 并將其存儲到 myObj 中. 所以, 在控制臺輸出的堆棧信息中僅包含了 a和 b 的調用信息.
現在, 我們給 Error.captureStackTrace 傳遞一個函數作為第二個參數, 看下輸出信息:
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?functions? ? a();? ? ?? ? //?Now?let's?see?what?is ?the?stack?trace?stored?into ?myObj.stack? ? console.log(myObj.stack);? ? ?? ? //?This?will?print?the?following?stack?to ?the?console:? ? //????at ?a?(repl:2:1)?<? ? //????at ?repl:1:1?<? ? //????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)? ? //????at ?REPLServer.onLine?(repl.js:513:10)? ? //????at ?emitOne?(events.js:101:20)??
當將函數 b 作為第二個參數傳給 Error.captureStackTraceFunction 時, 輸出的堆棧就只包含了函數 b 調用之前的信息(盡管 Error.captureStackTraceFunction 是在函數 d 中調用的), 這也就是為什么只在控制臺輸出了 a. 這樣處理方式的好處就是用來隱藏一些與用戶無關的內部實現細節.
作者：佚名
來源：51CTO
總結
以上是生活随笔 為你收集整理的JavaScript错误处理和堆栈追踪浅析 的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網站內容還不錯，歡迎將生活随笔 推薦給好友。
