hugh 的个人博客

Everyday is a new day

利用sourceMap库还原错误堆栈

前端监控中, js 错误是一项至关重要的监控点及指标,只要包含收集及解析阶段

由于 sourcemap 和源文件生成各有不同的策略

1.源文件构建

  1. 将 hash 生成到文件名中

该方式可以直接在监控平台读取源文件对应的 sourcemap 保存, 在解析时使用

  1. 将 hash 或时间戳放到文件 url search 中

该方式需要在监控平台对 url 进行处理,将 search 中的参数加入到文件名进行保存

  1. 没有使用 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}]

解析流程如下

]

  1. 根据 sourcemap 创建 SourceMapCustomer 对象
var smc = await new sourceMap.SourceMapConsumer(mapfileData);
  1. 根据每行堆栈信息获取源文件及错误行和列
var po = smc.originalPositionFor({
                        line: line,
                        column: column
                    });
console.log(po)// line: 1, column:200, source: xxx.js
  1. 根据源文件内容及行列获取源文件信息
 var co = smc.sourceContentFor(po.source)
// co 包含了源文件所有的源码  
var coList = co.split("\n")
// 按需取行即可
  1. 将内容展示在监控平台


标题:利用sourceMap库还原错误堆栈
作者:hugh0524
地址:https://blog.uproject.cn/articles/2019/07/18/1563414926541.html