前端监控系统之“实战篇”

  • 编辑时间: 2019-06-30 17:08:37
  • 浏览量: loading...
  • 作者: 段亮

    决定开始动笔写实战篇的时候,望了望时间,距离上一篇文章《前端监控系统之“理论篇”》差不多过去4个月的时间啦,时间过得可真快。

    在这期间,还有朋友留言给我:前端监控系统实战篇还会继续写吗?
    我回答着:写,一定会写。之所以没那么着急写,一方面:因为这段时间工作确实比较忙,没时间写。另一方面:我觉得写实战的一些文章,就应该把项目真正运用在真实的项目中,经过业务的考验和沉淀,写出来的实战篇才会有说服力。因为个人项目与企业级项目所思考的点和方向是不一样的,面对真实而复杂的场景,根本不是像写个人项目一样,草草了事实现一个功能一样。考虑的点和方面和很多,如何去设计,如何实现,如何推进...

    好啦,废话就不多说啦。正式开始我们今天的话题吧!

    相信看过理论篇的同学,因为会发现一些疑惑,您只是简单讲解了前端SDK上报的功能设计,和整个项目架构图,并没有涉及过多的细节。别急,今天我们详细来讲讲,具体怎么操作的。

一、没有前端监控下的痛点有哪些?

    1、用户反馈点击某个按钮没有任何反应。(没办法知道用户点了按钮为什么没反应呢?是js报错导致,还是代码问题?)

    2、用户反馈打开页面很慢。(没办法感知用户慢在什么地方)

    3、调用后端api接口出错,无法第一时间感知。(只能被动等待用户告诉和自己去发现)

    4、网站静态资源加载出错,导致网站打不开。
    ...

                                   



    可能这时候相关同学就会想,此时要有一个监控系统,能帮我解决上述的痛点那该有多好。并且还希望能从后台自定义配置告警规则,通过对应的报警规则,第一时间来通知开发人员哪里出错。



二、手动搭建一个前端监控系统

    在搭建前端监控系统开始之前,我们先来了解下整个系统的架构是怎么样的。因为你只有了解到流程是怎样走的,才清楚每个步骤我们该做些什么事情。



    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来进行上报,在这里不做过多解释(理论篇有讲过),但一般我们会关注以下的字段的关键性能指标,如下图:

   各阶段耗时图
   


剩余82%内容付费后可查看

为保证文章的高质量产出,以下内容为vip付费阅读哦!

单独付费阅读:¥3.00 开通VIP会员

写文章不易,如果您觉得文章对你有帮助。
打赏激励下作者吧,谢谢支持! ~(@^_^@)~!

微信打赏 微信打赏

支付宝打赏 支付宝打赏

表情
0 条评论 最热评论 最新评论
  • 亲,暂时没有评论哦!赶紧来留下你的脚印吧!

你也想建立一个独立博客?

你是否也想打造一个在互联网上的个人品牌,成为一个家喻户晓的人物呢?
请点击了解 怎样创建个人博客

最新推荐
loading... 数据加载中...

超低服务器价格,值得购买!