CDN を使用して Web アプリケーションに ARMS ブラウザ監視エージェントをインストールする方法 - Application Real-Time Monitoring Service

コンテンツデリバリーネットワーク (CDN) 経由で ARMS ブラウザ監視エージェントをインストールして、Web アプリケーションを監視します。

ブラウザ監視エージェントのインストール

にログインします。 ARMSコンソールを使用します。
左側のナビゲーションペインで、フロントエンドモニタリング > フロントエンドリスト を選択します。上部メニューで、リージョンを選択します。
フロントエンドリスト ページで、右上隅にある Create Application Site をクリックします。
アクセスセンター パネルの フロントエンド、モバイル、ユーザーアプリケーション セクションで、[Web & H5] をクリックします。
[Integrate Web & H5] パネルで、アプリの作成 セクションにカスタムアプリケーション名を入力します。
[Integrate Web & H5] パネルの [SDK Extension Configuration] セクションで目的のオプションを選択し、エージェントコードを生成します。
- API 自動報告を無効にする：このオプションを選択した場合、手動で__bl.api() メソッドを呼び出して API の成功率を報告する必要があります。
- SPA 自動解析の起動：このオプションを選択すると、ARMS はhashchange イベントをリッスンし、自動的にページビューを報告します。これはシングルページアプリケーション (SPA) に適しています。
- ファーストビューの FMP 取集を有効にする：このオプションを選択すると、ARMS は First Meaningful Paint (FMP) データを収集します。
- ページのリソース報告を有効にする：このオプションを選択すると、エージェントは onload イベント発生時に、ページの静的リソースを報告します。
- アプリケーションモニタリングとの関連付け：このオプションを選択すると、API リクエストがバックエンドのアプリケーションモニタリングと関連付けられ、フロントエンドからバックエンドまでのトレースが可能になります。
- ユーザー行動のバックトラッキングを有効にする：このオプションを選択すると、ユーザー行動のバックトラッキングが有効になり、JavaScript エラーの診断に役立ちます。
- コンソール追跡の有効化：このオプションを選択すると、ユーザー行動のバックトラッキングはerror、warn、log、info を含むコンソールの内容をトレースします。
  
  重要
  この機能はコンソールパスに影響します。

次のいずれかの方法を選択して、ブラウザ監視エージェントをインストールします。

非同期読み込み: 提供されたコードをコピーし、ページの HTML の <body> 要素内の最初の行として貼り付けます。次に、アプリケーションを再起動します。[Asynchronous loading] タブを選択し、提供されたコードをコピーして、ページの HTML の <body> コンテンツの最初の行として貼り付けます。

次のコードは、完全な HTML の例を示しています：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />
    <title>ARMS</title>
  </head>
  <body>
    <script>
      !(function (c, b, d, a) {
        c[a] || (c[a] = {})
        c[a].config = {
          pid: 'xxx',
          appType: 'web',
          imgUrl: 'https://arms-retcode.aliyuncs.com/r.png?',
          sendResource: true,
          enableLinkTrace: true,
          behavior: true,
          useFmp: true,
          enableSPA: true,
        }
        with (b) with (body) with (insertBefore(createElement('script'), firstChild)) setAttribute('crossorigin', '', (src = d))
      })(window, document, 'https://sdk.rum.aliyuncs.com/v1/bl.js', '__bl')
    </script>
    <div id="app"></div>
  </body>
</html>

同期読み込み: コードをコピーし、ページの<body> タグ内の最初の要素として貼り付けます。その後、アプリケーションを再起動します。

npm パッケージ：

次のコマンドを実行して npm パッケージをインストールします。
```
npm install alife-logger --save
```

コンソールから次の初期化コマンドをコピーして実行します。

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});

非同期読み込みと同期読み込みの違い

非同期読み込み：非ブロッキング読み込みとも呼ばれます。ブラウザはページレンダリングをブロックすることなく、エージェントの JavaScript ファイルをダウンロードして実行します。ページのパフォーマンスを最優先する場合に推奨されます。

重要
非同期の性質上、ARMS は監視 SDK の読み込みと初期化が完了する前に発生した JavaScript エラーやリソース読み込みエラーをキャプチャできません。
同期読み込み：ブロッキング読み込みとも呼ばれます。ブラウザは、エージェントの JavaScript ファイルが完全に読み込まれて実行されるまで、ページレンダリングを一時停止します。ページライフサイクル全体ですべての JavaScript エラーとリソース読み込みエラーをキャプチャする必要がある場合に推奨されます。

カスタム UID の設定

SDK は、ユニークビジター (UV) やその他のメトリクスをカウントするために、ユーザー ID (UID) を自動的に生成します。自動生成された UID はユーザーを区別しますが、ビジネスコンテキストがありません。カスタム UID を使用するには、コードのconfig オブジェクトに以下を追加します：

uid: "xxx" // この値はユーザーを識別します。ビジネスロジックに基づいて設定してください。

例：

<script>
!(function(c,b,d,a){c[a]||(c[a]={});c[a].config={pid:"xxx", appType: 'web', imgUrl:"https://arms-retcode.aliyuncs.com/r.png?", uid: "xxxx"};
with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
})(window,document,"https://sdk.rum.aliyuncs.com/v1/bl.js","__bl");
</script>

重要

「SDK 拡張機能の設定」セクションでオプションを変更すると、コードが変更されます。新しいコードを必ずコピーして貼り付けてください。

一般的な SDK パラメーター

次の表に、一般的な SDK 設定パラメーターを示します。

パラメーター	タイプ	説明	必須	デフォルト
pid	String	プロジェクトの一意のID。サイトを作成するときにARMSによって自動的に生成されます。	はい	なし
uid	String	ユーザーの ID。値は、ユーザの識別子であり、ユーザを検索するために使用することができる。カスタム値を指定できます。このパラメーターを指定しない場合、SDKは6か月ごとに自動的に生成および更新されます。	いいえ	SDKによって自動的に生成される
tag	String	inputタグ。各ログにはタグが付いています。	いいえ	なし
release	String	アプリケーションのバージョン。このパラメーターを設定して、異なるバージョンのレポート情報を表示することを推奨します。	いいえ	`undefined`
environment	String	環境フィールド。有効な値: prod、gray、pre、daily、local。値prodはオンライン環境を示します。グレーの値は、段階的リリース環境を示します。値preは、ステージング環境を示す。値dailyは、毎日の環境を示します。値localは、ローカル環境を示す。	いいえ	`prod`
sample	Integer	ログサンプリング設定。値は1から100までの整数です。パフォーマンスログと成功APIログは、`1 /サンプル`の比率でサンプリングされます。パフォーマンスログと成功APIログのメトリックの詳細については、「統計メトリック」をご参照ください。	いいえ	`1`
behavior	Boolean	トラブルシューティングを簡単にするために、エラーを報告するユーザーの行動を記録するかどうかを指定します。	いいえ	`true`
enableSPA	Boolean	ページでhashchangeイベントを聞いて、PVをもう一度報告してください。これは、単一ページのアプリケーションシナリオに適用できます。	いいえ	`false`
enableLinkTrace	Boolean	バックツーバックトレース分析の詳細については、「フロントツーバックトレース機能を使用したAPIエラーの診断」をご参照ください。	いいえ	`false`

SDK 設定パラメーターの完全なリストについては、「SDK リファレンス」をご参照ください。