教你如何打造出一个前端可视化监控系统

缺乏、安全感 2022-06-03 04:06 204阅读 0赞

还记得在我上一家公司中，某一大佬做了一个监控系统，牛逼哄哄，挺想研究他到底是怎么搞出来的。当然我们也不是拍拍脑袋干活的人，总不能人家咋干我们就咋干。下面先就介绍下，这样的平台到底有啥好处。

## 背景 ##

首先我们为什么要做前端系统呢，先看下面这张表，可以很显然的看出，前端的性能对于产品的价值提升还是蛮有帮助的，但是这些信息如果我们能实时的采集到，并且实施以监控，让整个产品在产品线上一直保持高效的运作，这才是我们的目的。

<table> 
 <thead> 
  <tr> 
   <th>性能</th> 
   <th>收益</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Google 延迟 <strong>400ms</strong></td> 
   <td>搜索量下降 <strong>0.59%</strong></td> 
  </tr> 
  <tr> 
   <td>Bing 延迟 <strong>2s</strong></td> 
   <td>收入下降 <strong>4.3%</strong></td> 
  </tr> 
  <tr> 
   <td>Yahoo 延迟 <strong>400ms</strong></td> 
   <td>流量下降 <strong>5-9%</strong></td> 
  </tr> 
  <tr> 
   <td>Mozilla 页面打开减少 <strong>2.2s</strong></td> 
   <td>下载量提升 <strong>15.4%</strong></td> 
  </tr> 
  <tr> 
   <td>Netflix 开启 Gzip</td> 
   <td>性能提升 13.25% 带宽减少<strong>50%</strong></td> 
  </tr> 
 </tbody> 
</table>

其次，也有利于我们发布的产品，能够及时发现我们的错误。如果一个产品在新的迭代中，发生不可描述的错误。

![https://user-gold-cdn.xitu.io/2017/12/17/16062ce3510887ef?w=211&h=218&f=gif&s=948250][https_user-gold-cdn.xitu.io_2017_12_17_16062ce3510887ef_w_211_h_218_f_gif_s_948250]

对！就是不可描述。我们总不可能等待用户的反馈投诉，到那个时候黄花菜都凉了。

## 开始 ##

基于以上我们就开始搭建一个前端监**简易**控平台。(虽然现在市面上有很多这样的系统比如ELK,但是还是忍不住自己撸一个)

只能是简易了。

![https://user-gold-cdn.xitu.io/2017/12/17/16062ce34e8a7e9f?w=280&h=155&f=gif&s=675245][https_user-gold-cdn.xitu.io_2017_12_17_16062ce34e8a7e9f_w_280_h_155_f_gif_s_675245]

兄弟们原谅我，只能帮你们到这里了。

接下来请看。

![https://user-gold-cdn.xitu.io/2017/12/17/16062ce34f90726b?w=430&h=238&f=png&s=7208][https_user-gold-cdn.xitu.io_2017_12_17_16062ce34f90726b_w_430_h_238_f_png_s_7208]

以上是我们需要做的一些事情。

## 收集信息 ##

要做监控系统，首先我们得有一个对象。我们监控的对象！对象！对象！对象。

我在我的系统写了一个这样的页面，

没错这就是我们要监控的页面。这个…真不是我懒。

![https://user-gold-cdn.xitu.io/2017/12/17/16062ce34a300fd3?w=214&h=216&f=gif&s=988503][https_user-gold-cdn.xitu.io_2017_12_17_16062ce34a300fd3_w_214_h_216_f_gif_s_988503]

然后接下来我一共设计了3块数据

*  页面加载时间
 *  统计用户使用设备
 *  错误量的统计

页面加载时间

统计用户使用设备

错误量的统计

以上就是收集数据的全部，通过发送/action请求或者是/error请求，这些都是可以自定义的，我讲的只是整个过程是如何实现的。

然后通过我的的一个后台express.js把所有的请求处理并都记录下来，记录好后的数据是这样子的。

user_ip=127.0.0.1&whiteScreenTime=185&readyTime=192&allloadTime=208&mobile=webKit&nowTime=1513071388941

## 数据处理 ##

这里我是通过自己写的一段脚本进行解析，parse.js，这里不具体讲解，看源码即可。我展现下解析好的数据。

我以cvs的数据格式储存，因为后面图表的需要，我也支持json格式方式导出，只不过后面就需要你自己来配置可视化的界面了。

数据是这样的。

charts/csvData/2017-12-16time.csv

时间,白屏时间,用户可操作时间,总下载时间
    1513427051482,137,137,153
    1513427065080,470,471,507
    1513427080040,127,127,143
    1513428714345,274,275,323
    1513428733583,267,268,317
    1513428743167,268,268,317
    1513428754796,276,276,328

## 数据展示 ##

这里我用的是[highcharts.js][]

具体的配置我不进行讲解，可以自己到官网进行查看。

下面是可视化的图表，显示的是每天各个时间段的信息。

![https://user-gold-cdn.xitu.io/2017/12/17/16062ce35649b7e7?w=861&h=1595&f=png&s=83479][https_user-gold-cdn.xitu.io_2017_12_17_16062ce35649b7e7_w_861_h_1595_f_png_s_83479]

界面可能不是特别美观，还请见谅。

![https://user-gold-cdn.xitu.io/2017/12/17/16062ce3539eb419?w=237&h=234&f=gif&s=561618][https_user-gold-cdn.xitu.io_2017_12_17_16062ce3539eb419_w_237_h_234_f_gif_s_561618]

## 环境 ##

node >= 6.0.0

redis >= 2.6.0

在这里我说明下，因为如果这个部署在线上环境的时候，如果每次记录都进行记录的话，会消耗大量的内存，所以我架设了一层redis，为了防止大流量的冲击，然后可以每隔一段时间进行存储。

const express = require('express');
    const performance = require('./lib/performance.js');
    const app = express();
    const router = express.Router();
    router.get('/', function (req, res, next) {
        
      req.url = './index.html';
      next();
    });
    app.use(router);
    app.use(performance({
        
        time: 10, // 秒为单位
        originalDir: './originalData', // 数据的目录
        errorDir: './errorData' // 报错的目录
    }))
    app.use(express.static('./'));
    const server = app.listen(3000)

这里可以设置默认的时间，我这里以10秒为单位,为了demo的效果起见。一般我采用的是一分钟进行一次存储。

github地址：[https://github.com/hua1995116/mcharts][https_github.com_hua1995116_mcharts]

如有好的建议以及优化的方案，还请各位在Issues上提给我，喜欢的话可以点个star。

## 进阶（一个利用监控平台的实战栗子） ##

我利用这个平台对我的一个项目进行了监控。如果你只是纯粹玩的话，还请只阅读上面的原系统地址，可以忽视我这一段，毕竟我这个系统还不够完善。

项目线上地址：[http://www.qiufengh.com/\#/][http_www.qiufengh.com]

项目监控地址：[http://qiufengh.com:8080/][http_qiufengh.com_8080]

此项目代码地址：[https://github.com/hua1995116/webchat/tree/monitoring][https_github.com_hua1995116_webchat_tree_monitoring]

在这里我设置了每过1分钟记录一次日志。

// 监控引入
    app.use(performance({
        
        time: 60, // 秒为单位
        originalDir: './originalData', // 数据的目录
        errorDir: './errorData' // 报错的目录
    }))

以及每隔10分钟进行一次解析。

function setPrase() {
        
        setInterval(function(){
        
            parseData();
          }, 1000 * 60 * 10);
    }

原文链接: [http://yifenghua.win/html/2017-12-16.html][https_github.com_hua1995116_webchat_tree_monitoring] (更完美的阅读体验哦)

![https://user-gold-cdn.xitu.io/2017/12/17/16062ce389311f6b?w=205&h=205&f=gif&s=29900][https_user-gold-cdn.xitu.io_2017_12_17_16062ce389311f6b_w_205_h_205_f_gif_s_29900]

# 更多请关注 #

![format_png][]

[https_user-gold-cdn.xitu.io_2017_12_17_16062ce3510887ef_w_211_h_218_f_gif_s_948250]: /images/20220603/c5b1922ad09a42dd8df0b64e931b09d3.png
[https_user-gold-cdn.xitu.io_2017_12_17_16062ce34e8a7e9f_w_280_h_155_f_gif_s_675245]: /images/20220603/4f857f5f4d884c65bf7ec200b7d1ce0c.png
[https_user-gold-cdn.xitu.io_2017_12_17_16062ce34f90726b_w_430_h_238_f_png_s_7208]: /images/20220603/6ec2bd8f741c4d7c860c28e2de935604.png
[https_user-gold-cdn.xitu.io_2017_12_17_16062ce34a300fd3_w_214_h_216_f_gif_s_988503]: /images/20220603/67d2834c1b8b45c5a14aca91884f9c98.png
[highcharts.js]: https://www.hcharts.cn/
[https_user-gold-cdn.xitu.io_2017_12_17_16062ce35649b7e7_w_861_h_1595_f_png_s_83479]: /images/20220603/9693ef5b74be4967a091ff2e5b29a7c1.png
[https_user-gold-cdn.xitu.io_2017_12_17_16062ce3539eb419_w_237_h_234_f_gif_s_561618]: /images/20220603/5bb2e401718c41268580dc8680edd092.png
[https_github.com_hua1995116_mcharts]: https://github.com/hua1995116/mcharts
[http_www.qiufengh.com]: http://www.qiufengh.com/#/
[http_qiufengh.com_8080]: http://qiufengh.com:8080/
[https_github.com_hua1995116_webchat_tree_monitoring]: https://github.com/hua1995116/webchat/tree/monitoring
[https_user-gold-cdn.xitu.io_2017_12_17_16062ce389311f6b_w_205_h_205_f_gif_s_29900]: /images/20220603/e90497cdcca84978817292f48e61d3ec.png
[format_png]: /images/20220603/0c2b0b2dded7427f85db9502b5414057.png