Application Real-Time Monitoring Service:ブラウザ監視 SDK の設定

初期化の例

このスニペットは、必須の pid と 3 つのオプションパラメーター (enableSPA、sendResource、release) を使用してエージェントをインストールします。

<script>
!(function(c,b,d,a){c[a]||(c[a]={});c[a].config={
  pid: "<your-pid>",
  enableSPA: true,
  sendResource: true,
  release: "1.0.0"
};
with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
})(window,document,"https://retcode.alicdn.com/retcode/bl.js","__bl");
</script>

setConfig によるランタイム更新

ページのロード後に設定を変更するには、__bl.setConfig(next) を呼び出します。

__bl.setConfig({
    uid: "user-12345",
    tag: "checkout-flow"
});

アイデンティティ

ページと URL

SPA サポート

データフィルタリング

サンプリング

パフォーマンスとリソースの追跡

トレースと診断

アプリケーションのメタデータ

カスタムフィールド

pid

一意のプロジェクト ID で、ARMS がサイトを作成する際に自動的に生成されます。

uid

個人ユーザーの検索と追跡のためのユーザー識別子です。カスタム値を指定するか、SDK に自動的に生成させることができます。

__bl.setConfig({
    uid: "user-12345"
});

setUsername

ユーザー名文字列を返すコールバックです。設定すると、エンドツーエンドのセッション追跡と、トラブルシューティングのためのユーザー名によるセッション検索が可能になります。

__bl.setConfig({
    setUsername: function () {
        return "username_xxx";
    }
});

動作：

• ページのロード時にユーザー名が利用できない場合は、プレースホルダーではなく null を返します。SDK はログ送信時に再度 setUsername を呼び出します。プレースホルダーを返すと、その値が使用され、setUsername は再度呼び出されません。

• setUsername は、ランタイムごとに 1 つの割り当てのみを受け付けます。再割り当てするには、アプリケーションを再起動してください。

page

自動検出されたページ名をカスタム値でオーバーライドします。

tag

すべてのログエントリに付加されるカスタムタグです。ARMS コンソールでログを分類またはフィルタリングするためにタグを使用します。

ignoreUrlCase

true に設定すると、ページ URL のマッチングで大文字と小文字が区別されません。

urlHelper

動的セグメントを削除してページ URL を正規化し、類似のページが 1 つのエントリに集約されるようにします。非推奨の ignoreUrlPath パラメーターを置き換えます。

URL を正規化する理由：example.com/projects/123456 のような URL は、プロジェクト ID ごとに一意のページ名を生成します。urlHelper は動的セグメントを削除するため、すべてのプロジェクトページが example.com/projects/** として集約されます。

デフォルト値：

[
    // 2〜20文字の数字シーケンスを ** に置き換える
    {rule: /\/([a-z\-_]+)?\d{2,20}/g, target: '/$1**'},
    // 末尾のスラッシュを削除する
    /\/$/
]

サポートされている値の型：

apiHelper

urlHelper がページ URL を正規化するのと同じ方法で、動的セグメントを削除して API URL を正規化します。非推奨の ignoreApiPath パラメーターを置き換えます。

API データでのクエリパラメーターの報告：クエリパラメーター (例：https://arms.console.aliyun.com/apm?pid=fr6fbgbeot の pid) を含めるには、ignore パラメーターで自動報告を無効にし、api() を手動で呼び出します。詳細については、「api()」をご参照ください。

enableSPA

hashchange イベントをリッスンし、各ルート変更時に新しいページビュー (PV) を報告します。シングルページアプリケーション (SPA) ではこれを有効にしてください。

parseHash

enableSPA と一緒に使用します。enableSPA が true で hashchange イベントが発生すると、parseHash は URL ハッシュを Page フィールドのページ名に変換します。詳細については、「SPA のページデータ報告」をご参照ください。

デフォルト値：

function (hash) {
    var page = hash ? hash.replace(/^#/, '').replace(/\?.*$/, '') : '';
    return page || '[index]';
}

通常、デフォルトで十分です。ハッシュをカスタムページ名にマッピングするには、この関数をオーバーライドします。

var PAGE_MAP = {
    '/': 'Homepage',
    '/contact': 'Contact us',
    '/list': 'Data list'
};

window.addEventListener('load', function (e) {
    __bl.setConfig({
        parseHash: function (hash) {
            var key = hash.replace(/\?.*$/, '');
            return PAGE_MAP[key] || 'Unknown page';
        }
    });
});

ignore

指定されたルールに一致する URL、API、JavaScript エラー、またはリソースエラーのログ報告を抑制します。4 つのサブプロパティが含まれています。

各サブプロパティは、String、RegExp、Function、またはこれらの型の配列を受け付けます。

__bl.setConfig({
    ignore: {
        ignoreUrls: [
            'http://host1/',                     // 完全な文字列一致
            /.+?host2.+/,                        // 正規表現一致
            function(str) {                      // カスタム関数
                if (str && str.indexOf('host3') >= 0) {
                    return true;   // 抑制
                }
                return false;      // 報告
            }
        ]
    }
});

__bl.setConfig({
    ignore: {
        ignoreApis: [
            'api1', 'api2', 'api3',              // 文字列一致
            /^random/,                            // 正規表現一致
            function(str) {                       // カスタム関数
                if (str && str.indexOf('api3') >= 0) return true;
                return false;
            }
        ]
    }
});

__bl.setConfig({
    ignore: {
        ignoreErrors: [
            'test error',                         // 文字列一致
            /^Script error\.?$/,                  // 正規表現一致
            function(str) {                       // カスタム関数
                if (str && str.indexOf('Unknown error') >= 0) return true;
                return false;
            }
        ]
    }
});

__bl.setConfig({
    ignore: {
        ignoreResErrors: [
            'http://xx/picture.jpg',              // 文字列一致
            /jpg$/,                               // 正規表現一致
            function(str) {                       // カスタム関数
                if (str && str.indexOf('xx.jpg') >= 0) return true;
                return false;
            }
        ]
    }
});

parseResponse

自動報告中に API 応答データを解析します。応答オブジェクトから msg と code を抽出します。

デフォルト値：

function (res) {
    if (!res || typeof res !== 'object') return {};
    var code = res.code;
    var msg = res.msg || res.message || res.subMsg || res.errorMsg || res.ret || res.errorResponse || '';
    if (typeof msg === 'object') {
        code = code || msg.code;
        msg = msg.msg || msg.message || msg.info || msg.ret || JSON.stringify(msg);
    }
    return {msg: msg, code: code, success: true};
}

API 応答が異なる構造を使用している場合は、この関数をオーバーライドしてください。

sample

パフォーマンスログと成功した API ログのサンプリングレートを制御します。サンプリングレート = 1 / sample です。

サンプリングはデータ量と収集のオーバーヘッドを削減します。コストを削減するために、ignore パラメーターを使用して、監視が不要なデータの報告を停止することもできます。詳細については、「ignore」をご参照ください。

ARMS は処理中にサンプリングを補正するため、JS エラー率や API 失敗率などの集約メトリックは正確なままです。ただし、個々のログの詳細は失われる可能性があります。

影響を受けるメトリックの詳細については、「統計メトリック」をご参照ください。

pvSample

ページビュー (PV) ログのサンプリングレートを制御します。sample と同じ数式です：サンプリングレート = 1 / pvSample。

ARMS は処理中にサンプリングを補正するため、JS エラー率などの集約メトリックは正確なままです。

sendResource

true に設定すると、load イベントでページにロードされたすべての静的リソースを報告します。セッショントレースのウォーターフォール図を使用して、ページのロードが遅い原因となっているリソースを特定します。

<script>
!(function(c,b,d,a){c[a]||(c[a]={});c[a].config={pid:"<your-pid>",sendResource:true};
with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
})(window,document,"https://retcode.alicdn.com/retcode/bl.js","__bl");
</script>

useFmp

ファーストスクリーンレンダリング分析のために、First Meaningful Paint (FMP) データ収集を有効にします。

autoSendPerf

パフォーマンスログを自動的に送信するかどうかを制御します。

disableHook

AJAX リクエストリスナーを無効にします。デフォルトでは、SDK は API の成功率を報告するために AJAX 呼び出しをインターセプトします。

enableLinkTrace

フロントからバックへのトレースを有効にし、ブラウザリクエストをサーバー側のトレースと関連付けます。詳細については、「フロントからバックへのトレース機能を使用して API エラーを診断する」をご参照ください。

behavior

エラーに至るまでの一連のユーザーアクションを記録し、トラブルシューティングを支援します。

release

アプリケーションのバージョン文字列です。これを設定して、異なるリリース間でモニタリングデータを比較します。

environment

デプロイ環境ラベルです。有効な値：

disabled

true に設定すると、すべてのログ報告が無効になります。

c1, c2, c3

すべてのログエントリに付加される 3 つのカスタムフィールドです。ユーザーの VIP レベル、A/B テストグループ、機能フラグなど、ビジネス固有のデータを保持します。

__bl.setConfig({
    c1: "premium",
    c2: "experiment-group-B",
    c3: "feature-darkmode"
});