?

一、為什么需要前端監(jiān)控

前端監(jiān)控的目的是：

?

獲取用戶行為以及跟蹤產(chǎn)品在用戶端的使用情況，并以監(jiān)控數(shù)據(jù)為基礎(chǔ)，指明產(chǎn)品優(yōu)化的方向

。

?

前端監(jiān)控可以分為三類：數(shù)據(jù)監(jiān)控、性能監(jiān)控和異常監(jiān)控。下面我們來一一的了解。

(1)數(shù)據(jù)監(jiān)控

數(shù)據(jù)監(jiān)控，顧名思義就是監(jiān)聽用戶的行為。常見的數(shù)據(jù)監(jiān)控包括：

• PV/UV:PV(page view)，即頁面瀏覽量或點擊量。UV:指訪問某個站點或點擊某條新聞的不同IP地址的人數(shù)

• 用戶在每一個頁面的停留時間

• 用戶通過什么入口來訪問該網(wǎng)頁

• 用戶在相應(yīng)的頁面中觸發(fā)的行為

統(tǒng)計這些數(shù)據(jù)是有意義的，比如我們知道了用戶來源的渠道，可以促進產(chǎn)品的推廣，知道用戶在每一個頁面停留的時間，可以針對停留較長的頁面，增加廣告推送等等。

(2)性能監(jiān)控

性能監(jiān)控指的是監(jiān)聽前端的性能，主要包括監(jiān)聽網(wǎng)頁或者說產(chǎn)品在用戶端的體驗。常見的性能監(jiān)控數(shù)據(jù)包括：

• 不同用戶，不同機型和不同系統(tǒng)下的首屏加載時間

• 白屏時間

• http等請求的響應(yīng)時間

• 靜態(tài)資源整體下載時間

• 頁面渲染時間

• 頁面交互動畫完成時間

這些性能監(jiān)控的結(jié)果，可以展示前端性能的好壞，根據(jù)性能監(jiān)測的結(jié)果可以進一步的去優(yōu)化前端性能，比如兼容低版本瀏覽器的動畫效果，加快首屏加載等等。

(3)異常監(jiān)控

此外，產(chǎn)品的前端代碼在執(zhí)行過程中也會發(fā)生異常，因此需要引入異常監(jiān)控。及時的上報異常情況，可以避免線上故障的發(fā)上。雖然大部分異常可以通過try catch的方式捕獲，但是比如內(nèi)存泄漏以及其他偶現(xiàn)的異常難以捕獲。常見的需要監(jiān)控的異常包括：

• Javascript的異常監(jiān)控

• 樣式丟失的異常監(jiān)控

二、常用前端埋點方案總結(jié)

在上一節(jié)中介紹了前端監(jiān)控的作用，那么如何實現(xiàn)前端監(jiān)控呢，實現(xiàn)前端監(jiān)控的步驟為：前端埋點和上報、數(shù)據(jù)處理和數(shù)據(jù)分析。首要的步驟就是前端埋點和上報，也就是數(shù)據(jù)的收集階段。數(shù)據(jù)收集的豐富性和準確性會影響對產(chǎn)品線上效果的判別結(jié)果。

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

(1) 代碼埋點

代碼埋點，就是以嵌入代碼的形式進行埋點，比如需要監(jiān)控用戶的點擊事件，會選擇在用戶點擊時，插入一段代碼，保存這個監(jiān)聽行為或者直接將監(jiān)聽行為以某一種數(shù)據(jù)格式直接傳遞給server端。此外比如需要統(tǒng)計產(chǎn)品的PV和UV的時候，需要在網(wǎng)頁的初始化時，發(fā)送用戶的訪問信息等。

代碼埋點的優(yōu)點：

• 可以在任意時刻，精確的發(fā)送或保存所需要的數(shù)據(jù)信息。

缺點：

• 工作量較大，每一個組件的埋點都需要添加相應(yīng)的代碼

(2)可視化埋點

通過可視化交互的手段，代替代碼埋點。將業(yè)務(wù)代碼和埋點代碼分離，提供一個可視化交互的頁面，輸入為業(yè)務(wù)代碼，通過這個可視化系統(tǒng)，可以在業(yè)務(wù)代碼中自定義的增加埋點事件等等，最后輸出的代碼耦合了業(yè)務(wù)代碼和埋點代碼。

可視化埋點聽起來比較高大上，實際上跟代碼埋點還是區(qū)別不大。也就是用一個系統(tǒng)來實現(xiàn)手動插入代碼埋點的過程。

缺點：

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

(3)無埋點

無埋點并不是說不需要埋點，而是全部埋點，前端的任意一個事件都被綁定一個標識，所有的事件都別記錄下來。通過定期上傳記錄文件，配合文件解析，解析出來我們想要的數(shù)據(jù)，并生成可視化報告供專業(yè)人員分析因此實現(xiàn)“無埋點”統(tǒng)計。

從語言層面實現(xiàn)無埋點也很簡單，比如從頁面的js代碼中，找出dom上被綁定的事件，然后進行全埋點。

無埋點的優(yōu)點：

• 由于采集的是全量數(shù)據(jù)，所以產(chǎn)品迭代過程中是不需要關(guān)注埋點邏輯的，也不會出現(xiàn)漏埋、誤埋等現(xiàn)象

缺點：

• 無埋點采集全量數(shù)據(jù)，給數(shù)據(jù)傳輸和服務(wù)器增加壓力

• 無法靈活的定制各個事件所需要上傳的數(shù)據(jù)

三、前端埋點方案選型和前端上報方案設(shè)計

第一章中介紹了前端所需要監(jiān)聽的信息，在第二章中介紹了前端埋點的常見方式，本文來根據(jù)需求，來定制我們的埋點和上報方案。

(1)監(jiān)控數(shù)據(jù)

首先我們需要明確一個產(chǎn)品或者網(wǎng)頁，普遍需要監(jiān)控和上報的數(shù)據(jù)。監(jiān)控的分為三個階段：用戶進入網(wǎng)頁首頁、用戶在網(wǎng)頁內(nèi)部交互和交互中報錯。每一個階段需要監(jiān)控和上報的數(shù)據(jù)如下圖所示：

(2)埋點方案

在實際項目中考慮到上報數(shù)據(jù)的靈活定制，以及減少數(shù)據(jù)傳輸和服務(wù)器的壓力，在所需埋點處不多的情況下，常用的方式是代碼埋點。

以用戶進入首頁為例，我們在首頁渲染完成后會發(fā)送事件類型和類型相關(guān)的數(shù)據(jù)給server端，告知首頁的監(jiān)控信息。

(3)上報周期和上報數(shù)據(jù)類型

如果埋點的事件不是很多，上報可以時時進行，比如監(jiān)控用戶的交互事件，可以在用戶觸發(fā)事件后，立刻上報用戶所觸發(fā)的事件類型。如果埋點的事件較多，或者說網(wǎng)頁內(nèi)部交互頻繁，可以通過本地存儲的方式先緩存上報信息，然后定期上報。

接著來確定需要埋點上報的數(shù)據(jù)，上報的信息包括用戶個人信息以及用戶行為，主要數(shù)據(jù)可以分為：

• who: appid(系統(tǒng)或者應(yīng)用的id),userAgent(用戶的系統(tǒng)、網(wǎng)絡(luò)等信息)

• when: timestamp(上報的時間戳)

• from where: currentUrl(用戶當前url)，fromUrl(從哪一個頁面跳轉(zhuǎn)到當前頁面)，type(上報的事件類型),element(觸發(fā)上報事件的元素）

• what: 上報的自定義擴展數(shù)據(jù)data:{},擴展數(shù)據(jù)中可以按需求定制，比如包含uid等信息

上報數(shù)據(jù)的對象為：

{ ? ----------------上報接口本身提供--------------------currentUrl, ?fromUrl,timestamp,userAgent:{os,netWord,}----------------業(yè)務(wù)代碼配置和自定義上報數(shù)據(jù)------------ ? ?type,appid,element,data:{uid,uname} }復制代碼

(4)埋點和上報舉例

我們以上報首屏加載事件為例，DOM提供了document的DOMContentLoaded事件來監(jiān)聽dom掛載，提供了window的load事件來監(jiān)聽頁面所有資源加載渲染完畢。

<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)前端埋點系統(tǒng)的前后端通信加密

在上報數(shù)據(jù)的前后端通信中，需要和server端協(xié)商加密機制，利用 OpenSSL庫來實現(xiàn)的加密，OpenSSL已經(jīng)是一個廣泛被采用的加密算法。前端可以采用node的crypto模塊。

首先來看hash算法，crypto.createHash() 來創(chuàng)建一個Hash實例，可利用的hash算法如下：

• md5

• sha1

• sha256

• sha512

• ripemd160

以sha256算法加密為例：

const str="123445";//需要加密的字段 const hash=crypto.createHash('sha256');//指定加密算法 hash.update(str); //通過算法加密相應(yīng)的字段 const result=hash.digest('hex');//轉(zhuǎn)化成十六進制復制代碼

四、前端監(jiān)控結(jié)果可視化展示系統(tǒng)的設(shè)計

當后端得到前端上報的信息之后，經(jīng)過數(shù)據(jù)分析和處理，需要前端可視化的展示數(shù)據(jù)分析后的結(jié)果。

可以在開源中后臺系統(tǒng)ant-design-pro的基礎(chǔ)上進行二次開發(fā)，首先要明確展示信息。展示的信息包括單個用戶和整體應(yīng)用。

對于單個用戶來說需要展示的監(jiān)控信息為：

• 單個用戶，在交互過程中觸發(fā)各個埋點事件的次數(shù)

• 單個用戶，在某個時間周期內(nèi)，訪問本網(wǎng)頁的入口來源

• 單個用戶，在每一個子頁面的停留時間

對于全體用戶需要展示的信息為：

• 某一個時間段內(nèi)網(wǎng)頁的PV和UV

• 全體用戶訪問網(wǎng)頁的設(shè)備和操作系統(tǒng)分析

• 某一個時間段內(nèi)訪問本網(wǎng)頁的入口來源分析

• 全體用戶在訪問本網(wǎng)頁時，在交互過程中觸發(fā)各個埋點事件的總次數(shù)

• 全體用戶在訪問本網(wǎng)頁時，網(wǎng)頁上報異常的集合

刪選功能集合：

• 時間篩選：提供今日（00點到當前時間）、本周、本月和全年

• 用戶刪選：提供根據(jù)用戶id刪選出用戶行為的統(tǒng)計信息

• 設(shè)備刪選：刪選不同系統(tǒng)的整體展示信息

轉(zhuǎn)載于:https://www.cnblogs.com/liuhao-web/p/9609884.html

總結(jié)

以上是生活随笔為你收集整理的前端监控和前端埋点方案设计--摘抄的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。