別再讓你的web頁面在使用者瀏覽器端裸奔

發表於2018-04-11

全文約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)產品體系介紹

相關文章