配置與使用Web前端效能監控功能-CDN-阿里雲

Web前端效能監控通過在網頁中引入監測代碼，實現對使用者訪問資料的即時監控，協助您瞭解頁面開啟速度、穩定性和外部服務調用成功率等網站效能。

適用情境

網站訪問遇到問題，無法確認是效能問題還是錯誤，無法定位。
網站有大量非同步資料調用，但效能和成功率未知，無法監控。
不同地區使用者訪問存在差異，需要監控並改進訪問品質差的地區。

前提條件

已開通ARMS，詳細操作，請參見開通ARMS。

說明

開通ARMS後會自動開通ARMS前端監控免費試用，您可以免費試用15天，試用結束後需開通基礎版或專家版才能繼續使用。

費用說明

Web前端效能監控是由阿里雲CDN聯合ARMS的能力實現，CDN不單獨收取功能費用，ARMS會收取前端監控服務費用。
開通ARMS前端監控免費試用後，您可以免費試用15天，每天有20000次資料上報的免費額度。額度用完後，服務將自動停止，次日恢複。
試用期結束後，您可以選擇開通ARMS前端監控基礎版或專家版，按量後付費，計費詳情，請參見計費概述。

操作步驟

建立Web前端效能監控任務
1. 登入CDN控制台。
2. 在左側導覽列，單擊應用中心。
3. 在應用中心頁面，單擊Web前端效能模組中去使用。
4. 在Web前端效能頁面，單擊建立任務，並完成以下配置。
  參數
  說明
  應用類型
  支援前端監控的情境，取值：
  Web & H5
  DingTalk小程式
  支付寶小程式
  微信小程式
  加速網域名稱
  需要監控的Web應用加速網域名稱。
5. 任務建立成功後，彈出如下提示框後，單擊立即配置，跳轉到ARMS前端監控應用設定頁面。
為Web應用安裝ARMS前端監控探針
為Web應用安裝ARMS前端監控探針的詳細操作，請參見安裝前端監控探針。
1. 在ARMS設定頁面的SDK擴充配置項地區，請根據您的網站情況選擇需要開啟的選項，產生待插入頁面的BI探針代碼。
2. 在複製/粘貼BI探針地區，選擇其中一種方法安裝前端監控探針。
  - 非同步載入或同步載入：複製提供的代碼並粘貼至頁面HTML中 <body>元素內部的第一行，然後重啟應用。
  - NPM包：
    1. 執行以下命令以引入npm包。
```
npm install alife-logger --save
```
    2. 從控制台上複製以下初始化命令並執行。
```
const BrowserLogger = require('alife-logger');
const __bl = BrowserLogger.singleton({pid:"b590lhguqs@8cc3f63543d****",appType:"web",imgUrl:"https://arms-retcode.aliyuncs.com/r.png?",sendResource:true,behavior:true,enableLinkTrace:true,enableConsole:true});
```

查看Web效能資料

在CDN控制台的Web前端效能頁面，單擊查看資料，跳轉到ARMS控制台前端監控總覽頁面。

查看資料

在ARMS控制台前端監控總覽頁面，您可以查看所有關鍵即時監控資料。瞭解更多，請參見控制台功能。

監控總覽

熱門資料欄位說明：

功能項	欄位說明
JS錯誤率	JS錯誤率：JavaScript出錯的比例。相比昨日均值：與昨日JavaScript平均錯誤率相比上升或下降的比例。統計圖：最近1小時的JavaScript錯誤率曲線。分頁錯誤率排行：JavaScript錯誤率排行。
最近24小時警示	警示數量：警示的數量。最近警示資訊：最近24小時來自前端監控警示的警示資訊。
PV/UV	今日PV：被監控應用的今日PV值。今日UV：被監控應用的今日UV值。同比昨日：與昨日PV/UV相比上升或下降的比例。統計圖：最近1小時的PV/UV曲線。統計表：PV/UV排名前5的地區及對應PV/UV值。高訪問量Top 5：訪問量最多的5個服務。
API請求成功率	API請求成功率：API請求成功的比例。相比昨日均值：與昨日API請求成功率相比上升或下降的比例。統計圖：最近1小時的API請求成功率曲線。 API成功率排行：API請求成功率排行。
訪問速度	訪問速度：首次渲染耗時，單位為毫秒（ms）。相比昨日均值：與昨日訪問速度均值相比上升或下降的比例。統計圖：最近1小時的訪問速度曲線。低訪問速度Top 5：訪問速度最低的5個服務。

設定前端效能警示

在CDN控制台的Web前端效能頁面，單擊設定前端效能警示，跳轉到ARMS控制台前端監控警示規則頁面。

設定前端效能警示

您可以選擇多維的警示指標，例如首次渲染時間、首屏時間、頁面、地區等，設定警示和提醒規則。當規則被觸發時，系統會以您指定的通知方式向警示連絡人或釘群發送警示資訊，以提醒您採取必要的措施。具體操作，請參見前端監控警示規則（新版）。