Web または HTML5 アプリケーションで本番環境のパフォーマンスの問題や JavaScript エラーが発生した場合、根本原因を診断するには、リアルユーザーセッションの可視性が必要です。Application Real-Time Monitoring Service (ARMS) の機能であるリアルユーザーモニタリング (RUM) は、JavaScript または npm パッケージを使用してパフォーマンスメトリクスを収集し、例外を追跡します。統合後、ユーザーベース全体でパフォーマンスボトルネックと例外をトレースできます。
RUM は 2024年6月24日 00:00:00 (UTC + 08:00) より商用提供を開始しました。詳細については、「課金」をご参照ください。テクニカルサポートを受けるには、DingTalk グループチャット (ID: 67370002064) にご参加ください。
クイックスタート
npm で SDK をインストールし、アプリケーションエントリーファイルで初期化すると、すぐにデータ収集を開始できます。
import ArmsRum from '@arms/rum-browser';
ArmsRum.init({
pid: "<your-app-id>", // ARMS コンソールからのアプリケーション ID
endpoint: "<your-endpoint>", // ARMS コンソールからのエンドポイント URL
});<your-app-id> と <your-endpoint> は、ARMS コンソールでアプリケーションを作成した後に生成される値に置き換えてください。詳細については、「ステップ 1: アプリケーションの作成」をご参照ください。
SDK パラメーターの全リストについては、「Web および HTML5 アプリケーションの SDK 構成リファレンス」をご参照ください。
統合ワークフロー
統合には 3 つのステップがあります。
[アプリケーションの作成] を ARMS コンソールで実行し、
pidおよびエンドポイントを取得します。CDN 非同期、CDN 同期、または npm のいずれかの方法を使用して [SDK をインストール] します。
モニタリングデータがコンソールに表示されることを [検証] します。
ステップ 1: アプリケーションの作成
ARMS コンソールにログインします。
左側のナビゲーションウィンドウで、[リアルユーザーモニタリング] > [アプリケーション一覧] を選択します。上部のナビゲーションバーで、リージョンを選択します。
「アプリケーション」ページで、「アプリケーションの追加」をクリックします。
[アプリケーションの作成] パネルで、[Web & H5] をクリックします。
[Web & H5] パネルで、アプリケーション名と説明を入力し、[作成] をクリックします。
説明アプリケーション名は一意である必要があります。
アプリケーションが作成されると、
endpoint(モニタリングデータがレポートされるアドレス) とpid(ご利用のアプリケーション ID) が STEP2 セクションに自動的に生成されます。STEP2 セクションで、インストール方法を選択し、OpenRUM SDK をインストールします。
ステップ 2: OpenRUM SDK のインストール
次のいずれかのインストール方法を選択します。
| 方法 | 最適な用途 | トレードオフ |
|---|---|---|
| CDN 非同期 (推奨) | 厳格なページロードパフォーマンス目標を持つアプリケーション | SDK のロードが完了する前に発生するエラーをキャプチャできません |
| CDN 同期 | ページ ロード時から完全なエラー カバー率が必要なアプリケーション | SDK がロードされるまでページレンダリングをブロックします |
| npm | ページスクリプトの削減とトラフィックフローの制御を必要とする最新のビルドツール設定 | ビルドステップが必要です |
CDN 非同期ロード
非同期 (ノンブロッキング) ロードは、ページレンダリングをブロックせずに SDK をダウンロードします。ページロード速度が最優先事項である場合は、この方法を使用してください。
非同期ロードでは、OpenRUM SDK が初期化される前に発生する JavaScript エラーやリソースロードエラーをキャプチャできません。
次のスニペットをコピーし、ご利用の HTML ページの <body> タグ内の最初の要素として貼り付けます。<your-app-id> と <your-endpoint> は、コンソールの STEP2 からの値に置き換えてください。
<script>
!(function(c,b,d,a){c[a]||(c[a]={});c[a]={
pid: "<your-app-id>", // ARMS コンソールからのアプリケーション ID
endpoint: "<your-endpoint>" // ARMS コンソールからのエンドポイント URL
};
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 同期ロード
同期 (ブロッキング) ロードは、他のスクリプトが実行される前に SDK が完全にロードされることを保証します。ページがロードを開始した瞬間からすべての JavaScript エラーとリソースロードエラーをキャプチャする必要がある場合は、この方法を使用してください。
次のスニペットをコピーし、ご利用の HTML ページの <body> タグ内の最初の要素として貼り付けます。<your-app-id> と <your-endpoint> は、コンソールの STEP2 からの値に置き換えてください。
<script>
window.__rum = {
pid: "<your-app-id>", // ARMS コンソールからのアプリケーション ID
endpoint: "<your-endpoint>" // ARMS コンソールからのエンドポイント URL
};
</script>
<script type="text/javascript" src="https://sdk.rum.aliyuncs.com/v2/browser-sdk.js" crossorigin></script>npm パッケージ
npm パッケージは、ページにロードされるスクリプトの数を減らし、トラフィックフローを制御し、RUM を個別のモジュールとして後続の処理のために選択するために使用できます。
パッケージをインストールします。
npm install @arms/rum-browser --saveご利用のアプリケーションエントリーファイルで SDK を初期化します。
<your-app-id>と<your-endpoint>は、コンソールの STEP2 からの値に置き換えてください。import ArmsRum from '@arms/rum-browser'; ArmsRum.init({ pid: "<your-app-id>", // ARMS コンソールからのアプリケーション ID endpoint: "<your-endpoint>", // ARMS コンソールからのエンドポイント URL });
CDN ロード後の SDK API へのアクセス
CDN ロード (非同期または同期) を使用する場合、RumSDK.default グローバル名前空間を介して SDK インスタンスにアクセスします。API は初期化後、npm メソッドと同じです。
const ArmsRum = window.RumSDK.default;
// SDK ロード前に __rum が構成されていなかった場合、手動で初期化します。
ArmsRum.init({
pid: "<your-app-id>",
endpoint: "<your-endpoint>",
});
// 追加の構成を設定します。この API は CDN と npm で同じです。
ArmsRum.setConfig('env', 'pre');ステップ 3: 統合の検証
SDK をインストールした後:
ブラウザでご利用のアプリケーションを開き、ページを操作して監視イベントを生成します。
ARMS コンソールにログインします。
左側のナビゲーションウィンドウで、[リアルユーザーモニタリング] > [アプリケーション一覧] を選択します。
ご利用のアプリケーションがリストに表示され、モニタリングデータがレポートされていることを確認します。
次のステップ
ビジネス要件を満たすように高度な SDK オプションを構成します。パラメーターの全リストについては、「Web および HTML5 アプリケーションの SDK 構成リファレンス」をご参照ください。