JavaScript错误处理和堆栈追踪浅析-阿里云开发者社区

开发者社区> 行者武松> 正文

JavaScript错误处理和堆栈追踪浅析

简介:
+关注继续查看

JavaScript错误处理和堆栈追踪浅析


有时我们会忽略错误处理和堆栈追踪的一些细节, 但是这些细节对于写与测试或错误处理相关的库来说是非常有用的. 例如这周, 对于 Chai 就有一个非常棒的PR, 该PR极大地改善了我们处理堆栈的方式, 当用户的断言失败的时候, 我们会给予更多的提示信息(帮助用户进行定位).

合理地处理堆栈信息能使你清除无用的数据, 而只专注于有用的数据. 同时, 当更好地理解 Errors 对象及其相关属性之后, 能有助于你更充分地利用 Errors.

(函数的)调用栈是怎么工作的

在谈论错误之前, 先要了解下(函数的)调用栈的原理:

当有一个函数被调用的时候, 它就被压入到堆栈的顶部, 该函数运行完成之后, 又会从堆栈的顶部被移除.

堆栈的数据结构就是后进先出, 以 LIFO (last in, first out) 著称.

例如:


  1. function c() { 
  2.  
  3.     console.log('c'); 
  4.  
  5.  
  6.   
  7.  
  8. function b() { 
  9.  
  10.     console.log('b'); 
  11.  
  12.     c(); 
  13.  
  14.  
  15.   
  16.  
  17. function a() { 
  18.  
  19.     console.log('a'); 
  20.  
  21.     b(); 
  22.  
  23.  
  24.   
  25.  
  26. a();  

在上述的示例中, 当函数 a 运行时, 其会被添加到堆栈的顶部. 然后, 当函数 b 在函数 a 的内部被调用时, 函数 b 会被压入到堆栈的顶部. 当函数 c 在函数 b 的内部被调用时也会被压入到堆栈的顶部.

当函数 c 运行时, 堆栈中就包含了 a, b 和 c(按此顺序).

当函数 c 运行完毕之后, 就会从堆栈的顶部被移除, 然后函数调用的控制流就回到函数 b. 函数 b 运行完之后, 也会从堆栈的顶部被移除, 然后函数调用的控制流就回到函数 a. 最后, 函数 a 运行完成之后也会从堆栈的顶部被移除.

为了更好地在demo中演示堆栈的行为, 可以使用 console.trace() 在控制台输出当前的堆栈数据. 同时, 你要以从上至下的顺序阅读输出的堆栈数据.


  1. function c() { 
  2.  
  3.     console.log('c'); 
  4.  
  5.     console.trace(); 
  6.  
  7.  
  8.   
  9.  
  10. function b() { 
  11.  
  12.     console.log('b'); 
  13.  
  14.     c(); 
  15.  
  16.  
  17.   
  18.  
  19. function a() { 
  20.  
  21.     console.log('a'); 
  22.  
  23.     b(); 
  24.  
  25.  
  26.   
  27. a();  

在 Node 的 REPL 模式中运行上述代码会得到如下输出:


  1. Trace 
  2.  
  3.     at c (repl:3:9) 
  4.  
  5.     at b (repl:3:1) 
  6.  
  7.     at a (repl:3:1) 
  8.  
  9.     at repl:1:1 // <-- For now feel free to ignore anything below this point, these are Node's internals 
  10.  
  11.     at realRunInThisContextScript (vm.js:22:35) 
  12.  
  13.     at sigintHandlersWrap (vm.js:98:12) 
  14.  
  15.     at ContextifyScript.Script.runInThisContext (vm.js:24:12) 
  16.  
  17.     at REPLServer.defaultEval (repl.js:313:29) 
  18.  
  19.     at bound (domain.js:280:14) 
  20.  
  21.     at REPLServer.runBound [as eval] (domain.js:293:12)  

正如所看到的, 当从函数 c 中输出时, 堆栈中包含了函数 a, b 以及c.

如果在函数 c 运行完成之后, 在函数 b 中输出当前的堆栈数据, 就会看到函数 c 已经从堆栈的顶部被移除, 此时堆栈中仅包括函数 a 和 b.


  1. function c() { 
  2.  
  3.     console.log('c'); 
  4.  
  5.  
  6.   
  7.  
  8. function b() { 
  9.  
  10.     console.log('b'); 
  11.  
  12.     c(); 
  13.  
  14.     console.trace(); 
  15.  
  16.  
  17.   
  18.  
  19. function a() { 
  20.  
  21.     console.log('a'); 
  22.  
  23.     b(); 
  24.  
  25. }  

正如所看到的, 函数 c 运行完成之后, 已经从堆栈的顶部被移除.


  1. Trace 
  2.  
  3.     at b (repl:4:9) 
  4.  
  5.     at a (repl:3:1) 
  6.  
  7.     at repl:1:1  // <-- For now feel free to ignore anything below this point, these are Node's internals 
  8.  
  9.     at realRunInThisContextScript (vm.js:22:35) 
  10.  
  11.     at sigintHandlersWrap (vm.js:98:12) 
  12.  
  13.     at ContextifyScript.Script.runInThisContext (vm.js:24:12) 
  14.  
  15.     at REPLServer.defaultEval (repl.js:313:29) 
  16.  
  17.     at bound (domain.js:280:14) 
  18.  
  19.     at REPLServer.runBound [as eval] (domain.js:293:12) 
  20.  
  21.     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 语句:


  1. try { 
  2.  
  3.     try { 
  4.  
  5.         throw new Error('Nested error.'); // The error thrown here will be caught by its own `catch` clause 
  6.  
  7.     } catch (nestedErr) { 
  8.  
  9.         console.log('Nested catch'); // This runs 
  10.  
  11.     } 
  12.  
  13. } catch (err) { 
  14.  
  15.     console.log('This will not run.'); 
  16.  
  17. }  

也可以在 catch 或 finally 中嵌入 try 语句:


  1. try { 
  2.  
  3.     console.log('The try block is running...'); 
  4.  
  5. } finally { 
  6.  
  7.     try { 
  8.  
  9.         throw new Error('Error inside finally.'); 
  10.  
  11.     } catch (err) { 
  12.  
  13.         console.log('Caught an error inside the finally block.'); 
  14.  
  15.     } 
  16.  
  17. }  

需要重点说明一下的是在抛出错误时, 可以只抛出一个简单值而不是 Error 对象. 尽管这看起来看酷并且是允许的, 但这并不是一个推荐的做法, 尤其是对于一些需要处理他人代码的库和框架的开发者, 因为没有标准可以参考, 也无法得知会从用户那里得到什么. 你不能信任用户会抛出 Error 对象, 因为他们可能不会这么做, 而是简单的抛出一个字符串或者数值. 这也意味着很难去处理堆栈信息和其它元信息.

例如:


  1. function runWithoutThrowing(func) { 
  2.  
  3.     try { 
  4.  
  5.         func(); 
  6.  
  7.     } catch (e) { 
  8.  
  9.         console.log('There was an error, but I will not throw it.'); 
  10.  
  11.         console.log('The error\'s message was: ' + e.message) 
  12.  
  13.     } 
  14.  
  15.  
  16.   
  17.  
  18. function funcThatThrowsError() { 
  19.  
  20.     throw new TypeError('I am a TypeError.'); 
  21.  
  22.  
  23.   
  24.  
  25. runWithoutThrowing(funcThatThrowsError);  

如果用户传递给函数 runWithoutThrowing 的参数抛出了一个错误对象, 上面的代码能正常捕获错误. 然后, 如果是抛出一个字符串, 就会碰到一些问题了:


  1. function runWithoutThrowing(func) { 
  2.  
  3.     try { 
  4.  
  5.         func(); 
  6.  
  7.     } catch (e) { 
  8.  
  9.         console.log('There was an error, but I will not throw it.'); 
  10.  
  11.         console.log('The error\'s message was: ' + e.message) 
  12.  
  13.     } 
  14.  
  15.  
  16.   
  17.  
  18. function funcThatThrowsString() { 
  19.  
  20.     throw 'I am a String.'
  21.  
  22.  
  23.   
  24.  
  25. runWithoutThrowing(funcThatThrowsString);  

现在第二个 console.log 会输出undefined. 这看起来不是很重要, 但如果你需要确保 Error 对象有一个特定的属性或者用另一种方式来处理 Error 对象的特定属性(例如 Chai的throws断言的做法), 你就得做大量的工作来确保程序的正确运行.

同时, 如果抛出的不是 Error 对象, 也就获取不到 stack 属性.

Errors 也可以被作为其它对象, 你也不必抛出它们, 这也是为什么大多数回调函数把 Errors 作为第一个参数的原因. 例如:


  1. const fs = require('fs'); 
  2.  
  3.   
  4.  
  5. fs.readdir('/example/i-do-not-exist'function callback(err, dirs) { 
  6.  
  7.     if (err instanceof Error) { 
  8.  
  9.         // `readdir` will throw an error because that directory does not exist 
  10.  
  11.         // We will now be able to use the error object passed by it in our callback function 
  12.  
  13.         console.log('Error Message: ' + err.message); 
  14.  
  15.         console.log('See? We can use Errors without using try statements.'); 
  16.  
  17.     } else { 
  18.  
  19.         console.log(dirs); 
  20.  
  21.     } 
  22.  
  23. });  

最后, Error 对象也可以用于 rejected promise, 这使得很容易处理 rejected promise:


  1. new Promise(function(resolve, reject) { 
  2.  
  3.     reject(new Error('The promise was rejected.')); 
  4.  
  5. }).then(function() { 
  6.  
  7.     console.log('I am an error.'); 
  8.  
  9. }).catch(function(err) { 
  10.  
  11.     if (err instanceof Error) { 
  12.  
  13.         console.log('The promise was rejected with an error.'); 
  14.  
  15.         console.log('Error Message: ' + err.message); 
  16.  
  17.     } 
  18.  
  19. });  

处理堆栈

这一节是针对支持 Error.captureStackTrace的运行环境, 例如Nodejs.

Error.captureStackTrace 的第一个参数是 object, 第二个可选参数是一个 function.Error.captureStackTrace 会捕获堆栈信息, 并在第一个参数中创建 stack 属性来存储捕获到的堆栈信息. 如果提供了第二个参数, 该函数将作为堆栈调用的终点. 因此, 捕获到的堆栈信息将只显示该函数调用之前的信息.

用下面的两个demo来解释一下. 第一个, 仅将捕获到的堆栈信息存于一个普通的对象之中:


  1. const myObj = {}; 
  2.  
  3.   
  4.  
  5. function c() { 
  6.  
  7.  
  8.   
  9.  
  10. function b() { 
  11.  
  12.     // Here we will store the current stack trace into myObj 
  13.  
  14.     Error.captureStackTrace(myObj); 
  15.  
  16.     c(); 
  17.  
  18.  
  19.   
  20.  
  21. function a() { 
  22.  
  23.     b(); 
  24.  
  25.  
  26.   
  27.  
  28. // First we will call these functions 
  29.  
  30. a(); 
  31.  
  32.   
  33.  
  34. // Now let's see what is the stack trace stored into myObj.stack 
  35.  
  36. console.log(myObj.stack); 
  37.  
  38.   
  39.  
  40. // This will print the following stack to the console: 
  41.  
  42. //    at b (repl:3:7) <-- Since it was called inside B, the B call is the last entry in the stack 
  43.  
  44. //    at a (repl:2:1) 
  45.  
  46. //    at repl:1:1 <-- Node internals below this line 
  47.  
  48. //    at realRunInThisContextScript (vm.js:22:35) 
  49.  
  50. //    at sigintHandlersWrap (vm.js:98:12) 
  51.  
  52. //    at ContextifyScript.Script.runInThisContext (vm.js:24:12) 
  53.  
  54. //    at REPLServer.defaultEval (repl.js:313:29) 
  55.  
  56. //    at bound (domain.js:280:14) 
  57.  
  58. //    at REPLServer.runBound [as eval] (domain.js:293:12) 
  59.  
  60. //    at REPLServer.onLine (repl.js:513:10)  

从上面的示例可以看出, 首先调用函数 a(被压入堆栈), 然后在 a 里面调用函数 b(被压入堆栈且在a之上), 然后在 b 中捕获到当前的堆栈信息, 并将其存储到 myObj 中. 所以, 在控制台输出的堆栈信息中仅包含了 a和 b 的调用信息.

现在, 我们给 Error.captureStackTrace 传递一个函数作为第二个参数, 看下输出信息:


  1. const myObj = {}; 
  2.  
  3.   
  4.  
  5. function d() { 
  6.  
  7.     // Here we will store the current stack trace into myObj 
  8.  
  9.     // This time we will hide all the frames after `b` and `b` itself 
  10.  
  11.     Error.captureStackTrace(myObj, b); 
  12.  
  13.  
  14.   
  15.  
  16. function c() { 
  17.  
  18.     d(); 
  19.  
  20.  
  21.   
  22.  
  23. function b() { 
  24.  
  25.     c(); 
  26.  
  27.  
  28.   
  29.  
  30. function a() { 
  31.  
  32.     b(); 
  33.  
  34.  
  35.   
  36.  
  37. // First we will call these functions 
  38.  
  39. a(); 
  40.  
  41.   
  42.  
  43. // Now let's see what is the stack trace stored into myObj.stack 
  44.  
  45. console.log(myObj.stack); 
  46.  
  47.   
  48.  
  49. // This will print the following stack to the console: 
  50.  
  51. //    at a (repl:2:1) <-- As you can see here we only get frames before `b` was called 
  52.  
  53. //    at repl:1:1 <-- Node internals below this line 
  54.  
  55. //    at realRunInThisContextScript (vm.js:22:35) 
  56.  
  57. //    at sigintHandlersWrap (vm.js:98:12) 
  58.  
  59. //    at ContextifyScript.Script.runInThisContext (vm.js:24:12) 
  60.  
  61. //    at REPLServer.defaultEval (repl.js:313:29) 
  62.  
  63. //    at bound (domain.js:280:14) 
  64.  
  65. //    at REPLServer.runBound [as eval] (domain.js:293:12) 
  66.  
  67. //    at REPLServer.onLine (repl.js:513:10) 
  68.  
  69. //    at emitOne (events.js:101:20)  

当将函数 b 作为第二个参数传给 Error.captureStackTraceFunction 时, 输出的堆栈就只包含了函数 b 调用之前的信息(尽管 Error.captureStackTraceFunction 是在函数 d 中调用的), 这也就是为什么只在控制台输出了 a. 这样处理方式的好处就是用来隐藏一些与用户无关的内部实现细节.


作者:佚名

来源:51CTO

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
BIOS和DOS中断处理(1302)
本文为《汇编语言程序设计》1302小节例程。点击链接…进课程主页。 任务:在屏幕的5行12列显示3个红底高亮闪烁绿色的’a’ 程序: assume cs:code code segm...
718 0
Fundebug:JavaScript插件支持错误采样
Fundebug的付费套餐主要是根据错误事件数制定的,这是因为每一个发送到我们服务器的事件,都会消耗一定的CPU、内存、磁盘以及带宽资源,尤其当错误事件数非常大时,会对我们的计算资源造成很大压力。 如果您希望采样收集错误,比如“只收集30%的错误”,可以将sampleRate属性设为0.3。
496 0
JavaScript错误处理
我们在编写js过程中,难免会遇到一些代码错误问题需要找出来;有时怕因为js问题导致用户体验差,这里给出一些常见错误及解决方法
1968 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
7830 0
Oracle-01033错误处理
今天电脑非常卡,强制重启后,发现oracle 11g启动不了了,提示错误: ERROR - ORA-01033 oracle initialization or shutdown in progress 解决步骤 首先sysdba账号登录下 很长时间没登录了,发现sys的密码忘记了,于是第一步,...
819 0
+关注
行者武松
杀人者,打虎武松也。
14545
文章
2569
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载