前端監控和前端埋點方案設計

時間 2019-11-05

標籤前端監控方案設計简体版

原文原文鏈接

在線上項目中,須要統計產品中用戶行爲和使用狀況，從而能夠從用戶和產品的角度去了解用戶羣體，從而升級和迭代產品，使其更加貼近用戶。用戶行爲數據能夠經過前端數據監控的方式得到，除此以外，前端還須要實現性能監控和異常監控。性能監控包括首屏加載時間、白屏時間、http請求時間和http響應時間。異常監控包括前端腳本執行報錯等。javascript

實現前端監控有三個步驟：前端埋點和上報、數據處理和數據分析。本文針對整個前端監控，設計適用的方案。本文的主要內容分爲：前端

爲何須要前端監控

經常使用前端埋點方案總結

前端埋點方案選型和前端上報方案設計

前端監控結果可視化展現系統的設計

原文的地址，在個人博客中：https://github.com/forthealllight/blog/issues/23java

若有幫助，您的star是對我最好的鼓勵～node

1、爲何須要前端監控

前端監控的目的是：git

獲取用戶行爲以及跟蹤產品在用戶端的使用狀況，並以監控數據爲基礎，指明產品優化的方向。github

前端監控能夠分爲三類：數據監控、性能監控和異常監控。下面咱們來一一的瞭解。算法

(1)數據監控

數據監控，顧名思義就是監聽用戶的行爲。常見的數據監控包括：後端

PV/UV:PV(page view)，即頁面瀏覽量或點擊量。UV:指訪問某個站點或點擊某條新聞的不一樣IP地址的人數
用戶在每個頁面的停留時間
用戶經過什麼入口來訪問該網頁
用戶在相應的頁面中觸發的行爲

統計這些數據是有意義的，好比咱們知道了用戶來源的渠道，能夠促進產品的推廣，知道用戶在每個頁面停留的時間，能夠針對停留較長的頁面，增長廣告推送等等。api

(2)性能監控

性能監控指的是監聽前端的性能，主要包括監聽網頁或者說產品在用戶端的體驗。常見的性能監控數據包括：瀏覽器

不一樣用戶，不一樣機型和不一樣系統下的首屏加載時間
白屏時間
http等請求的響應時間
靜態資源總體下載時間
頁面渲染時間
頁面交互動畫完成時間

這些性能監控的結果，能夠展現前端性能的好壞，根據性能監測的結果能夠進一步的去優化前端性能，好比兼容低版本瀏覽器的動畫效果，加快首屏加載等等。

(3)異常監控

此外，產品的前端代碼在執行過程當中也會發生異常，所以須要引入異常監控。及時的上報異常狀況，能夠避免線上故障的發上。雖然大部分異常能夠經過try catch的方式捕獲，可是好比內存泄漏以及其餘偶現的異常難以捕獲。常見的須要監控的異常包括：

Javascript的異常監控
樣式丟失的異常監控

2、經常使用前端埋點方案總結

在上一節中介紹了前端監控的做用，那麼如何實現前端監控呢，實現前端監控的步驟爲：前端埋點和上報、數據處理和數據分析。首要的步驟就是前端埋點和上報，也就是數據的收集階段。數據收集的豐富性和準確性會影響對產品線上效果的判別結果。

目前常見的前端埋點方法分爲三種：代碼埋點、可視化埋點和無痕埋點。下面一一介紹每一種埋點的方法。

(1) 代碼埋點

代碼埋點，就是以嵌入代碼的形式進行埋點，好比須要監控用戶的點擊事件，會選擇在用戶點擊時，插入一段代碼，保存這個監聽行爲或者直接將監聽行爲以某一種數據格式直接傳遞給server端。此外好比須要統計產品的PV和UV的時候，須要在網頁的初始化時，發送用戶的訪問信息等。

代碼埋點的優勢：

能夠在任意時刻，精確的發送或保存所須要的數據信息。

缺點：

工做量較大，每個組件的埋點都須要添加相應的代碼

(2)可視化埋點

經過可視化交互的手段，代替代碼埋點。將業務代碼和埋點代碼分離，提供一個可視化交互的頁面，輸入爲業務代碼，經過這個可視化系統，能夠在業務代碼中自定義的增長埋點事件等等，最後輸出的代碼耦合了業務代碼和埋點代碼。

可視化埋點聽起來比較高大上，實際上跟代碼埋點仍是區別不大。也就是用一個系統來實現手動插入代碼埋點的過程。

缺點：

可視化埋點能夠埋點的控件有限，不能手動定製。

(3)無埋點

無埋點並非說不須要埋點，而是所有埋點，前端的任意一個事件都被綁定一個標識，全部的事件都別記錄下來。經過按期上傳記錄文件，配合文件解析，解析出來咱們想要的數據，並生成可視化報告供專業人員分析所以實現「無埋點」統計。

從語言層面實現無埋點也很簡單，好比從頁面的js代碼中，找出dom上被綁定的事件，而後進行全埋點。

無埋點的優勢：

因爲採集的是全量數據，因此產品迭代過程當中是不須要關注埋點邏輯的，也不會出現漏埋、誤埋等現象

缺點：

無埋點採集全量數據，給數據傳輸和服務器增長壓力
沒法靈活的定製各個事件所須要上傳的數據

3、前端埋點方案選型和前端上報方案設計

第一章中介紹了前端所須要監聽的信息，在第二章中介紹了前端埋點的常見方式，本文來根據需求，來定製咱們的埋點和上報方案。

(1)監控數據

首先咱們須要明確一個產品或者網頁，廣泛須要監控和上報的數據。監控的分爲三個階段：用戶進入網頁首頁、用戶在網頁內部交互和交互中報錯。每個階段須要監控和上報的數據以下圖所示：

(2)埋點方案

在實際項目中考慮到上報數據的靈活定製，以及減小數據傳輸和服務器的壓力，在所需埋點處很少的狀況下，經常使用的方式是代碼埋點。

以用戶進入首頁爲例，咱們在首頁渲染完成後會發送事件類型和類型相關的數據給server端，告知首頁的監控信息。

(3)上報週期和上報數據類型

若是埋點的事件不是不少，上報能夠時時進行，好比監控用戶的交互事件，能夠在用戶觸發事件後，馬上上報用戶所觸發的事件類型。若是埋點的事件較多，或者說網頁內部交互頻繁，能夠經過本地存儲的方式先緩存上報信息，而後按期上報。

接着來肯定須要埋點上報的數據，上報的信息包括用戶我的信息以及用戶行爲，主要數據能夠分爲：

who: appid(系統或者應用的id),userAgent(用戶的系統、網絡等信息)
when: timestamp(上報的時間戳)
from where: currentUrl(用戶當前url)，fromUrl(從哪個頁面跳轉到當前頁面)，type(上報的事件類型),element(觸發上報事件的元素）
what: 上報的自定義擴展數據data:{},擴展數據中能夠按需求定製，好比包含uid等信息

上報數據的對象爲：

{   
    ----------------上報接口自己提供--------------------
    currentUrl,  
    fromUrl,
    timestamp,
    userAgent:{
       os,
       netWord,
    }
    ----------------業務代碼配置和自定義上報數據------------
    type,
    appid,
    element,
    data:{
        uid,
        uname
    }
}
複製代碼

(4)埋點和上報舉例

咱們以上報首屏加載事件爲例，DOM提供了document的DOMContentLoaded事件來監聽dom掛載，提供了window的load事件來監聽頁面全部資源加載渲染完畢。

<script type="text/javascript">
  var start=Date.now();
  document.addEventListener('DOMContentLoaded', function() {
     fetch('some api',{
         type:'dom complete',
         data:{
           domCompletedTime:Date.now()-start
         }
     })
  });
  window.addEventListener('load', function() {
     fetch('some api',{
         type:'load complete',
         data:{
           LoadCompletedTime:Date.now()-start
         }
     })
  });
</script>
複製代碼

(5)前端埋點系統的先後端通訊加密

在上報數據的先後端通訊中，須要和server端協商加密機制，利用 OpenSSL庫來實現的加密，OpenSSL已是一個普遍被採用的加密算法。前端能夠採用node的crypto模塊。

首先來看hash算法，crypto.createHash() 來建立一個Hash實例，可利用的hash算法以下：

md5
sha1
sha256
sha512
ripemd160

以sha256算法加密爲例：

const str="123445";//須要加密的字段
const hash=crypto.createHash('sha256');//指定加密算法
hash.update(str); //經過算法加密相應的字段
const result=hash.digest('hex');//轉化成十六進制
複製代碼