JavaScript错误处理和堆栈追踪详解
有时我们会忽略错误处理和堆栈追踪的一些细节,但是这些细节对于写与测试或错误处理相关的库来说是非常有用的.例如这周,对于Chai就有一个非常棒的PR,该PR极大地改善了我们处理堆栈的方式,当用户的断言失败的时候,我们会给予更多的提示信息(帮助用户进行定位).
合理地处理堆栈信息能使你清除无用的数据,而只专注于有用的数据.同时,当更好地理解Errors对象及其相关属性之后,能有助于你更充分地利用Errors.
(函数的)调用栈是怎么工作的
在谈论错误之前,先要了解下(函数的)调用栈的原理:
当有一个函数被调用的时候,它就被压入到堆栈的顶部,该函数运行完成之后,又会从堆栈的顶部被移除.
堆栈的数据结构就是后进先出,以LIFO(lastin,firstout)著称.
例如:
functionc(){
console.log('c');
}
functionb(){
console.log('b');
c();
}
functiona(){
console.log('a');
b();
}
a();
在上述的示例中,当函数a运行时,其会被添加到堆栈的顶部.然后,当函数b在函数a的内部被调用时,函数b会被压入到堆栈的顶部.当函数c在函数b的内部被调用时也会被压入到堆栈的顶部.
当函数c运行时,堆栈中就包含了a,b和c(按此顺序).
当函数c运行完毕之后,就会从堆栈的顶部被移除,然后函数调用的控制流就回到函数b.函数b运行完之后,也会从堆栈的顶部被移除,然后函数调用的控制流就回到函数a.最后,函数a运行完成之后也会从堆栈的顶部被移除.
为了更好地在demo中演示堆栈的行为,可以使用console.trace()在控制台输出当前的堆栈数据.同时,你要以从上至下的顺序阅读输出的堆栈数据.
functionc(){
console.log('c');
console.trace();
}
functionb(){
console.log('b');
c();
}
functiona(){
console.log('a');
b();
}
a();
在Node的REPL模式中运行上述代码会得到如下输出:
Trace atc(repl:3:9) atb(repl:3:1) ata(repl:3:1) atrepl:1:1//<--Fornowfeelfreetoignoreanythingbelowthispoint,theseareNode'sinternals atrealRunInThisContextScript(vm.js:22:35) atsigintHandlersWrap(vm.js:98:12) atContextifyScript.Script.runInThisContext(vm.js:24:12) atREPLServer.defaultEval(repl.js:313:29) atbound(domain.js:280:14) atREPLServer.runBound[aseval](domain.js:293:12)
正如所看到的,当从函数c中输出时,堆栈中包含了函数a,b以及c.
如果在函数c运行完成之后,在函数b中输出当前的堆栈数据,就会看到函数c已经从堆栈的顶部被移除,此时堆栈中仅包括函数a和b.
functionc(){
console.log('c');
}
functionb(){
console.log('b');
c();
console.trace();
}
functiona(){
console.log('a');
b();
}
正如所看到的,函数c运行完成之后,已经从堆栈的顶部被移除.
Trace atb(repl:4:9) ata(repl:3:1) atrepl:1:1//<--Fornowfeelfreetoignoreanythingbelowthispoint,theseareNode'sinternals atrealRunInThisContextScript(vm.js:22:35) atsigintHandlersWrap(vm.js:98:12) atContextifyScript.Script.runInThisContext(vm.js:24:12) atREPLServer.defaultEval(repl.js:313:29) atbound(domain.js:280:14) atREPLServer.runBound[aseval](domain.js:293:12) atREPLServer.onLine(repl.js:513:10)
Error对象和错误处理
当程序运行出现错误时,通常会抛出一个Error对象.Error对象可以作为用户自定义错误对象继承的原型.
Error.prototype对象包含如下属性：
constructor–指向实例的构造函数
message–错误信息
name–错误的名字(类型)
上述是Error.prototype的标准属性,此外,不同的运行环境都有其特定的属性.在例如Node,Firefox,Chrome,Edge,IE10+,Opera以及Safari6+这样的环境中,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{
thrownewError('Nestederror.');//Theerrorthrownherewillbecaughtbyitsown`catch`clause
}catch(nestedErr){
console.log('Nestedcatch');//Thisruns
}
}catch(err){
console.log('Thiswillnotrun.');
}
也可以在catch或finally中嵌入try语句:
try{
thrownewError('Firsterror');
}catch(err){
console.log('Firstcatchrunning');
try{
thrownewError('Seconderror');
}catch(nestedErr){
console.log('Secondcatchrunning.');
}
}
try{
console.log('Thetryblockisrunning...');
}finally{
try{
thrownewError('Errorinsidefinally.');
}catch(err){
console.log('Caughtanerrorinsidethefinallyblock.');
}
}
需要重点说明一下的是在抛出错误时,可以只抛出一个简单值而不是Error对象.尽管这看起来看酷并且是允许的,但这并不是一个推荐的做法,尤其是对于一些需要处理他人代码的库和框架的开发者,因为没有标准可以参考,也无法得知会从用户那里得到什么.你不能信任用户会抛出Error对象,因为他们可能不会这么做,而是简单的抛出一个字符串或者数值.这也意味着很难去处理堆栈信息和其它元信息.
例如:
functionrunWithoutThrowing(func){
try{
func();
}catch(e){
console.log('Therewasanerror,butIwillnotthrowit.');
console.log('Theerror\'smessagewas:'+e.message)
}
}
functionfuncThatThrowsError(){
thrownewTypeError('IamaTypeError.');
}
runWithoutThrowing(funcThatThrowsError);
如果用户传递给函数runWithoutThrowing的参数抛出了一个错误对象,上面的代码能正常捕获错误.然后,如果是抛出一个字符串,就会碰到一些问题了:
functionrunWithoutThrowing(func){
try{
func();
}catch(e){
console.log('Therewasanerror,butIwillnotthrowit.');
console.log('Theerror\'smessagewas:'+e.message)
}
}
functionfuncThatThrowsString(){
throw'IamaString.';
}
runWithoutThrowing(funcThatThrowsString);
现在第二个console.log会输出undefined.这看起来不是很重要,但如果你需要确保Error对象有一个特定的属性或者用另一种方式来处理Error对象的特定属性(例如Chai的throws断言的做法),你就得做大量的工作来确保程序的正确运行.
同时,如果抛出的不是Error对象,也就获取不到stack属性.
Errors也可以被作为其它对象,你也不必抛出它们,这也是为什么大多数回调函数把Errors作为第一个参数的原因.例如:
constfs=require('fs');
fs.readdir('/example/i-do-not-exist',functioncallback(err,dirs){
if(errinstanceofError){
//`readdir`willthrowanerrorbecausethatdirectorydoesnotexist
//Wewillnowbeabletousetheerrorobjectpassedbyitinourcallbackfunction
console.log('ErrorMessage:'+err.message);
console.log('See?WecanuseErrorswithoutusingtrystatements.');
}else{
console.log(dirs);
}
});
最后,Error对象也可以用于rejectedpromise,这使得很容易处理rejectedpromise:
newPromise(function(resolve,reject){
reject(newError('Thepromisewasrejected.'));
}).then(function(){
console.log('Iamanerror.');
}).catch(function(err){
if(errinstanceofError){
console.log('Thepromisewasrejectedwithanerror.');
console.log('ErrorMessage:'+err.message);
}
});
处理堆栈
这一节是针对支持Error.captureStackTrace的运行环境,例如Nodejs.
Error.captureStackTrace的第一个参数是object,第二个可选参数是一个function.Error.captureStackTrace会捕获堆栈信息,并在第一个参数中创建stack属性来存储捕获到的堆栈信息.如果提供了第二个参数,该函数将作为堆栈调用的终点.因此,捕获到的堆栈信息将只显示该函数调用之前的信息.
用下面的两个demo来解释一下.第一个,仅将捕获到的堆栈信息存于一个普通的对象之中:
constmyObj={};
functionc(){
}
functionb(){
//HerewewillstorethecurrentstacktraceintomyObj
Error.captureStackTrace(myObj);
c();
}
functiona(){
b();
}
//Firstwewillcallthesefunctions
a();
//Nowlet'sseewhatisthestacktracestoredintomyObj.stack
console.log(myObj.stack);
//Thiswillprintthefollowingstacktotheconsole:
//atb(repl:3:7)<--SinceitwascalledinsideB,theBcallisthelastentryinthestack
//ata(repl:2:1)
//atrepl:1:1<--Nodeinternalsbelowthisline
//atrealRunInThisContextScript(vm.js:22:35)
//atsigintHandlersWrap(vm.js:98:12)
//atContextifyScript.Script.runInThisContext(vm.js:24:12)
//atREPLServer.defaultEval(repl.js:313:29)
//atbound(domain.js:280:14)
//atREPLServer.runBound[aseval](domain.js:293:12)
//atREPLServer.onLine(repl.js:513:10)
从上面的示例可以看出,首先调用函数a(被压入堆栈),然后在a里面调用函数b(被压入堆栈且在a之上),然后在b中捕获到当前的堆栈信息,并将其存储到myObj中.所以,在控制台输出的堆栈信息中仅包含了a和b的调用信息.
现在,我们给Error.captureStackTrace传递一个函数作为第二个参数,看下输出信息:
constmyObj={};
functiond(){
//HerewewillstorethecurrentstacktraceintomyObj
//Thistimewewillhidealltheframesafter`b`and`b`itself
Error.captureStackTrace(myObj,b);
}
functionc(){
d();
}
functionb(){
c();
}
functiona(){
b();
}
//Firstwewillcallthesefunctions
a();
//Nowlet'sseewhatisthestacktracestoredintomyObj.stack
console.log(myObj.stack);
//Thiswillprintthefollowingstacktotheconsole:
//ata(repl:2:1)<--Asyoucanseehereweonlygetframesbefore`b`wascalled
//atrepl:1:1<--Nodeinternalsbelowthisline
//atrealRunInThisContextScript(vm.js:22:35)
//atsigintHandlersWrap(vm.js:98:12)
//atContextifyScript.Script.runInThisContext(vm.js:24:12)
//atREPLServer.defaultEval(repl.js:313:29)
//atbound(domain.js:280:14)
//atREPLServer.runBound[aseval](domain.js:293:12)
//atREPLServer.onLine(repl.js:513:10)
//atemitOne(events.js:101:20)
当将函数b作为第二个参数传给Error.captureStackTraceFunction时,输出的堆栈就只包含了函数b调用之前的信息(尽管Error.captureStackTraceFunction是在函数d中调用的),这也就是为什么只在控制台输出了a.这样处理方式的好处就是用来隐藏一些与用户无关的内部实现细节.
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。