PnP SPFx API错误栈输出信息不全，TypeScript下如何获取完整调用栈？

问题根因 #

栈不完整问题主要有两个核心原因：

• PnP JS内部抛出的HttpRequestError是在异步HTTP请求回调中生成的，默认异步调用上下文不会保留上层业务代码的调用栈
• TypeScript编译时如果target配置低于ES2017，async/await语法会被转译为兼容ES5的步进式代码，破坏了原有的调用栈结构

具体解决方案 #

1. 调整编译配置保留原生异步结构 #

修改项目tsconfig.json，配置以下参数：

{
  "compilerOptions": {
    "target": "ES2017",
    "sourceMap": true,
    "inlineSources": true
  }
}

同时确认SPFx项目的gulpfile.js中没有关闭源映射输出，编译后保留的源映射可以把打包后的js行号映射回原始TS文件位置。

2. 改造封装方法手动合并调用栈 #

在进入异步方法、还未执行API调用时提前捕获当前上下文的调用栈，捕获错误后和PnP返回的错误栈合并：

public async apiCallWrapper<T>(callback: ICallback<T>) : Promise<[T, ResponseStatus, string]> {
  // 提前捕获上层调用栈，此时还未进入异步逻辑，栈信息完整
  const upperStack = new Error().stack;
  try {
    const result : T = await callback();
    return [result, ResponseStatus.Success, 'Success'];
  } catch(e: any) {
    // 合并两层栈信息
    const fullErrorInfo = `
错误信息: ${e.message}
PnP底层调用栈:
${e.stack}
====================
上层业务调用栈:
${upperStack}
    `;
    console.error(fullErrorInfo);
    return [null, ResponseStatus.Other, 'Other kind of error'];
  } 
}

3. 开启浏览器异步栈跟踪 #

打开Chrome DevTools右上角设置，勾选Async stack trace选项，浏览器会自动关联异步调用前后的栈信息，DevTools中直接就能看到完整的调用链路。

4. 适配Error.captureStackTrace类型（可选） #

如果需要使用Error.captureStackTrace方法，可在项目全局类型声明文件中添加以下定义，解决TypeScript类型报错问题：

declare global {
  interface Error {
    captureStackTrace(targetObject: object, constructorOpt?: Function): void;
  }
}

内容的提问来源于stack exchange，提问作者sliziky