Application Real-Time Monitoring Service：前端介面說明

本頁索引

• 資料上報類介面：api() | error() | sum() | avg() | reportBehavior() | performance()|

• 方法類介面：setConfig() | setPage() | setCommonInfo() | addBehavior()

api()

調用api()介面來上報頁面的API調用成功率。

SDK預設會監聽頁面的AJAX請求並調用此介面上報。 如果頁面的資料請求方式是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');
// 備忘：請求的header部分請加入EagleEye-TraceID、EagleEye-SessionID
fetch(url, {
    headers: {
        'EagleEye-TraceID': traceId,
        'EagleEye-SessionID': sid
    }
}).then(function (result) {
    var time = Date.now() - begin;
    // 上報介面調用成功
    window.__bl && __bl.api(url, true, time, result.code, result.msg, begin, traceId, sid);
    // do something ....
}).catch(function (error) {
    var time = Date.now() - begin;
    // 上報介面調用失敗
    window.__bl && __bl.api(url, false, time, 'ERROR', error.message, begin, traceId, sid);
    // do something ...
});    

[回到頂部]

error()

調用error()介面來上報頁面中的JS錯誤或使用者想關注的異常。您可以在前端監控的JS錯誤診斷頁面查詢相關資訊。

一般情況下，SDK會監聽頁面全域的Error並調用此介面上報異常資訊，但由於瀏覽器的同源策略往往無法擷取錯誤的具體資訊，此時就需要使用者手動上報。

__bl.error(error, pos)

window.addEventListener('error', function (ex) {
    // 一般事件的參數中會包含pos資訊。
    window.__bl && __bl.error(ex.error, ex);
});            

window.__bl && __bl.error(new Error('發生了一個自訂的錯誤'), {
    filename: 'app.js', 
    lineno: 10, 
    colno: 15
});            

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

[回到頂部]

sum()

sum()文法：

__bl.sum(key, value)

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

[回到頂部]

avg()

__bl.avg(key, value)

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

[回到頂部]

reportBehavior()

調用reportBehavior()介面即刻上報當前行為隊列。

若不手動調用此介面，發生JS Error會自動觸發上報當前行為隊列，最大為100條，若超出100條，隊列頭的行為將被捨棄。

reportBehavior()文法：

__bl.reportBehavior()

reportBehavior()調用參數：無請求參數。

[回到頂部]

performance()

在頁面onLoad之後調用performance()介面來上報除預設效能指標外的自訂效能指標。

performance()使用方法：

1. 將SDK配置項autoSendPerf設定為false，從而關閉自動上報效能指標，並等待手動觸發上報。

2. 調用__bl.performance(Object)方法來手動上報自訂指標，此過程中也會自動上報預設效能指標。

performance()使用樣本1（以CDN方式接入時）：

window.onload = () => {
 setTimeout(()=>{
  __bl.performance({cfpt:100, ctti:200, t1:300, …});
 }, 1000); //設定一定的延時，確保預設效能資料採集完成。
};

performance()使用樣本2（以npm包方式接入時）：

const BrowserLogger = require('alife-logger');
const __bl = BrowserLogger.singleton({pid:'網站唯一ID'});
window.onload = () => {
 setTimeout(()=>{
  __bl.performance({cfpt:100, ctti:200, t1:300, …});
 }, 1000);//設定一定的延時，確保預設效能資料採集完成。
};

[回到頂部]

setConfig()

在SDK初始完成後調用setConfig()介面來重新修改部分配置項，關於SDK配置項的詳細資料，請參見SDK配置項。

setConfig()文法：

__bl.setConfig(next)

[回到頂部]

setPage()

調用setPage()介面來重新設定頁面的page name（預設會觸發重新上報PV）。此介面一般用於單頁面應用，更多資訊，請參見SPA頁面上報。

setPage()文法：

__bl.setPage(page, sendPv)

// 設定當前頁面的page name為當前的URL hash，並重新上報PV
__bl.setPage(location.hash);

// 僅設定當前頁面的page為'homepage'，但不觸發PV上報
__bl.setPage('homepage', false);          

[回到頂部]

setCommonInfo()

調用setCommonInfo()用於設定公用欄位。

setCommonInfo()文法：

__bl.setCommonInfo(obj)

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

[回到頂部]

addBehavior()

調用addBehavior()介面在當前行為隊列末尾添加一條自訂使用者行為。

SDK維護一條最大長度為100條的使用者行為隊列，調用addBehavior()介面可在當前行為隊列末尾添加一條自訂使用者行為，當發生JS error時上報當前的行為隊列，並將隊列清空。

您可以在JS錯誤診斷頁面查看使用者行為回溯，具體操作，請參見使用使用者行為回溯診斷JS錯誤。

addBehavior()文法：

__bl.addBehavior(behavior)

addBehavior()使用樣本：

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

[回到頂部]

建立多執行個體方法

建立多執行個體請使用NPM包方式，現在正式版NPM包發行，NPM包：alife-logger 。

Web頁面

• 使用方法：

  const BrowerLogger = require('alife-logger');
  const bl2 = BrowerLogger.createExtraInstance(props); // 通過createExtraInstance 建立執行個體
  bl2.custom({
    key: 'biz',
    msg: 'msg info'
  });

  說明

  其中props為Object，具體的參數與SDK的config基本保持一致。

• 如果新執行個體只上報自訂資訊：

  var props = {
    pid: 'xxxx', //新執行個體需要上報的網站
    region: 'cn',
    page: '',
    uid: ''
  }

Weex頁面

• 使用方法：

  const WeexLogger = require('alife-logger/weex');
  const wl2 = WeexLogger.createExtraInstance(props); // 通過createExtraInstance 建立執行個體
  wl2.custom({
    key: 'biz',
    msg: 'msg info'
  });

  說明

  其中props為Object，具體的參數與SDK的config基本保持一致。

• 如果新執行個體只上報自訂資訊：

  var props = {
    pid: 'xxxx', //新執行個體需要上報的網站
    region: 'cn',
    sendRequest: function(data, imgUrl) {
      // 發送Get日誌方案
    },
    postRequest: function(data, imgUrl) {
      // 發送POST日誌方案
    }
  }

小程式頁面

import MiniProgramLogger from 'alife-logger/miniprogram'; // 具體路徑是根據DingTalk小程式、支付寶小程式及其他類小程式來選擇對應的路徑。
const MiniInstance = MiniProgramLogger.createExtraInstance({
  pid: 'xxxinstance',
  uid: 'userxxx', // 用來設定使用者uid，統計UV資訊。
  region: 'cn', // region為cn、sg分別表示是日誌上報到中國伺服器、還是新加坡伺服器，如不配置預設是中國伺服器。
  // 基礎小程式監控需要手動傳入rpc(方法實現按照實際業務來寫)。
  sendRequest: (url, resData) => {
    // 發送方法。
  }
});