Web アプリケーションを RUM に統合する - - Alibaba Cloud ドキュメントセンター

Application Real-Time Monitoring Service (ARMS) の Real User Monitoring (RUM) サブサービスは、JavaScript または npm パッケージを使用して Web アプリケーションと HTML5 アプリケーションを監視し、パフォーマンスメトリックを収集し、例外を追跡します。これにより、アプリケーションのユーザーエクスペリエンスを向上させることができます。

重要

RUM は、2024 年 6 月 24 日午前 0 時 0 分 0 秒 (UTC+8) から商用利用が可能です。詳細については、「課金」をご参照ください。テクニカルサポートを受けるには、DingTalk グループチャット (ID: 67370002064) に参加してください。

アプリを追加する

ARMS コンソールにログオンします。
左側のナビゲーションウィンドウで、[real User Monitoring] > [アプリケーションリスト] を選択します。上部のナビゲーションバーで、リージョンを選択します。
[アプリケーション] ページで、[アプリケーションの追加] をクリックします。
[アプリケーションの作成] パネルで、[web & H5] をクリックします。
[web & H5] パネルで、アプリケーション名と説明を入力し、[作成] をクリックします。
説明
名前は一意である必要があります。
次に、STEP2 セクションで、モニタリングデータがレポートされるアドレス（エンドポイント）とアプリケーション ID（pid）が自動的に生成されます。
手順 2 セクションで、メソッドを選択し、OpenRUM SDK をインストールします。
CDN を使用した同期読み込み
次のコードをコピーし、HTML ページの <body> の最初の行に貼り付けます。
説明
次のコードの pid パラメーターと endpoint パラメーターをアドレスとアプリケーション ID に置き換えます。
```
<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 パラメーターをアドレスとアプリケーション ID に置き換えます。
```
<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 パラメーターをアドレスとアプリケーション ID に置き換えます。
```
import ArmsRum from '@arms/rum-browser';
ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint"
});
```
使用上の注意:
- 非同期読み込み: 非ブロッキング読み込みとも呼ばれます。 JavaScript の読み込みが完了したかどうかに関係なく、ブラウザは後続のページの処理を続けます。ページのパフォーマンスを重視する場合は、この方法を使用することをお勧めします。
  重要
  非同期読み込みを使用する場合、OpenRUM SDK が初期化される前に、ARMS は JavaScript エラーまたはリソース読み込みエラーをキャプチャできません。
- 同期読み込み: ブロッキング読み込みとも呼ばれます。 JavaScript の読み込みが完了するまで、ブラウザは後続のページの処理を続行しません。 JavaScript エラーとリソース読み込みエラーを継続的にキャプチャする必要がある場合は、同期読み込みを使用することをお勧めします。
- npm パッケージ: npm パッケージを使用すると、ページに読み込まれるスクリプトの数を減らし、トラフィックフローを制御し、RUM を後続の処理用の個別のモジュールとして選択できます。
CDN を使用して読み込む場合は、グローバル名前空間 RumSDK.default を使用して SDK モニタリングインスタンスにアクセスします。
```
const ArmsRum = window.RumSDK.default;
// RUM SDK にアクセスする前に、SDK が読み込まれていることを確認してください。
// SDK の読み込み前に __Rum 設定が指定されていない場合は、初期化を実行します。
ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
});
// 次の設定は、CDN メソッドと npm メソッドで同じです。
ArmsRum.setConfig('env', 'pre');
```

参照

ARMS 用 RUM SDK は、ビジネス要件を満たすために、さまざまなカスタム構成を提供します。詳細については、「Web および HTML5 用 RUM SDK のサンプル構成」をご参照ください。

アプリを追加する

CDN を使用した同期読み込み

CDN を使用した非同期読み込み

npm パッケージ

参照