Application Real-Time Monitoring Service:SDK メソッド

本トピックのメソッド

• データレポート API ： api() | error() | sum() | avg() | reportBehavior() | performance()

• メソッド API ： setConfig() | setPage() | setCommonInfo() | addBehavior()

api()

api() は、ページ上の API 呼び出しの成功率をレポートします。

デフォルトでは、SDK はページ上の AJAX リクエストを監視し、この API を呼び出してデータをレポートします。ページが JSONP やクライアント SDK などの他のカスタムメソッドを使用してデータをリクエストする場合、api() メソッドを呼び出してデータを手動でレポートしてください。

api() の構文：

__bl.api(api, success, time, code, msg, begin, traceId, sid)

または

__bl.api({api: xxx, success: xxx, time: xxx, code: xx, msg: xx, begin: xx, traceId: xx, sid: xx})

api() の例：

var begin = Date.now(),
    url = '/data/getTodoList.json',
    traceId = window.__bl && __bl.getTraceId('EagleEye-TraceID'),
    sid = window.__bl && __bl.getSessionId('EagleEye-SessionID');
// リクエストヘッダーに EagleEye-TraceID と EagleEye-SessionID を含めます。
fetch(url, {
    headers: {
        'EagleEye-TraceID': traceId,
        'EagleEye-SessionID': sid
    }
}).then(function (result) {
    var time = Date.now() - begin;
    // 成功した API 呼び出しをレポートします。
    window.__bl && __bl.api(url, true, time, result.code, result.msg, begin, traceId, sid);
    // 何らかの処理...
}).catch(function (error) {
    var time = Date.now() - begin;
    // 失敗した API 呼び出しをレポートします。
    window.__bl && __bl.api(url, false, time, 'ERROR', error.message, begin, traceId, sid);
    // 何らかの処理...
});

[トップに戻る]

error()

error() メソッドを呼び出して、監視対象ページ上の JS エラーまたは例外を報告します。詳細は、ブラウザ監視の [JS エラー診断] ページで確認できます。

一般的に、 SDK はページ上のグローバルエラーをリッスンし、このメソッドを呼び出して例外を報告します。しかし、ブラウザの同一オリジンポリシーにより、エラーの詳細は通常取得できません。この場合、このようなエラーは手動で報告する必要があります。

error() の構文：

__bl.error(error, pos)

error() の例 1：ページ上の JS エラーのリッスンと報告

window.addEventListener('error', function (ex) {
    // イベント引数には通常、場所情報が含まれます。
    window.__bl && __bl.error(ex.error, ex);
});

error() の例 2：カスタムエラーメッセージの報告

window.__bl && __bl.error(new Error('A custom error occurred'), {
    filename: 'app.js', 
    lineno: 10, 
    colno: 15
});

error() の例 3：カスタムタイプのエラーメッセージの報告

__bl.error({name:'CustomErrorLog',message:'this is an error'}, {
    filename: 'app.js', 
    lineno: 10, 
    colno: 15
});

[トップに戻る]

sum()

sum() メソッドを使用して、カスタム統計をレポートします。このメソッドは通常、ビジネスイベントの発生回数をカウントするために使用します。sum() メソッドでレポートしたデータは、[カスタム統計] ページで確認できます。

• カスタムイベントのトレンドチャート

• イベントのページビュー (PV) とユニークビジター (UV)

• ディメンション分布情報

sum() の構文：

__bl.sum(key, value)

sum() の例：

__bl.sum('event-a');
__bl.sum('event-b', 3);

[トップに戻る]

avg()

avg() メソッドを使用して、カスタムデータをレポートします。このメソッドは通常、特定のビジネスイベントの発生回数または値の平均を計算するために使用されます。avg() でレポートされたデータは、[カスタム統計] ページで確認できます。

• カスタムイベントのトレンドチャート

• イベントの PV と UV

• ディメンション分布情報

avg() の構文は次のとおりです。

__bl.avg(key, value)

avg() の例は次のとおりです。

__bl.avg('event-a', 1);
__bl.avg('event-b', 3);

[トップに戻る]

reportBehavior()

reportBehavior() を呼び出して、現在のビヘイビアキューを直ちにレポートします。

このメソッドを手動で呼び出さない場合、JS エラーが発生すると、現在のビヘイビアキューが自動的にレポートされます。キューの最大サイズは 100 です。キューに 100 件を超えるビヘイビアレコードが含まれる場合、ビヘイビアレコードはキューの先頭から破棄されます。

reportBehavior() の構文：

__bl.reportBehavior()

reportBehavior() メソッドは、パラメーターを受け取りません。

[トップに戻る]

addBehavior()

addBehavior() メソッドを呼び出して、現在の行動キューにカスタムユーザー行動を追加します。

SDK は、最大 100 エントリのユーザー行動キューを維持します。addBehavior() メソッドを呼び出して、キューにカスタムユーザー行動を追加できます。JS エラーが発生すると、SDK は現在の行動キューを報告してクリアします。

ユーザー行動トレースバックは、[JS エラー診断]ページで確認できます。手順については、「ユーザー行動トレースバックを使用した JS エラーの診断」をご参照ください。

addBehavior() の構文:

__bl.addBehavior(behavior)

addBehavior() の例:

__bl.addBehavior({
  data:{name:'string',message:'string'},
  page:'string'
})

[トップに戻る]

performance()

ページの onLoad イベント後に performance() メソッドを呼び出して、デフォルトのパフォーマンスメトリクスに加えてカスタムパフォーマンスメトリクスをレポートします。

performance() メソッドを使用するには、次の手順を実行してください：

1. autoSendPerf パラメーターを false にセットし、パフォーマンスメトリクスの自動レポートを無効にして、手動でレポートできるようにします。

2. __bl.performance(Object) メソッドを呼び出して、カスタムパフォーマンスメトリクスを手動でレポートします。この呼び出しにより、カスタムパフォーマンスメトリクスと、SDK によって収集されたデフォルトのパフォーマンスメトリクスの両方が送信されます。

performance() の例 1 ： CDN を使用する場合。

window.onload = () => {
 setTimeout(()=>{
  __bl.performance({cfpt:100, ctti:200, t1:300, …});
 }, 1000); // 手動でレポートする前にすべてのデフォルトのパフォーマンスメトリクスが収集されるように、遅延を設けます。
};

performance() の例 2 ： npm パッケージを使用する場合。

const BrowserLogger = require('@arms/js-sdk');
const __bl = BrowserLogger.singleton({pid:'Your unique site ID'});
window.onload = () => {
 setTimeout(()=>{
  __bl.performance({cfpt:100, ctti:200, t1:300, …});
 }, 1000);// 手動でレポートする前にすべてのデフォルトのパフォーマンスメトリクスが収集されるように、遅延を設けます。
};

• cfpt ： カスタム初回ペイント時間

• ctti ： 初回カスタムインタラクト時間

• t1 ～ t10 ： 10 個のカスタムパフォーマンスメトリクス

[トップに戻る]

setConfig()

SDK の初期化後に setConfig() を呼び出して、特定の設定項目を変更します。詳細については、「SDK リファレンス」をご参照ください。

setConfig() の構文：

__bl.setConfig(next)

[トップに戻る]

setPage()

setPage() を使用してページ名をリセットすると、デフォルトで新しい PV レポートがトリガーされます。このメソッドは通常、シングルページアプリケーション (SPA) で使用します。詳細については、「SPA のページデータレポート」をご参照ください。

setPage() の構文：

__bl.setPage(page, sendPv)

setPage() の例：

// ページ名を現在の URL ハッシュに設定し、新しい PV をレポートします。
__bl.setPage(location.hash);

// ページ名を 'homepage' に設定しますが、新しい PV はレポートしません。
__bl.setPage('homepage', false);

[トップに戻る]

setCommonInfo()

setCommonInfo() を使用して共通フィールドを設定します。

setCommonInfo() の構文は次のとおりです。

__bl.setCommonInfo(obj)

setCommonInfo() メソッドは、パラメーターとしてオブジェクトを受け取ります。

__bl.setCommonInfo({
  name: 'xxx',
  common: 'xxx'
});

[トップに戻る]

複数インスタンスの作成

複数のインスタンスを作成するには、@arms/js-sdk npm パッケージを使用します。

Web ページ

• 例：

  const BrowserLogger = require('@arms/js-sdk');
  const bl2 = BrowserLogger.createExtraInstance(props); // createExtraInstance メソッドでインスタンスを作成します。
  bl2.custom({
    key: 'biz',
    msg: 'msg info'
  });

  説明

  props パラメーターは Object 型です。props パラメーターに含まれるパラメーターは、SDK 設定のパラメーターと基本的に同じです。

• 新しいインスタンスはカスタム情報のみを報告します。

  var props = {
    pid: 'xxxx', // 新しいインスタンスがデータを報告する先のサイト ID。
    region: 'cn',
    page: '',
    uid: ''
  }

Weex ページ

• 例：

  const WeexLogger = require('@arms/js-sdk/weex');
  const wl2 = WeexLogger.createExtraInstance(props); // createExtraInstance メソッドでインスタンスを作成します。
  wl2.custom({
    key: 'biz',
    msg: 'msg info'
  });

  説明

  props パラメーターは Object 型です。props パラメーターに含まれるパラメーターは、SDK 設定のパラメーターと基本的に同じです。

• 新しいインスタンスはカスタム情報のみを報告します。

  var props = {
    pid: 'xxxx', // 新しいインスタンスがデータを報告する先のサイト ID。
    region: 'cn',
    sendRequest: function(data, imgUrl) {
      // GET リクエストでログを送信するメソッド。
    },
    postRequest: function(data, imgUrl) {
      // POST リクエストでログを送信するメソッド。
    }
  }

ミニプログラム

import MiniProgramLogger from '@arms/js-sdk/miniapp'; // DingTalk や Alipay など、ミニプログラムのタイプに合ったパスを選択します。
const MiniInstance = MiniProgramLogger.createExtraInstance({
  pid: 'xxxinstance',
  uid: 'userxxx', // UV データを収集するためのユーザー ID。
  region: 'cn', // ログの報告先リージョン。値を `cn` (中国) または `sg` (Singapore) に設定します。指定しない場合、デフォルトは `cn` です。
  // 基本的なミニプログラム監視では、リモートプロシージャコール (RPC) メソッドを手動で渡す必要があります。ビジネス要件に基づいてメソッドを実装してください。
  sendRequest: (url, resData) => {
    // データを送信するメソッド。
  }
});