如何将含异步调用的完整JavaScript堆栈跟踪保存为变量？

问题核心 #

普通的new Error().stack或Error.captureStackTrace只能获取当前同步调用栈，无法追踪setTimeout这类异步操作的调用链路；而console.trace()能打印包含异步标记的完整堆栈，但直接输出到控制台，无法保存到变量。

可行方案 #

方案1：拦截console.trace的输出 #

通过临时替换console的输出方法，捕获console.trace()的打印内容，之后恢复原方法：

function getFullTrace() {
  let traceContent = '';
  // 保存原console.log方法（部分浏览器中console.trace会调用console.log输出）
  const originalLog = console.log;
  // 替换为自定义方法捕获输出
  console.log = (...args) => {
    traceContent += args.join('\n');
  };
  // 执行trace
  console.trace();
  // 恢复原console.log
  console.log = originalLog;
  return traceContent;
}

// 使用示例
function f(){
  const fullTrace = getFullTrace();
  console.log('捕获到的完整堆栈：\n', fullTrace);
}

function f1(){
  setTimeout(f);
}

f1();

注意：不同浏览器/环境下console.trace的输出格式可能有差异，需要根据实际情况处理捕获到的内容。

方案2：利用现代引擎的异步堆栈跟踪特性 #

Chrome、Firefox等现代浏览器及Node.js（v12+）默认支持异步堆栈跟踪，可以通过Error对象获取包含异步链路的堆栈，部分场景可能需要开启相关配置（比如Node.js中--async-stack-traces参数）。

示例代码：

function f(){
  const err = new Error();
  console.log('异步堆栈：\n', err.stack);
}

function f1(){
  setTimeout(f);
}

f1();

在支持异步堆栈的环境中，输出会包含setTimeout (async)及之前的调用链路，结构与console.trace()的输出一致。

方案3：手动传递调用上下文（兼容旧环境） #

如果需要兼容不支持异步堆栈的旧环境，可以在调用异步函数时手动捕获并传递当前堆栈信息：

function getCurrentStack() {
  const obj = {};
  Error.captureStackTrace(obj, getCurrentStack);
  return obj.stack;
}

function f(parentStack){
  const currentStack = getCurrentStack();
  const fullStack = `${parentStack}\n--- 异步分割线 ---\n${currentStack}`;
  console.log('拼接后的完整堆栈：\n', fullStack);
}

function f1(){
  const parentStack = getCurrentStack();
  setTimeout(() => f(parentStack));
}

f1();

这种方法需要手动在异步调用前捕获堆栈并传递，适合对链路追踪有定制需求的场景。

内容的提问来源于stack exchange，提问作者Gianluca De Stefano