前端监控系统之“实战篇”-段亮个人博客

决定开始动笔写实战篇的时候，望了望时间，距离上一篇文章《前端监控系统之“理论篇”》差不多过去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来进行上报，在这里不做过多解释（理论篇有讲过），但一般我们会关注以下的字段的关键性能指标，如下图：