国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

教你如何打造出一個前端可視化監控系統

Java_oldboy / 1793人閱讀

摘要：擼起袖子，教你干一個前端監控系統還記得在我上一家公司中，某一大佬做了一個監控系統，牛逼哄哄，挺想研究他到底是怎么搞出來的。開始基于以上我們就開始搭建一個前端監簡易控平臺。收集信息要做監控系統，首先我們得有一個對象。

擼起袖子，教你干一個前端監控系統

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

背景

首先我們為什么要做前端系統呢，先看下面這張表，可以很顯然的看出，前端的性能對于產品的價值提升還是蠻有幫助的，但是這些信息如果我們能實時的采集到，并且實施以監控，讓整個產品在產品線上一直保持高效的運作，這才是我們的目的。

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

其次，也有利于我們發布的產品，能夠及時發現我們的錯誤。如果一個產品在新的迭代中，發生不可描述的錯誤。

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

開始

基于以上我們就開始搭建一個前端監簡易控平臺。(雖然現在市面上有很多這樣的系統比如ELK,但是還是忍不住自己擼一個)

只能是簡易了。

兄弟們原諒我，只能幫你們到這里了。

接下來請看。

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

收集信息

要做監控系統，首先我們得有一個對象。我們監控的對象！對象！對象！對象。

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


    
2

    
2

    
2

    
2

    
2

    
2

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

然后接下來我一共設計了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("
","").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

具體的配置我不進行講解，可以自己到官網進行查看。

下面是可視化的圖表，顯示的是每天各個時間段的信息。

界面可能不是特別美觀，還請見諒。

環境

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

如有好的建議以及優化的方案，還請各位在Issues上提給我，喜歡的話可以點個star。

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

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

項目線上地址：http://www.qiufengh.com/#/

項目監控地址：http://qiufengh.com:8080/

此項目代碼地址：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 (更完美的閱讀體驗哦)

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92215.html

相關文章

  • 前端之從零開始系列

    摘要：只有動手，你才能真的理解作者的構思的巧妙只有動手，你才能真正掌握一門技術持續更新中項目地址求求求源碼系列跟一起學如何寫函數庫中高級前端面試手寫代碼無敵秘籍如何用不到行代碼寫一款屬于自己的類庫原理講解實現一個對象遵循規范實戰手摸手，帶你用擼 Do it yourself!!! 只有動手，你才能真的理解作者的構思的巧妙 只有動手，你才能真正掌握一門技術 持續更新中…… 項目地址 https...

    Youngdze 評論0 收藏0

  • 個人分享--web前端學習資源分享

    摘要：前言月份開始出沒社區，現在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了一般來說，差不多到了轉正的時候，會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區，現在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了！一般來說，差不多到了轉正的時候，會進行總結或者分享會議！那么今天我就...

    sherlock221 評論0 收藏0

  • SVG

    摘要：目前只提供了一些基礎功能。中與的區別開發者第一次接觸手寫那種，雖然很多情況都有設計師使用來完成這項工作，但還是不排除需要利用到的每個元素。輕量級，具備靈活的來自團隊，全球非常出名的可視化團隊。于是筆者嘗試著把移植到中。 使用SVG + CSS實現動態霓虹燈文字效果 早上無意間進入一個網站，看到他們的LOGO效果略屌，如圖： 剛開始以為是gif動畫之類的，審查元素發現居然是用SVG + ...

    104828720 評論0 收藏0

  • SegmentFault 技術周刊 Vol.35 - WebGL：打開網頁看大片

    摘要：在文末，我會附上一個可加載的模型方便學習中文藝術字渲染用原生可以很容易地繪制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以說是 HTML5 技術生態鏈中最為令人振奮的標準之一，它把 Web 帶入了 3D 的時代。 初識 WebGL 先通過幾個使用 Web...

    objc94 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<