New Relic機能監控（三）瀏覽器端監控
2018-05-02
琅琊墨客本系列文章基於公司運用New Relic的履歷，鑒於國內較少有這方面的文章，因而把我工作中相識到的學問分享給人人，願望可以給須要的朋儕帶來協助。
New Relic Browser簡介
New Relic Browser是一款前端機能監控東西。這一範疇的監控又經常被稱為‘實在用戶監控’（Real User Monitoring, RUM).它重要用來搜檢前端頁面的加載時候，以權衡實在用戶的運用體驗。然則，browser能做到的遠不止云云，它還能供應以下監控數據：
- 自力的會話機能
- AJAX要求
- Javascript毛病
別的，假如針對統一web順序同時運用了Browser和APM，New Relic可以將二者的數據關聯起來，使得針對每一次的用戶要求，我們可以取得端到端的細緻數據包括：
- 前端斲喪的時候，包括頁面加載／剖析／襯着的細緻時候。
- 服務端消耗的時候，包括收集通訊時候和背景服務器處置懲罰要求的時候。假如背景運用了數據庫，New Relic在APM端還可以剖析出消費在數據庫操縱的時候。
- 用戶的地理位置信息。
- 瀏覽器的範例和版本，以及用戶的操縱系統範例。
裝置體式格局
New Relic Browser經過過程一小段Javascript代碼（或許也可以稱之為‘agent’）來收集頁面在瀏覽器端的種種機能數據，到達監控的目標。其有以下幾種裝置體式格局：
- 運用APM自動注入。假如你的運用運用了New Relic APM監控，那末你運用APM agent將會自動的注入這段javascript代碼段到你的前端頁面。這是最簡樸的一種裝置體式格局。注重，假如你的網站有經過過程CDN的靜態內容，不會經過服務端歷程，那末這類體式格局就失效了。
- 手動將代碼片斷植入到你的頁面。這類體式格局更加天真，能給你更多控制力。比方上面提到的來自CDN的靜態頁面。
機能概覽
下圖為一個Browser監控的App的機能概覽頁面:
該頁面重要包括下面幾個部份的內容：
- 頁面加載時候曲線
- Apdex得分圖
- 各瀏覽器的吞吐量
- 會話追蹤，JS毛病，以及Ajax相應時候。這部份功用僅針對專業版用戶開放。
頁面加載時候曲線
該曲線運用差別的色彩辨別了一個用戶要求斲喪在差別部份的時候：
- 最下面為後端服務器處置懲罰時候（紫色部份）。這部份時候是斲喪在服務端順序的時候，是由APM統計得來。
- 在其上棕色部份為收集時候。該部份時候為用戶要求在收集上的傳輸時候。注重，假如不是運用APM自動注入的Browser javascript，那末這部份時候將包括服務端順序處置懲罰時候。
- 要求守候處置懲罰的時候。
- DOM剖析時候（黃色部份）。瀏覽器取得頁面數據，剖析成DOM樹的時候。
- 頁面襯着時候（藍色部份）。瀏覽器從DOM樹繪製出用戶看到的頁面所斲喪的時候。
Apdex曲線
Apdex曲線是網站機能得分的曲線。關於有APM監控的順序，該圖同時也會显示出服務端歷程的Apdex得分。
吞吐量
吞吐量是按瀏覽器的範例繪製的，單元是每分鐘瀏覽量（ppm, pages per minute)。
頁面加載時候線
經過過程與APM集成，New Relic的頁面加載時候剖析可以紀錄一個要求在處置懲罰過程當中的各個階段所消費的時候。下面是一個典範的頁面加載時候線：
其重要的階段以下：
- 頁面加載時候從用戶提議一個要求最先，包括用戶在瀏覽器地點欄輸入地點最先接見，用戶在頁面上點擊一個鏈接，或許提交一個表單。
- 用戶的要求逾越收集，到達服務器，最先被服務端歷程處置懲罰。
- 服務端歷程完成對要求的處置懲罰，併發送一個HTML相應。該相應一樣要逾越收集，回到瀏覽器端。
- 瀏覽器收到HTML相應，最先剖析以構建DOM樹。
- DOM樹構建完成，瀏覽器將發送DOM停當事宜，而且依據此樹最先舉行頁面襯着。
- 頁面襯着完成，瀏覽器發出window load事宜。
由此，我們可以把時候分紅幾個部份：
- 前端時候 = DOM剖析時候 + 頁面襯着時候
- 收集傳輸時候 = 要求到達服務器時候 + 相應返回瀏覽器時候
- 服務端處置懲罰要求的時候
頁面接見統計
頁面接見統計是用來匯總網站的頁面接見量。New Relic用URL來辨別差別的頁面。
在這個頁面上，可以挑選三種差別的排序體式格局：總的頁面加載時候，均勻頁面加載時候，吞吐量。
關於每一個要求，右邊的圖表細緻的列出了每一個階段消費的時候，和一段時候內的吞吐量。
還可以檢察汗青機能數據。關於APM監控的服務端歷程，還可以同時給出該要求對應的後端事件的機能數據。
基於瀏覽器範例的統計
New Relic還可以統計用戶的瀏覽器範例，協助你相識差別瀏覽器在你的用戶中的現實運用情況。
針對某一感興趣的瀏覽器範例，New Relic還可以給出細緻的基於版本的統計：
基於地理信息的統計
基於用戶的地理信息的接見統計也是New Relic的一個特徵。它可以細緻的給出差別位置的用戶對網站的接見體驗，協助我們發現有題目的地區，以便能細緻的研討緣由，使得我們可以有針對性的舉行優化。
