將Web應用接入ARMS使用者體驗監控 - Application Real-Time Monitoring Service

ARMS使用者體驗監控針對Web & H5主要監控瀏覽器頁面以及行動裝置 App中的H5頁面，通過頁面內嵌JS指令碼或NPM包的方式，採集應用網站運行過程中的效能指標，追蹤異常問題，協助您提升自身應用網站的使用者體驗。

重要

阿里雲使用者體驗監控於2024年06月24日00:00:00（UTC+8）起正式商用，計費詳情，請參見計費說明。如果您在使用中有任何問題，請聯絡使用者體驗監控答疑DingTalk群（群號：67370002064）擷取協助。

建立應用

登入ARMS控制台。
在左側導覽列選擇使用者體驗監 > 應用列表，並在頂部功能表列選擇目標地區。
在應用列表頁面單擊添加應用。
在建立應用面板單擊Web & H5。
在接入Web & H5面板輸入應用程式名稱和描述，然後單擊建立。
說明
應用程式名稱唯一，不能與已建立的應用程式名稱重複。
建立成功後，當前應用將會在STEP2地區自動產生對應的pid和endpoint地址。
在STEP2地區選擇安裝方式並安裝探針SDK。
CDN同步載入
複製下方代碼，並粘貼至HTML頁面<body>中的第一行。
說明
請將以下代碼中的pid和endpoint替換為當前應用對應的pid和endpoint地址。
```
<script>
  window.__rum = {
    pid: "your app id",
    endpoint: "your endpoint"
  };
</script>
<script type="text/javascript" src="https://sdk.rum.aliyuncs.com/v2/browser-sdk.js " crossorigin></script>
```
CDN非同步載入
複製下方代碼，並粘貼至HTML頁面<body>中的第一行。
說明
請將以下代碼中的pid和endpoint替換為當前應用對應的pid和endpoint地址。
```
<script>
  !(function(c,b,d,a){c[a]||(c[a]={});c[a]={
    pid: "your app id",
    endpoint: "your endpoint"
  };
  with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
  })(window, document, "https://sdk.rum.aliyuncs.com/v2/browser-sdk.js ", "__rum");
</script>
```
npm包
1. 引入npm包。
```
npm install @arms/rum-browser --save
```
2. 初始化應用。
  說明
  請將以下代碼中的pid和endpoint替換為當前應用對應的pid和endpoint地址。
```
import ArmsRum from '@arms/rum-browser';
ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint"
});
```
各安裝方式說明如下：
- 非同步載入：又稱為非阻塞載入，表示瀏覽器在下載執行JS之後還會繼續處理後續頁面。若對頁面效能的要求非常高，建議使用此方式。
  重要
  由於是非同步載入，ARMS無法捕捉到監控SDK載入初始化完成之前的JS錯誤和資源載入錯誤。
- 同步載入：又稱為阻塞載入，表示當前JS載入完畢後才會進行後續處理。如需捕捉從頁面開啟到關閉的整個過程中的JS錯誤和資源載入錯誤，建議使用此方式。
- npm包：使用npm包可以減少頁面中Script的載入個數，可以自行控制頁面Script的CDN業務方向，並可以將使用者體驗監控作為單獨模組進行後續處理。
使用CDN載入情況下，訪問 SDK 監控執行個體，請使用全域命名空間 RumSDK.default
```
const ArmsRum = window.RumSDK.default;
// 訪問 RumSDK 需確保SDK已經完成載入
// 如果SDK載入前沒有定義 __rum 配置，可在此初始化
ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
});
// 以下繼續使用，NPM 和 CDN 一致
ArmsRum.setConfig('env', 'pre');
```

Application Real-Time Monitoring Service：接入Web & H5應用

建立應用

CDN同步載入

CDN非同步載入

npm包

相關文檔