stacktrace.js中sourceCache选项用法及配置对象构造咨询

作用逻辑 #

sourceCache 是栈解析流程中的源码缓存配置，核心作用是覆盖默认的脚本拉取逻辑，直接使用预存的源码内容完成栈帧位置解析，主要解决三类问题：

• 跨域部署的脚本因浏览器同源策略限制，无法通过接口拉取源码导致source map解析失败
• 本地调试、离线环境无对应静态资源服务，无法完成栈溯源
• 高频错误解析场景下重复拉取相同脚本，造成不必要的网络开销

默认逻辑下，调用栈解析方法时，库会根据栈帧中记录的脚本地址发起网络请求拉取完整JS内容，再结合source map信息将压缩混淆后的代码位置映射回源码原始位置。配置sourceCache后，库会优先匹配缓存中是否存在对应该地址的源码内容，匹配命中时直接使用缓存内容解析，完全跳过对应地址的网络请求流程；只有匹配失败时才会回退到默认的网络拉取逻辑。

注意：sourceCache的匹配键为栈帧中记录的完整脚本资源URL，匹配值为对应脚本的完整纯文本内容。

正确构造格式 #

sourceCache 本身是一个普通的键值对平面对象，直接作为配置项传入栈解析方法即可，基础用法示例：

// 以fromError方法为例，其他支持配置的API用法一致
StackTrace.fromError(targetError, {
  sourceCache: {
    // key为脚本完整访问地址，必须和栈帧中记录的fileName完全一致
    'https://example.com/static/js/app.8a3f92.min.js': '!function(e){/* 对应脚本的完整源码字符串 */}',
    'https://cdn.example.com/static/lib/vendors.1d7c4e.min.js': 'function(){}/* 对应脚本的完整源码字符串 */'
  }
}).then(parsedFrames => {
  console.log(parsedFrames)
})

使用注意事项 #

• 配置的key必须和栈帧提取到的脚本地址完全一致，包含协议、域名、路径、query参数全量内容，任意字符不匹配都会导致缓存失效。如果不确定key的具体格式，可以先不配置sourceCache打印一次原始错误栈，取栈帧的fileName字段值直接作为key即可
• sourceCache中只需要存放压缩后的JS文件完整内容，不需要手动存放source map文件内容，库会自动识别JS文件尾部的sourceMappingURL标记处理map解析逻辑
• file协议打开的本地页面场景，key需要写文件的完整本地路径，格式类似file:///C:/project/demo/index.js
• 缓存值必须是对应脚本的完整文本，传入代码片段会导致行号、列号映射完全错位，无法得到正确的解析结果

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