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

yuxiaoliang發表於2018-08-02
前端

線上上專案中,需要統計產品中使用者行為和使用情況，從而可以從使用者和產品的角度去了解使用者群體，從而升級和迭代產品，使其更加貼近使用者。使用者行為資料可以通過前端資料監控的方式獲得，除此之外，前端還需要實現效能監控和異常監控。效能監控包括首屏載入時間、白屏時間、http請求時間和http響應時間。異常監控包括前端指令碼執行報錯等。

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

  • 為什麼需要前端監控
  • 常用前端埋點方案總結
  • 前端埋點方案選型和前端上報方案設計
  • 前端監控結果視覺化展示系統的設計

原文的地址，在我的部落格中：https://github.com/forthealllight/blog/issues/23

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

一、為什麼需要前端監控

前端監控的目的是：

獲取使用者行為以及跟蹤產品在使用者端的使用情況，並以監控資料為基礎，指明產品優化的方向。

前端監控可以分為三類：資料監控、效能監控和異常監控。下面我們來一一的瞭解。

(1)資料監控

資料監控，顧名思義就是監聽使用者的行為。常見的資料監控包括：

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

統計這些資料是有意義的，比如我們知道了使用者來源的渠道，可以促進產品的推廣，知道使用者在每一個頁面停留的時間，可以針對停留較長的頁面，增加廣告推送等等。

(2)效能監控

效能監控指的是監聽前端的效能，主要包括監聽網頁或者說產品在使用者端的體驗。常見的效能監控資料包括：

  • 不同使用者，不同機型和不同系統下的首屏載入時間
  • 白屏時間
  • http等請求的響應時間
  • 靜態資源整體下載時間
  • 頁面渲染時間
  • 頁面互動動畫完成時間

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

(3)異常監控

此外，產品的前端程式碼在執行過程中也會發生異常，因此需要引入異常監控。及時的上報異常情況，可以避免線上故障的發上。雖然大部分異常可以通過try catch的方式捕獲，但是比如記憶體洩漏以及其他偶現的異常難以捕獲。常見的需要監控的異常包括：

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

二、常用前端埋點方案總結

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

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

(1) 程式碼埋點

程式碼埋點，就是以嵌入程式碼的形式進行埋點，比如需要監控使用者的點選事件，會選擇在使用者點選時，插入一段程式碼，儲存這個監聽行為或者直接將監聽行為以某一種資料格式直接傳遞給server端。此外比如需要統計產品的PV和UV的時候，需要在網頁的初始化時，傳送使用者的訪問資訊等。

程式碼埋點的優點：

  • 可以在任意時刻，精確的傳送或儲存所需要的資料資訊。

缺點：

  • 工作量較大，每一個元件的埋點都需要新增相應的程式碼

(2)視覺化埋點

通過視覺化互動的手段，代替程式碼埋點。將業務程式碼和埋點程式碼分離，提供一個視覺化互動的頁面，輸入為業務程式碼，通過這個視覺化系統，可以在業務程式碼中自定義的增加埋點事件等等，最後輸出的程式碼耦合了業務程式碼和埋點程式碼。

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

缺點：

  • 視覺化埋點可以埋點的控制元件有限，不能手動定製。

(3)無埋點

無埋點並不是說不需要埋點，而是全部埋點，前端的任意一個事件都被繫結一個標識，所有的事件都別記錄下來。通過定期上傳記錄檔案，配合檔案解析，解析出來我們想要的資料，並生成視覺化報告供專業人員分析因此實現“無埋點”統計。

從語言層面實現無埋點也很簡單，比如從頁面的js程式碼中，找出dom上被繫結的事件，然後進行全埋點。

無埋點的優點：

  • 由於採集的是全量資料，所以產品迭代過程中是不需要關注埋點邏輯的，也不會出現漏埋、誤埋等現象

缺點：

  • 無埋點採集全量資料，給資料傳輸和伺服器增加壓力
  • 無法靈活的定製各個事件所需要上傳的資料

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

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

(1)監控資料

首先我們需要明確一個產品或者網頁，普遍需要監控和上報的資料。監控的分為三個階段：使用者進入網頁首頁、使用者在網頁內部互動和互動中報錯。每一個階段需要監控和上報的資料如下圖所示：

default

(2)埋點方案

在實際專案中考慮到上報資料的靈活定製，以及減少資料傳輸和伺服器的壓力，在所需埋點處不多的情況下，常用的方式是程式碼埋點。

以使用者進入首頁為例，我們在首頁渲染完成後會傳送事件型別和型別相關的資料給server端，告知首頁的監控資訊。

default

(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');//轉化成十六進位制
複製程式碼

四、前端監控結果視覺化展示系統的設計

當後端得到前端上報的資訊之後，經過資料分析和處理，需要前端視覺化的展示資料分析後的結果。

可以在開源中後臺系統ant-design-pro的基礎上進行二次開發，首先要明確展示資訊。展示的資訊包括單個使用者和整體應用。

對於單個使用者來說需要展示的監控資訊為：

  • 單個使用者，在互動過程中觸發各個埋點事件的次數
  • 單個使用者，在某個時間週期內，訪問本網頁的入口來源
  • 單個使用者，在每一個子頁面的停留時間

對於全體使用者需要展示的資訊為：

  • 某一個時間段內網頁的PV和UV
  • 全體使用者訪問網頁的裝置和作業系統分析
  • 某一個時間段內訪問本網頁的入口來源分析
  • 全體使用者在訪問本網頁時，在互動過程中觸發各個埋點事件的總次數
  • 全體使用者在訪問本網頁時，網頁上報異常的集合

刪選功能集合：

  • 時間篩選：提供今日（00點到當前時間）、本週、本月和全年
  • 使用者刪選：提供根據使用者id刪選出使用者行為的統計資訊
  • 裝置刪選：刪選不同系統的整體展示資訊

相關文章