前端接口说明

本页索引

• 数据上报类接口：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'; // 具体路径是根据钉钉小程序、支付宝小程序及其他类小程序来选择对应的路径。
const MiniInstance = MiniProgramLogger.createExtraInstance({
  pid: 'xxxinstance',
  uid: 'userxxx', // 用来设置用户uid，统计UV信息。
  region: 'cn', // region为cn、sg分别表示是日志上报到中国服务器、还是新加坡服务器，如不配置默认是中国服务器。
  // 基础小程序监控需要手动传入rpc(方法实现按照实际业务来写)。
  sendRequest: (url, resData) => {
    // 发送方法。
  }
});