https://juejin.im/post/5b62d68df265da0f9d1a1cd6
在線上項目中,需要統(tǒng)計產(chǎn)品中用戶行為和使用情況统抬，從而可以從用戶和產(chǎn)品的角度去了解用戶群體火本，從而升級和迭代產(chǎn)品，使其更加貼近用戶聪建。用戶行為數(shù)據(jù)可以通過前端數(shù)據(jù)監(jiān)控的方式獲得钙畔，除此之外，前端還需要實現(xiàn)性能監(jiān)控和異常監(jiān)控金麸。性能監(jiān)控包括首屏加載時間擎析、白屏?xí)r間、http請求時間和http響應(yīng)時間挥下。異常監(jiān)控包括前端腳本執(zhí)行報錯等揍魂。
實現(xiàn)前端監(jiān)控有三個步驟：前端埋點和上報桨醋、數(shù)據(jù)處理和數(shù)據(jù)分析。
一现斋、為什么需要前端監(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ù)是有意義的，比如我們知道了用戶來源的渠道调限，可以促進(jìn)產(chǎn)品的推廣舟陆，知道用戶在每一個頁面停留的時間，可以針對停留較長的頁面耻矮，增加廣告推送等等秦躯。
(2)性能監(jiān)控
性能監(jiān)控指的是監(jiān)聽前端的性能，主要包括監(jiān)聽網(wǎng)頁或者說產(chǎn)品在用戶端的體驗裆装。常見的性能監(jiān)控數(shù)據(jù)包括：
不同用戶踱承，不同機型和不同系統(tǒng)下的首屏加載時間
白屏?xí)r間
http等請求的響應(yīng)時間
靜態(tài)資源整體下載時間
頁面渲染時間
頁面交互動畫完成時間
這些性能監(jiān)控的結(jié)果，可以展示前端性能的好壞哨免，根據(jù)性能監(jiān)測的結(jié)果可以進(jìn)一步的去優(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ù)收集的豐富性和準(zhǔn)確性會影響對產(chǎn)品線上效果的判別結(jié)果畴博。
目前常見的前端埋點方法分為三種：代碼埋點、可視化埋點和無痕埋點蓝仲。下面一一介紹每一種埋點的方法俱病。
(1) 代碼埋點
代碼埋點，就是以嵌入代碼的形式進(jìn)行埋點袱结，比如需要監(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)無埋點
無埋點并不是說不需要埋點够滑，而是全部埋點垦写，前端的任意一個事件都被綁定一個標(biāo)識，所有的事件都別記錄下來彰触。通過定期上傳記錄文件梯投，配合文件解析，解析出來我們想要的數(shù)據(jù)，并生成可視化報告供專業(yè)人員分析因此實現(xiàn)“無埋點”統(tǒng)計分蓖。
從語言層面實現(xiàn)無埋點也很簡單尔艇，比如從頁面的js代碼中，找出dom上被綁定的事件么鹤，然后進(jìn)行全埋點终娃。
無埋點的優(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)控的分為三個階段：用戶進(jìn)入網(wǎng)頁首頁、用戶在網(wǎng)頁內(nèi)部交互距误、交互中報錯喇嘱。
(2)埋點方案
在實際項目中考慮到上報數(shù)據(jù)的靈活定制茉贡，以及減少數(shù)據(jù)傳輸和服務(wù)器的壓力，在所需埋點處不多的情況下者铜，常用的方式是代碼埋點腔丧。
以用戶進(jìn)入首頁為例，我們在首頁渲染完成后會發(fā)送事件類型和類型相關(guān)的數(shù)據(jù)給server端作烟，告知首頁的監(jiān)控信息愉粤。
(3)上報周期和上報數(shù)據(jù)類型
如果埋點的事件不是很多，上報可以時時進(jìn)行拿撩，比如監(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(用戶當(dāng)前url)魂拦，fromUrl(從哪一個頁面跳轉(zhuǎn)到當(dāng)前頁面)，type(上報的事件類型),element(觸發(fā)上報事件的元素）
what: 上報的自定義擴(kuò)展數(shù)據(jù)data:{},擴(kuò)展數(shù)據(jù)中可以按需求定制搁嗓，比如包含uid等信息
上報數(shù)據(jù)的對象為：
{?
? ? ----------------上報接口本身提供--------------------
? ? currentUrl,?
? ? fromUrl,
? ? timestamp,
? ? userAgent:{
? ? ? os,
? ? ? netWord,
? ? }
? ? ----------------業(yè)務(wù)代碼配置和自定義上報數(shù)據(jù)------------
? ? type,
? ? appid,
? ? element,
? ? data:{
? ? ? ? uid,
? ? ? ? uname
? ? }
}
復(fù)制代碼
(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>
復(fù)制代碼
(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)化成十六進(jìn)制
復(fù)制代碼
四蝶桶、前端監(jiān)控結(jié)果可視化展示系統(tǒng)的設(shè)計
當(dāng)后端得到前端上報的信息之后慨绳，經(jīng)過數(shù)據(jù)分析和處理，需要前端可視化的展示數(shù)據(jù)分析后的結(jié)果真竖。
可以在開源中后臺系統(tǒng)ant-design-pro的基礎(chǔ)上進(jìn)行二次開發(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點到當(dāng)前時間）狰闪、本周、本月和全年
用戶刪選：提供根據(jù)用戶id刪選出用戶行為的統(tǒng)計信息
設(shè)備刪選：刪選不同系統(tǒng)的整體展示信息
