堆栈跟踪(Stack traces) ↗ 可在应用程序遇到未处理异常时帮助调试代码。堆栈跟踪会显示具体调用了哪些函数、调用顺序、来自哪一行和哪个文件,以及使用了哪些参数。
大多数 JavaScript 代码在部署到生产环境前会先打包、通常还会转译,然后进行压缩。此过程会生成更小的 bundle 以优化性能,并在需要时将 TypeScript 代码转换为 JavaScript。
Source maps 将编译和压缩后的代码映射回您编写的原始代码。Source maps 与 JavaScript 运行时返回的堆栈跟踪结合,向您呈现完整的堆栈跟踪。
要启用 source maps,请在 Worker 的 Wrangler 配置 中添加以下内容:
{
"upload_source_maps": true
}upload_source_maps = true当 upload_source_maps 设置为 true 时,运行 wrangler deploy 或 wrangler versions deploy 时,Wrangler 会自动生成并上传 source map 文件。
当 Worker 抛出未捕获的异常时,我们会获取 source map,并将异常的堆栈跟踪映射回 Worker 原始源代码中的行号。
随后,您可以在流式实时日志或 Tail Workers 中查看堆栈跟踪。
当 Cloudflare 尝试将堆栈跟踪重新映射到 Worker 的 source map 时,会逐行进行,尽可能多地重新映射。如果堆栈跟踪的某一行因任何原因无法重新映射,Cloudflare 会保持该行不变,并继续处理下一行。
| 说明 | 限制 |
|---|---|
| Source Map 最大大小 | 15 MB(gzip 压缩后) |
考虑一个简单的项目。src/index.ts 作为应用程序的入口点,src/calculator.ts 定义了一个支持基本算术运算的 ComplexCalculator 类。
- wrangler.jsonc
- tsconfig.json
- src
- calculator.ts
- index.ts
让我们看看 source maps 如何简化 ComplexCalculator 类中错误的调试。
未上传 source maps:注意所有 JavaScript 代码都被压缩到一个文件中,因此堆栈跟踪缺少文件名信息,显示错误的行号,并且错误地引用 js 而非 ts。
已上传 source maps:所有方法均引用正确的文件和行号。
- Tail Workers — 了解如何附加 Tail Workers 以转换日志并发送到 HTTP 端点。
- 实时日志 — 了解如何实时捕获 Workers 日志。
- RPC 错误处理 — 了解 RPC(远程过程调用)中异常的处理方式。