Web アプリを ARMS のリアルユーザーモニタリングに接続 - Application Real-Time Monitoring Service

ARMS リアルユーザーモニタリング for Web & H5 は、ブラウザページおよびモバイルアプリ内の H5 ページをモニタリングします。JavaScript (JS) スクリプトまたは npm パッケージから軽量エージェントをインストールしてパフォーマンスメトリックを収集し、エラーを追跡することで、サイトのユーザーエクスペリエンスを向上させることができます。

重要

RUM は、2024年6月24日 00:00:00 (UTC+8) より商用利用が可能になりました。料金詳細については、「課金」をご参照ください。テクニカルサポートについては、DingTalk グループ (ID: 67370002064) にご参加ください。

アプリの作成

にログインします。 ARMSコンソールを使用します。
左側のナビゲーションペインで、[リアルユーザーモニタリング] > > アプリケーションリストを選択し、上部のメニューバーで対象リージョンを選択します。
アプリケーションリスト ページで、アプリケーションの追加 をクリックします。
アプリの作成パネルで、[Web & H5] をクリックします。
[Web & H5 アプリケーションの追加] パネルで、アプリ名と説明を入力し、作成をクリックします。

説明
アプリ名は一意である必要があります。

アプリが作成されると、[STEP 2] セクションにエンドポイントアドレスが表示されます。
[STEP 2] セクションで、インストール方法を選択し、エージェント SDK をインストールします。
CDN 非同期ロード

次のコードをコピーし、HTML ページの <body> タグ内の先頭に貼り付けます。

説明
次のコードの your endpoint を、アプリ用に生成されたエンドポイントアドレスに置き換えてください。
```
<script>
  !(function(c,b,d,a){c[a]||(c[a]={});c[a]={
    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>
```
CDN 同期ロード

次のコードをコピーし、HTML ページの <body> タグ内の先頭に貼り付けます。

説明
次のコードの your endpoint を、アプリ用に生成されたエンドポイントアドレスに置き換えてください。
```
<script>
  window.__rum = {
    endpoint: "your endpoint"
  };
</script>
<script type="text/javascript" src="https://sdk.rum.aliyuncs.com/v2/browser-sdk.js" crossorigin></script>
```
npm パッケージ
1. npm パッケージをインストールします。
```
npm install @arms/rum-browser --save
```
2. アプリを初期化します。
  
  説明
  次のコードの your endpoint を、アプリ用に生成されたエンドポイントアドレスに置き換えてください。
```
import armsRum from '@arms/rum-browser';
armsRum.init({
  endpoint: "your endpoint"
});
```
重要
SDK バージョン 0.1.x 以降、エンドポイントに必要なパラメーターが含まれているため、PID を渡す必要はありません。最新の SDK とエンドポイントを使用してください。
以下に、各インストール方法について説明します。
- 非同期ロード：ノンブロッキングロードとも呼ばれます。ブラウザーは JS スクリプトのダウンロード中にページの処理を続行します。ページのパフォーマンスを最優先する場合に推奨します。
  
  重要
  非同期ロードでは、ARMS はエージェント SDK がロードされ初期化される前に発生した JS エラーやリソース読み込みエラーをキャプチャできません。
- 同期ロード：ブロッキングロードとも呼ばれます。ブラウザーは、ページの残りを処理する前に JS スクリプトがロードされるのを待ちます。ページが開いた瞬間からすべての JS エラーとリソース読み込みエラーをキャプチャする必要がある場合に推奨します。
- npm パッケージ：ページ上の外部スクリプトのロードを削減し、CDN 配信を管理し、リアルユーザーモニタリングを別のモジュールとして処理できます。
CDN から SDK をロードする場合、グローバル名前空間 RumSDK.default を使用して SDK の監視インスタンスにアクセスします。
```
const armsRum = window.RumSDK.default;
// RumSDK にアクセスする前に、SDK がロードされていることを確認してください。
// SDK がロードされる前に __rum 設定が定義されていない場合は、ここで初期化できます。
armsRum.init({
  endpoint: "your endpoint",
});
// これ以降の使い方は、npm と CDN のどちらのインストール方法でも同じです。
armsRum.setConfig('env', 'pre');
```

Application Real-Time Monitoring Service:Web・H5 アプリの接続

アプリの作成

CDN 非同期ロード

CDN 同期ロード

npm パッケージ

関連ドキュメント