前端監控和前端埋點

前端監控和前端埋點，一個是目的，一個是實現方式，作前端埋點，是爲了作前端監控，那爲何要作前端監控呢？

前端監控的目的是：

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

前端監控

前端監控能夠分爲三類：數據監控、性能監控和異常監控。

數據監控

數據監控，就是監聽用戶的行爲，常見的監控項有：

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

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

性能監控

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

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

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

異常監控

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

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

前端埋點

咱們說完了前端監控的三個分類，如今就來聊聊怎麼實現前端監控。實現前端監控，第一步確定是將咱們要監控的事項（數據）給收集起來，再提交給後臺，最後進行數據分析。數據收集的豐富性和準確性會直接影響到咱們作前端監控的質量，由於咱們會以此爲基礎，爲產品的將來發展指引方向。

收集監控數據咱們是經過前端埋點來實現的，目前常見的前端埋點方法有三種：手動埋點、可視化埋點和無埋點。

手動埋點

手動埋點，也叫代碼埋點，即純手動寫代碼，調用埋點 SDK 的函數，在須要埋點的業務邏輯功能位置調用接口，上報埋點數據，像友盟、百度統計等第三方數據統計服務商大都採用這種方案。

手動埋點讓使用者能夠方便地設置自定義屬性、自定義事件；因此當你須要深刻下鑽，並精細化自定義分析時，比較適合使用手動埋點。

手動埋點的缺陷就是，項目工程量大，須要埋點的位置太多，並且須要產品開發運營之間相互反覆溝通，容易出現手動差錯，若是錯誤，從新埋點的成本也很高。這會致使整個數據收集週期變的很長，收集成本變的很高，並且效率很低。由於手動埋點須要開發人員完成，因此每次有埋點更新，或者漏埋點，都須要從新走上線發佈流程，更新成本也高，對線上系統穩定性也有必定危害。

可視化埋點

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

可視化埋點聽起來比較高大上，實際上跟代碼埋點仍是區別不大。也就是用一個系統來實現手動插入代碼埋點的過程。好比國外比較早作可視化的是 Mixpanel，國內較早支持可視化埋點的有TalkingData、諸葛 IO，2017年騰訊的 MTA 也宣佈支持可視化埋點；相比於手動埋點更新困難，埋點成本高的問題，可視化埋點優化了移動運營中數據採集的流程，可以支持產品運營隨時調整埋點，無需再走發版流程，直接把配置結果推入到前端，數據採集流程更簡化，也更方便產品的迭代。

可視化埋點中多數基於Xpath的方案，XPath 是一門在 XML 文檔中查找信息的語言，XPath 可用來在 XML 文檔中對元素和屬性進行遍歷。

無埋點

無埋點則是前端自動採集所有事件，上報埋點數據，由後端來過濾和計算出有用的數據。優勢是前端只要一次加載埋點腳本，缺點是流量和採集的數據過於龐大，服務器性能壓力山大。

採用無埋點技術的有主流的 GrowingIO、神策。

總結

在不一樣場景下咱們須要選擇不一樣的埋點方案。例如對於簡單的用戶行爲類事件，可使用全埋點解決；而對於須要攜帶大量運行時纔可獲知的業務字段的埋點需求，就須要聲明式埋點來解決。

代碼實例

說完了理論的東西，咱們來看點常見的核心代碼實現。

收集用戶信息

經過瀏覽器內置的 JavaScript 對象，咱們就能夠收集當前用戶的一些基本信息，咱們將收集好的數據經過 Image 對象實例的 src 屬性指向後端腳本並攜帶參數，就能夠將咱們收集的數據傳給後端，之因此用 Image 對象而不是 ajax，是爲了不跨域的問題。

(function () {
    let params = {};
    // document
    if (document) {
        params.domain = document.domain || ''; // 域名
        params.url = document.URL || ''; // 當前 URL 地址
        params.title = document.title || ''; // 當前頁面標題
        params.referrer = document.referrer || ''; // 上一個訪問頁面 URL 地址
    }
    // window
    if(window && window.screen) {
        params.sh = window.screen.height || 0; // 屏幕高度
        params.sw = window.screen.width || 0; // 屏幕寬度
        params.cd = window.screen.colorDepth || 0; // 屏幕顏色深度
    }
    // navigator
    if(navigator) {
        params.lang = navigator.language || ''; // 語言
    }
    // 拼接參數
    let args = '';
    for(let i in params) {
        if(args !== '') {
            args += '&';
        }
        args += `${i}=${params[i]}`
    }
    // 經過假裝成 Image 對象，傳遞給後端
    let img = new Image(1, 1);
    let src = `http://www.funlee.cn/api/test.jpg?args=${encodeURIComponent(args)}`;
    img.src = src;
})()
複製代碼

能夠根據具體的實際需求，利用 JavaScript 的內置 API，還能夠獲取到更多的信息。

經過 script 標籤引入埋點代碼

<script> (function() { let hm = document.createElement("script"); hm.type = "text/javascript"; hm.async = true; hm.src = "http://www.funlee.cn/testAnalyze.js"; let s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script>

複製代碼

獲取 web 各階段響應時間

爲了準確獲取咱們的 web 應用程序的性能特性，咱們就得知道該應用程序在各個階段的響應時間，好比：DNS 解析時間、TCP 創建鏈接時間、首頁白屏時間、DOM 渲染完成時間、頁面 load 時間等。好在這些信息均可以經過 Performance 接口獲取相關信息來計算得出。

let timing = performance.timing,
    start = timing.navigationStart,
    dnsTime = 0,
    tcpTime = 0,
    firstPaintTime = 0,
    domRenderTime = 0,
    loadTime = 0;

dnsTime = timing.domainLookupEnd - timing.domainLookupStart;
tcpTime = timing.connectEnd - timing.connectStart;
firstPaintTime = timing.responseStart - start;
domRenderTime = timing.domContentLoadedEventEnd - start;
loadTime = timing.loadEventEnd - start;

console.log('DNS解析時間:', dnsTime, 
            '\nTCP創建時間:', tcpTime, 
            '\n首屏時間:', firstPaintTime,
            '\ndom渲染完成時間:', domRenderTime, 
            '\n頁面onload時間:', loadTime);
複製代碼

CSS 埋點

沒錯，CSS 也能作埋點，這個算是一個小技巧，固然，CSS 埋點只能處理一些簡單的事件埋點，收集複雜的數據仍是得用 JS，但 CSS 埋點有個優勢就是，沒法被禁用。

完整實例請戳：CSS埋點

核心代碼以下：

<style> .link:active::after{ color: red; content: url("http://192.168.1.110:3000/someapi?params=someInfo"); } </style>
<a class="link btn">點擊訪問</a>
複製代碼

巨人的肩膀

參考連接：

• 前端監控和前端埋點方案設計
• 前端埋點的那些事
• 頁面跳轉時，統計數據丟失問題探討
• JS埋點技術分析
• window.performance 詳解