阿里UC百億PV的前端監控平臺:（2）前端採集上報

時間 2019-11-05

標籤阿里百億前端監控平臺採集上報欄目阿里巴巴简体版

原文原文鏈接

本文首發於知乎《阿里UC百億級PV的前端監控平臺實踐》，搬運轉載請註明出處，不然追究版權責任。javascript

阿里UC百億PV的嶽鷹全景監控平臺實踐系列文章：html

前言

Web承載的業務愈來愈複雜，用戶對於Web的體驗要求也愈來愈高，Web性能的優劣對業務收益也有着很是直接的影響。前端

本文主要介紹阿里UC百億級PV前端監控平臺，嶽鷹全景監控平臺的實踐歷程 - 採集上報，閱讀時長 10 分鐘。java

採集上報

日誌採集

日誌採集是打造前端監控系統最關鍵的第一步。採集日誌的準確性，是平臺不漏報不誤報的核心；日誌信息的完整性，直接影響開發者可否獲取到關鍵錯誤代碼來解決問題。對於前端而言，通常的監控指標都會包含頁面性能、JS異常，資源加載異常；而前端頁面一般還須要請求後端服務器數據，所以須要把API請求失敗也監控起來，從而覆蓋頁面訪問的全過程。git

前端異常

前端異常包括JS異常、資源加載異常、API請求異常。 其中JS異常種類繁多，分爲 JS語法錯誤、代碼運行時異常、異步執行Promise異常、跨域 Script error等。對於這些異常問題，瀏覽器給開發者提供了對應的API。github

下面表格總結了採集前端異常問題的常見方案和優缺點。web

瀏覽器提供的API繁多並且面向場景各有不一樣，所以使用上較爲繁瑣，容易踩坑。通過咱們實踐，以上方案能夠捕獲大部分常見的前端異常，效果比較符合預期。小程序

頁面性能

對於頁面性能的採集，常見的方案是經過 performance.timing API 獲取；最新的瀏覽器提供了更高API等級的 performance .getEntriesByType(‘navigation’) API 。後端

其中，值得重點關注的是瀏覽器對於W3C最新標準的實現，包括FP、FMP、FCP 等指標的演進，另外就是SPA頁面的監控，有興趣能夠查看咱們的這篇文章《10分鐘完全搞懂前端頁面性能監控》。微信小程序

PVUV

PVUV日誌採集相對簡單，關鍵點在於採集時機，一般選擇在head執行或者onload事件回調，從前端監控的角度咱們一般選擇 onload 時機；另外，須要考慮SPA頁面的支持。

除了上述指標日誌的採集，一般咱們還會上報更多的環境信息，有利於更快速的定位問題。具體字段有網絡環境，設備型號，操做系統版本，客戶端版本，前端版本，API接口版本等。

日誌上報

上報的環節分爲上報前的處理，上報請求。最簡單粗暴的作法多是直接寫一個AJAX請求上報，但這種方式成功率不穩定，極易在頁面切換時丟失日誌；而且，對於大流量站點還須要考慮帶寬節流等訴求。完整考慮，一個相對完善的上報邏輯須要包括數據過濾、截斷、採樣、合併以及加密壓縮等大量細節設計。

若是你的採集上報腳本部署域名和前端頁面域名不一樣，極可能遇到 Script Error 的問題。具體解決辦法能夠參考【前端3分鐘】Script Error產生的緣由和解法。

嶽鷹-WEB前端監控

阿里UC出品的嶽鷹全景監控平臺，支持移動H五、PC站點、微信小程序以及支付寶小程序等各家小程序，PV、JS異常、頁面性能等監控指標完整，已經對外開放，歡迎免費體驗試用。

技術交流、第一時間掌握產品動態，歡迎聯繫微信小助手～

參考資料

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。