以编程方式捕获Chrome Async Javascript堆栈跟踪

rme*_*ger 13 javascript asynchronous google-chrome-devtools

我一直在尝试向仅在Chrome上运行的Web应用程序添加一些更好的错误日志记录。本质上,我希望能够捕获和存储堆栈跟踪。对于同步代码,这很好用,但是对于异步代码,我遇到了一些奇怪的事情。本质上,Chrome似乎将其他信息记录为异步堆栈跟踪功能的一部分,但我一直无法弄清楚如何捕获它。

在Chrome浏览器控制台中运行的代码:

let e;
let a = () => Promise.resolve(null)
.then(() => (null).foo)
.catch(err => {
  console.info(err); 
  console.error(err); 
  e = err;
})
let b = () => a();
let c = () => b();
c();
Run Code Online (Sandbox Code Playgroud)

输出:

(info)
TypeError: Cannot read property 'foo' of null
    at <anonymous>:3:20

(error, after expanding)
TypeError: Cannot read property 'foo' of null
    at <anonymous>:3:20
(anonymous) @ VM1963:6
Promise.catch (async)
a @ VM1963:4
b @ VM1963:9
c @ VM1963:10
(anonymous) @ VM1963:11
Run Code Online (Sandbox Code Playgroud)

因此,console.error给了我一个一直贯穿整个调用栈的堆栈跟踪信息,大概是某种形式的Chrome引擎magick。console.info给了我存储在上的实际堆栈跟踪err。如果在完成所有操作后,我尝试读取的值e,则其堆栈是从console.info语句而不是console.error语句中获得的两行。

我要问的是,有什么方法可以捕获和存储我调用时Chrome正在生成和使用的异步堆栈跟踪console.error

Our*_*rus 2

console.error()似乎是console.trace()为了方便而调用。

看起来脚本无法以字符串以外的方式获取堆栈跟踪。例如,该字符串可以使用err.stack. MDN 有关于stack的属性的Error文档。它不是规范的一部分,但似乎在所有平台上都受支持。

  • 更重要的是,还有 https://ghub.io/stacktrace-parser 包,能够将字符串堆栈转换为正确解析的列表,跨平台。问题是“err.stack”不包含异步部分,而“console.trace”包含异步部分。Node 有一个“--async-stack-traces”标志。所以问题是 - 是否有任何方法可以在浏览器中获取异步堆栈跟踪,就像我们在开发工具中看到的那样。 (3认同)
  • [`--async-stack-traces`](https://docs.google.com/document/d/13Sy_kBIJGP0XT34V1CV3nkWya4TwYx9L3Yv45LdGB6Q/edit#) 是一个 v8 标志,因此也可以在 Chrome 中使用。不过,您可能也对 [StackTrace.JS](https://www.stacktracejs.com/) 感兴趣,因为它基于 `Error.stack`,所以它可能也不处理异步堆栈。 (2认同)