使用可折叠堆栈跟踪将JavaScript错误正确记录到控制台

我主要来自Java背景（因此也是Java心态），所以我不确定我在这里是否有意义

我正试图找到正确的方法将错误（抛出堆栈中较高的某个位置，稍后通过较低级别的通用

catch

块捕获）记录到浏览器的web控制台中，同时以漂亮的可折叠的方式显示正确的堆栈跟踪信息。以下是一个在Firefox上运行的示例：

如您所见，默认情况下只显示错误消息（第一个日志），前面有一个可折叠的箭头图标，单击该图标时，会展开完整的堆栈跟踪（第二个日志）。我想说，相当整洁

这就是我尝试过的：

在嵌套函数调用中创建错误：

h = () => TypeError("b");
g = () => h();
f = () => g();
e = f();

h = () => {
    throw TypeError("b");
}
g = () => h();
f = () => g();
e = f();

产生的错误对象现在存储在

e

中

e

在传递到

console.error（）

时，确实显示了折叠的堆栈跟踪，但显然它反映了

console.error（）

本身的调用位置（跟踪只有一个

展开视图，显示两个stacktrace（现在展开的“错误”stacktrace位于底部）：


或者，如果我执行类似以下操作：

h = () => TypeError("b");
g = () => h();
f = () => g();
e = f();

h = () => {
    throw TypeError("b");
}
g = () => h();
f = () => g();
e = f();

我只得到一个没有stacktrace的单行：


（注意：Chrome在这里的行为似乎有所不同，发出类似于控制台的信息。错误（e）

；在这种情况下，两个堆栈跟踪都是正确的，但仍然有两个跟踪，一个是不可折叠的。）

如果我只使用消息文本执行

控制台.error（）

，则在适当的位置执行

（错误发生的地方）：

我看到了预期的行为：


但是，显然这不是一个可行的解决方案，因为我需要的是在较低级别（例如，原始驱动程序函数中的主
catch
块）记录任意错误（在堆栈中较高的位置生成）

我的一位同事建议，这样做的正确方法可能是用我自己的自定义实现覆盖默认的
console.error（）
函数，这就是Slack可能发挥作用的方式。这是唯一的解决方法，还是有一个更“标准化”（和跨浏览器）的解决方案，我可以开箱即用（最好不依赖外部库）
（注意：Chrome和Firefox处理这个问题的方式不同）

在firefox中，您可以看到堆栈，但它不会崩溃

从概念上讲，它是这样工作的。假设克拉是错误的运动

^    excution > 
^     function > 
^      function > 
^       function > error thrown (no handling) // shows stack.

^    excution  (handling) > 
     function > 
      function > 
       function > error thrown // does not show stack (in Chrome), because you're handling up here, 

^    excution > 
^     function > 
^      function > 
^       function > error thrown, caught. Catch uses console.error // shows stack because the error is at a different layer in the stack

现在看看您的示例的一个编辑版本，其中处理较低

h = () => {
     try {
        throw TypeError("b");
    } catch (e) {
         // expecting to see an error log, with one nice, collapsible stacktrace
         console.error(e);
    }
}
g = () => h();
f = () => g();

f();

此代码显示堆栈

你的“抓人”您希望处理的级别上的错误。将其深入调用的意义在于，您可以处理影响以您希望的方式调用函数的代码的错误。
谢谢@Steven！但是，您提供的代码还显示了stacktrace的两个副本，其中一个副本不可折叠（看起来我不允许在此处添加快照，但您可以在浏览器上轻松试用；FF和Chrome中的行为相同）这不是我期望的行为：（此外，虽然您建议就地处理错误确实是正确的处理方法，但我正在尝试捕获堆栈中没有处理的“意外”一般错误（我已经在更高的级别上处理了几个错误案例，但处理一些泛型错误的最好方法是抛出它们，然后在基本组件上处理它们；因为在每个嵌套的
try-catch
块中添加“oops，发生泛型错误”的处理程序没有意义：）