搭建一個前端監控系統,再也不錯過BUG

時間 2019-11-05

標籤搭建一個前端監控系統再也不錯過 bug 简体版

原文原文鏈接

前言

還記得在我上一家公司中，某一大佬作了一個監控系統，牛逼哄哄，挺想研究他究竟是怎麼搞出來的。固然咱們也不是拍拍腦殼幹活的人，總不能人家咋幹咱們就咋幹。下面先就介紹下，這樣的平臺到底有啥好處。javascript

背景

首先咱們爲何要作前端系統呢，先看下面這張表，能夠很顯然的看出，前端的性能對於產品的價值提高仍是蠻有幫助的，可是這些信息若是咱們能實時的採集到，而且實施以監控，讓整個產品在產品線上一直保持高效的運做，這纔是咱們的目的。css

性能	收益
Google 延遲 400ms	搜索量降低 0.59%
Bing 延遲 2s	收入降低 4.3%
Yahoo 延遲 400ms	流量降低 5-9%
Mozilla 頁面打開減小 2.2s	下載量提高 15.4%
Netflix 開啓 Gzip	性能提高 13.25% 帶寬減小50%

其次，也有利於咱們發佈的產品，可以及時發現咱們的錯誤。若是一個產品在新的迭代中，發生不可描述的錯誤。html

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

對！就是不可描述。咱們總不可能等待用戶的反饋投訴，到那個時候黃花菜都涼了。前端

開始

基於以上咱們就開始搭建一個前端監簡易控平臺。(雖然如今市面上有不少這樣的系統好比ELK,可是仍是忍不住本身擼一個)java

只能是簡易了。node

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

兄弟們原諒我，只能幫大家到這裏了。android

接下來請看。ios

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

以上是咱們須要作的一些事情。git

收集信息

要作監控系統，首先咱們得有一個對象。咱們監控的對象！對象！對象！對象。github

我在個人系統寫了一個這樣的頁面，

<body>
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div> 
</body>
複製代碼

沒錯這就是咱們要監控的頁面。這個.....真不是我懶。

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

而後接下來我一共設計了3塊數據

頁面加載時間
統計用戶使用設備
錯誤量的統計

頁面加載時間

window.logInfo = {};  //統計頁面加載時間
window.logInfo.openTime = performance.timing.navigationStart;
window.logInfo.whiteScreenTime = +new Date() - window.logInfo.openTime;
document.addEventListener('DOMContentLoaded',function (event) {
  window.logInfo.readyTime = +new Date() - window.logInfo.openTime;
});
window.onload = function () {
  window.logInfo.allloadTime = +new Date() - window.logInfo.openTime;
  window.logInfo.nowTime = new Date().getTime();
  var timname = {
    whiteScreenTime: '白屏時間',
    readyTime: '用戶可操做時間',
    allloadTime: '總下載時間',
    mobile: '使用設備',
    nowTime: '時間',
  };
  var logStr = '';
  for (var i in timname) {
    console.warn(timname[i] + ':' + window.logInfo[i] + 'ms');
    if (i === 'mobile') {
      logStr += '&' + i + '=' + window.logInfo[i];
    } else {
      logStr += '&' + i + '=' + window.logInfo[i];
    }

  }
  (new Image()).src = '/action?' + logStr;
};
複製代碼

統計用戶使用設備

window.logInfo.mobile = mobileType();
function mobileType() {
  var u = navigator.userAgent, app = navigator.appVersion;
  var type =  {// 移動終端瀏覽器版本信息
    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端
    iPad: u.indexOf('iPad') > -1, //是否iPad
    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android終端或者uc瀏覽器
    iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否爲iPhone或者QQHD瀏覽器
    trident: u.indexOf('Trident') > -1, //IE內核
    presto: u.indexOf('Presto') > -1, //opera內核
    webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內核
    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐內核
    mobile: !!u.match(/AppleWebKit.*Mobile/i) || !!u.match(/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/), //是否爲移動終端
    webApp: u.indexOf('Safari') == -1 //是否web應該程序，沒有頭部與底部
  };
  var lists = Object.keys(type);
  for(var i = 0; i < lists.length; i++) {
    if(type[lists[i]]) {
      return lists[i];
    }
  }  
}
複製代碼

錯誤量的統計

window.onload = function () {
        window.logInfo.allloadTime = +new Date() - window.logInfo.openTime;
        window.logInfo.nowTime = new Date().getTime();
        var timname = {
            whiteScreenTime: '白屏時間',
            readyTime: '用戶可操做時間',
            allloadTime: '總下載時間',
            mobile: '使用設備',
            nowTime: '時間',
        };
        var logStr = '';
        for (var i in timname) {
            console.warn(timname[i] + ':' + window.logInfo[i] + 'ms');
            if (i === 'mobile') {
                logStr += '&' + i + '=' + window.logInfo[i];
            } else {
                logStr += '&' + i + '=' + window.logInfo[i];
            }
            
        }
        (new Image()).src = '/action?' + logStr;
    };
      
    var defaults = {
        msg:'',  // 錯誤的具體信息
        url:'',  // 錯誤所在的url
        line:'', // 錯誤所在的行
        col:'',  // 錯誤所在的列
        nowTime: '',// 時間
    };
    window.onerror = function(msg,url,line,col,error) {
        col = col || (window.event && window.event.errorCharacter) || 0;

        defaults.url = url;
        defaults.line = line;
        defaults.col =  col;
        defaults.nowTime = new Date().getTime();

        if (error && error.stack){
            // 若是瀏覽器有堆棧信息，直接使用
            defaults.msg = error.stack.toString();

        }else if (arguments.callee){
            // 嘗試經過callee拿堆棧信息
            var ext = [];
            var fn = arguments.callee.caller;
            var floor = 3;  
            while (fn && (--floor>0)) {
                ext.push(fn.toString());
                if (fn  === fn.caller) {
                    break;
                }
                fn = fn.caller;
            }
            ext = ext.join(",");
            defaults.msg = error.stack.toString();
        }
        var str = ''
        for(var i in defaults) {
            // console.log(i,defaults[i]);
            if(defaults[i] === null || defaults[i] === undefined) {
                defaults[i] = 'null'; 
            }
            str += '&'+ i + '=' + defaults[i].toString();
        }
        srt = str.replace('&', '').replace('\n','').replace(/\s/g, '');
        (new Image()).src = '/error?' + srt;
    }
複製代碼

以上就是收集數據的所有，經過發送/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/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.com/hua1995116/…

若有好的建議以及優化的方案，還請各位在Issues上提給我。

進階（一個利用監控平臺的實戰慄子）

我利用這個平臺對個人一個項目進行了監控。若是你只是純粹玩的話，還請只閱讀上面的原系統地址，能夠忽視我這一段，畢竟我這個系統還不夠完善。

線上demo：www.qiufengh.com/#/

監控demo：qiufengh.com:8080/

項目: github.com/hua1995116/…

在這裏我設置了每過1分鐘記錄一第二天志。

// 監控引入
app.use(performance({
    time: 60, // 秒爲單位
    originalDir: './originalData', // 數據的目錄
    errorDir: './errorData' // 報錯的目錄
}))
複製代碼

以及每隔10分鐘進行一次解析。

function setPrase() {
    setInterval(function(){
        parseData();
      }, 1000 * 60 * 10);
}
複製代碼

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

2017-12-20

本文只是提供一個思路，若是想要專業的，可使用ELK之類專業的統計分析工具。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。