利用sourceMap库还原错误堆栈
前端监控中, js 错误是一项至关重要的监控点及指标,只要包含收集及解析阶段
由于 sourcemap 和源文件生成各有不同的策略
1.源文件构建
- 将 hash 生成到文件名中
该方式可以直接在监控平台读取源文件对应的 sourcemap 保存, 在解析时使用
- 将 hash 或时间戳放到文件 url search 中
该方式需要在监控平台对 url 进行处理,将 search 中的参数加入到文件名进行保存
- 没有使用 hash 或时间戳
这种情况就需要客户端上报错误时,加上版本号,构建时将 sourcemap 文件上传到服务器, 解析时获取对应版本的文件即可
2. sourcemap 生成
sourcemap 生成在 webpack 中有多种配置, 但是功效有细微差异
在生产环境, 我们是不能暴露 sourcemap 文件的
为保证安全同时又可以还原错误堆栈 有以下方式
方法一。 将 sourcemap 文件在构建时上传到服务器,然后删除即可
方法二。 在服务器端使用 nginx 等代理服务器,对文件做访问限制,只可监控服务器访问即可
3. 如何使用 sourcemap 库进行堆栈还原
上报的错误堆栈内容如下
[{"url":"https://blog.uproject.cn/static/js/app.c95d3bd2ec81c488ba30.js","func":"registerEventHandler","args":[],"line":29,"column":12174},
{"url":"https://blog.uproject.cn/static/js/app.c95d3bd2ec81c488ba30.js","func":"onEvent","args":[],"line":32,"column":26680}]
解析流程如下
]
- 根据 sourcemap 创建 SourceMapCustomer 对象
var smc = await new sourceMap.SourceMapConsumer(mapfileData);
- 根据每行堆栈信息获取源文件及错误行和列
var po = smc.originalPositionFor({
line: line,
column: column
});
console.log(po)// line: 1, column:200, source: xxx.js
- 根据源文件内容及行列获取源文件信息
var co = smc.sourceContentFor(po.source)
// co 包含了源文件所有的源码
var coList = co.split("\n")
// 按需取行即可
- 将内容展示在监控平台
标题:利用sourceMap库还原错误堆栈
作者:hugh0524
地址:https://blog.uproject.cn/articles/2019/07/18/1563414926541.html