利用sourcemap库还原错误堆栈-前端监控之数据分析篇

前端监控中， 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. 将内容展现在监控平台

阅读原文