前端监控系统之“实战篇”
- 编辑时间: 2019-06-30 17:08:37
- 浏览量:
- 作者:
决定开始动笔写实战篇的时候,望了望时间,距离上一篇文章《前端监控系统之“理论篇”》差不多过去4个月的时间啦,时间过得可真快。
在这期间,还有朋友留言给我:前端监控系统实战篇还会继续写吗?
我回答着:写,一定会写。之所以没那么着急写,一方面:因为这段时间工作确实比较忙,没时间写。另一方面:我觉得写实战的一些文章,就应该把项目真正运用在真实的项目中,经过业务的考验和沉淀,写出来的实战篇才会有说服力。因为个人项目与企业级项目所思考的点和方向是不一样的,面对真实而复杂的场景,根本不是像写个人项目一样,草草了事实现一个功能一样。考虑的点和方面和很多,如何去设计,如何实现,如何推进...
好啦,废话就不多说啦。正式开始我们今天的话题吧!
相信看过理论篇的同学,因为会发现一些疑惑,您只是简单讲解了前端SDK上报的功能设计,和整个项目架构图,并没有涉及过多的细节。别急,今天我们详细来讲讲,具体怎么操作的。
一、没有前端监控下的痛点有哪些?
1、用户反馈点击某个按钮没有任何反应。(没办法知道用户点了按钮,为什么没反应呢?是js报错导致,还是其它原因导致?)
2、用户反馈打开页面很慢。(没办法感知用户慢在什么地方)
3、调用后端api接口出错,无法第一时间感知。(只能被动等待用户告诉和自己去发现)
4、网站静态资源加载出错,导致网站打不开。
5、上报的js错误信息,怎么反解析出源代码报错位置。
...
可能这时候相关同学就会想,此时要有一个监控系统,能帮我解决上述的痛点那该有多好。并且还希望能从后台自定义配置告警规则,通过对应的报警规则,第一时间来通知开发人员哪里出错。
二、手动搭建一个前端监控系统
在搭建前端监控系统开始之前,我们先来了解下整个系统的架构是怎么样的。因为你只有了解到流程是怎样走的,才清楚每个步骤我们该做些什么事情。
1、JS SDK 功能设计
1.1 监控js错误信息上报
通过window.onerror方法,对页面js错误进行监控。上报具体的错误信息和堆栈信息(如下图),利用webpack/gulp打包出来的.map文件,来解析出具体的错误信息。
nodejs通过上传.map文件,解析出具体错误信息。代码如下:
let sourceMap = require('source-map');
let _sourceMap = fs.readFileSync(resolve(`${name}`), 'utf-8')
// 通过sourceMap库转换为sourceMapConsumer对象
let consumer = await new sourceMap.SourceMapConsumer(_sourceMap);
// 传入要查找的行列数,查找到压缩前的源文件及行列数
let sm = consumer.originalPositionFor({
line: line, column: column
});
// 压缩前的所有源文件列表
let sources = consumer.sources;
// 根据查到的source,到源文件列表中查找索引位置
let smIndex = sources.indexOf(sm.source);
// 到源码列表中查到源代码
let smContent = consumer.sourcesContent[smIndex];
// 将源代码串按"行结束标记"拆分为数组形式
const rawLines = smContent.split(/\r?\n/g);
// 输出源码行,因为数组索引从0开始,故行数需要-1
let errInfo = []
errInfo.push({
line: sm.line - 2,
text: rawLines[sm.line - 2]
})
errInfo.push({
line: sm.line - 1,
text: rawLines[sm.line - 1]
})
errInfo.push({
line: sm.line,
text: rawLines[sm.line]
})
this.ctx.body = JSON.stringify({
code: 1,
data: errInfo,
msg: 'success'
})
以我博客的一个js错误为例:首先在管理后台,上传对应错误js的map文件,最终还原效果图如下:
通过上图,我们可以快速定位错误的具体位置,大大节省了排查错误的时间。
1.2 api接口调用请求上报
可能有些朋友会好奇,怎么去实时监听ajax异步接口请求情况呢?
其实很简单:首先我们先通过代理XMLHttpRequest对象,来实现对ajax异步请求进行数据劫持。如下图:
通过上图不难发现,我们通过xhr对象的onreadystatechange事件进行劫持,针对后端api接口返回的数据,进行处理上报接口的调用情况,因此达到实时监控接口调用情况,是不是觉得很神奇!
如有同学想了解这块内容具体的代码,github社区有开源的模块,可自行查看: https://github.com/wendux/Ajax-hook
根据需要统计哪些数据进行上报,比如:page query参数、api接口请求数据...方便后续出错,定位问题。如下图:
1.3 页面性能数据上报
关于页面性能数据,我们一般通过浏览器performance.timingAPI来进行上报,在这里不做过多解释(理论篇有讲过),但一般我们会关注以下的字段的关键性能指标,如下图:
写文章不易,如果您觉得文章对你有帮助。
打赏激励下作者吧,谢谢支持! ~(@^_^@)~!
微信打赏
支付宝打赏