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. 将内容展示在监控平台