• 中文
  • ENGLISH
別再讓你的web頁面在用戶瀏覽器端裸奔
2018/01/18

本文作者:戊子

全文約3000字,閱讀此文大概需要8分鐘
* 如果你的應用尚未接入過前端監控,建議讀者可以仔細閱讀此文了解前端監控的重要性
* 如果你的應用已經接入了前端監控,也建議讀者閱讀此文了解國內外前端監控產品的異同,看看目前是否已將前端監控用到了極致

什么是前端監控

如果籠統的將web開發分為前端和后端開發,那后端則數據的生產,而前端則負責數據的展現。后端代碼跑在我們業務方自己的服務器上,對于代碼運行過程中產生的日志,具備天然的低成本獲取優勢,在最原始的狀態下,我們可以直接登錄我們的應用服務器去撈取日志,定位線上問題。不過,事實上我們會更加依賴我們已經基于日志打造的一系列成熟的后端監控系統,來監控后端應用代碼運行過程中的健壯度。
通過后端監控系統,我們已經可以清楚的知道數據生產過程中的發生的問題,那后端數據傳輸到瀏覽器的過程,以及數據在用戶瀏覽器中呈現的過程是否都順利完成了呢?
image | center

前端監控正是在這樣的背景下應運而生,前端監控重點監控頁面&API的網絡請求過程,以及頁面在瀏覽器端渲染&交互的過程中是否正常。

具體來講,網絡請求過程中最核心的監控能力主要包含
* web頁面&CDN資源的加載速度
* 每次異步請求后端API的成功率以及響應延時

頁面渲染&交互過程中最核心的監控能力就是
* 頁面運行過程中的JS代碼執行是否異常

前端監控重要嗎

一個web系統后端產生的數據大部分都要傳輸到用戶瀏覽器端進行展現,如果我們僅僅關心后端系統生產數據過程的健壯性,顯然是不夠的,末端用戶是否真正順利的使用了我們的前端服務,同樣非常重要。
假設我們在開發過程中遇到以下業務場景:
* 如果用戶打開web頁面速度每慢1s,用戶跳失率可能增加10%+?
* 用戶是否會因為cdn某一個關鍵資源加載失敗而導致頁面白屏?
* 某一個API異步調用返回大量的未登錄錯誤占比,是否是因為我們登錄入口隱藏太深?交互流程不合理?
* 發布一個新版本后,突然爆發大量JS Error我們是否知道?

面對這些場景,如果沒有前端監控,我們的web系統就相當于在線上裸奔,將會帶來大量的未知運行狀態,而定位線上用戶偶現的前端問題,也基本上會變得不太可能。

前端監控現狀

image | center

雖然前端監控很重要,不過根據云棲社區《2017中國開發者調查報告》發現,目前使用過前端監控系統的開發者占比不到50%,這個比例放到后端開發領域是無法想象的。報告數據表明,開發者沒有使用過前端監控最主要原因是對前端監控的重視程度不足,認為服務端監控對前端監控具備替代效應,但是顯然這個想法存在很大誤區。
正如之前介紹前后端監控差異提到的點,前端監控領域中的頁面訪問速度和JS Error后端監控完全無法取代。雖然對于API的調用情況,后端也能拿到詳細的HTTP狀態碼和返回結果分布,但是后端只能統計到一次請求的RT時間,對于一次請求中的其他時間消耗,諸如請求等待時間、DNS時間、TCP時間等全鏈路的耗時時間卻無法得知,對于API調用的監控只能說具備部分可替代性。
從這個角度來講,大家務必更加重視前端監控。隨時關注我們用戶在瀏覽器端的運行狀態,這樣我們才能知道用戶在打開我們頁面的時候到底是快還是慢,慢是因為什么原因導致;我們任何重大新版本的發布也不再提心吊膽是否有未被測試覆蓋到的JS Error發生,用戶端的一切運行狀態也將變得更加透明。

業界前端監控產品對比

國內開發者對前端監控不重視的另外一個重要,也跟國內前端監控市場尚不成熟有關,前端監控產品在國內尚缺乏真正的獨角獸,導致很多開發者沒有使用過甚至沒有聽說過前端監控。目前國內的使用較多的APM產品僅有聽云、云智慧、OneAPM,而國外市場則成熟很多,既包含傳統的APM廠商如Microsoft、Oracle、Dynatrace,也包含新興的云監控服務如Amazon CloudWatch、NewRelic等,還包括獨自在前端監控領域耕耘的Sentry、RollBar、RayGun、Bugsnag、Airbrake、SessionStack等,相對來說,國外APM的市場已經很成熟,對前端監控的認可度也非常高。
接下來,我們將對比下國內外主流APM廠商提供的前端監控在核心功能上的差異。

寫在最后

寫到這里,給大家推薦下阿里云業務實時監控服務之前端監控(下文簡稱阿里云前端監控),經過阿里內部海量業務多年精細打磨沉淀,如今已通過阿里云正式對外開放服務。目前限時免費中!小流量場景永久免費!!?歡迎體驗!

云retcode

阿里云前端監控的主要特點有:
* 通過頁面訪問速度、頁面運行穩定性、后端API調用成功率三叉戟組合定義應用前端健康度
* 既支持優雅的靜默搜集,也支持開放底層統計能力的自定義上報
* 海量日志處理能力,秒級時效性
* 支持按地域、設備、網絡多維度查看用戶體驗數據
* 前端異常事件實時報警
* 從數據層到API層的開放服務(計劃中)
* 前后端一體化全鏈路監控(計劃中)

如何接入阿里云前端監控

僅需2步,即可完成現有前端系統的接入,讓你對自己的前端系統運行狀態一覽無遺。

Step 1:在阿里云前端監控控制臺新建應用

登錄 ARMS 控制臺,在左側菜單欄選擇前端監控;點擊新建應用站點,在彈出的對話框中填寫站點名稱后確認
image | center

Step 2:在前端應用公共模板中新增上報代碼

image | center


附:阿里云業務實時監控服務(ARMS)產品體系介紹

訂閱我們
体彩20选5开奖结果查询