hugh 的个人博客

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

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

1.源文件构建

1. 将 hash 生成到文件名中

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

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

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

3. 没有使用 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);

2. 根据每行堆栈信息获取源文件及错误行和列

var po = smc.originalPositionFor({
                        line: line,
                        column: column
                    });
console.log(po)// line: 1, column:200, source: xxx.js

3. 根据源文件内容及行列获取源文件信息

 var co = smc.sourceContentFor(po.source)
// co 包含了源文件所有的源码  
var coList = co.split("\n")
// 按需取行即可

4. 将内容展示在监控平台