Application Real-Time Monitoring Service:Métodos del SDK

Métodos en este tema

• API de reporte de datos: api() | error() | sum() | avg() | reportBehavior() | performance()

• API de métodos: setConfig() | setPage() | setCommonInfo() | addBehavior()

api()

Utilice api() para reportar la tasa de éxito de las llamadas a API en una página.

De forma predeterminada, el SDK monitorea las solicitudes AJAX en la página y llama a esta API para reportar los datos. Si su página solicita datos mediante JSONP u otros métodos personalizados, como un SDK de cliente, llame al método api() para reportar los datos manualmente.

Sintaxis de api():

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

O bien

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

Ejemplo de api():

var begin = Date.now(),
    url = '/data/getTodoList.json',
    traceId = window.__bl && __bl.getTraceId('EagleEye-TraceID'),
    sid = window.__bl && __bl.getSessionId('EagleEye-SessionID');
// Note: Include EagleEye-TraceID and EagleEye-SessionID in the request header.
fetch(url, {
    headers: {
        'EagleEye-TraceID': traceId,
        'EagleEye-SessionID': sid
    }
}).then(function (result) {
    var time = Date.now() - begin;
    // Report a successful API call.
    window.__bl && __bl.api(url, true, time, result.code, result.msg, begin, traceId, sid);
    // do something...
}).catch(function (error) {
    var time = Date.now() - begin;
    // Report a failed API call.
    window.__bl && __bl.api(url, false, time, 'ERROR', error.message, begin, traceId, sid);
    // do something...
});

[[Back to Top]](#sc_index)

error()

Llame al método error() para reportar errores o excepciones de JS en las páginas monitoreadas. Puede consultar los detalles en la página JS Error Diagnostics de Browser Monitoring.

Por lo general, el SDK escucha los errores globales en la página y llama a este método para reportar excepciones. Sin embargo, los detalles del error suelen ser inaccesibles debido a la política de mismo origen del navegador. En este caso, debe reportar dichos errores manualmente.

Sintaxis de error():

__bl.error(error, pos)

Ejemplo 1 de error(): Escuchar y reportar errores de JS en la página.

window.addEventListener('error', function (ex) {
    // The event argument usually contains location information.
    window.__bl && __bl.error(ex.error, ex);
});

Ejemplo 2 de error(): Reportar un mensaje de error personalizado.

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

Ejemplo 3 de error(): Reportar un mensaje de error de un tipo personalizado.

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

[[Back to Top]](#sc_index)

sum()

Utilice el método sum() para reportar estadísticas personalizadas. Este método se usa normalmente para contar las ocurrencias de un evento de negocio. Puede consultar los datos reportados por el método sum() en la página Custom Statistics:

• Gráfico de tendencias de eventos personalizados

• Vistas de página (PV) y visitantes únicos (UV) de un evento

• Información de distribución por dimensiones

Sintaxis de sum():

__bl.sum(key, value)

Ejemplo de sum():

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

[[Back to Top]](#sc_index)

avg()

Utilice el método avg() para reportar datos personalizados. Este método se usa normalmente para calcular el promedio de ocurrencias o el valor de un evento de negocio específico. Puede consultar los datos reportados por avg() en la página Custom Statistics:

• Gráfico de tendencias de eventos personalizados

• PV y UV de un evento

• Información de distribución por dimensiones

Sintaxis de avg():

__bl.avg(key, value)

Ejemplo de avg():

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

[[Back to Top]](#sc_index)

reportBehavior()

Llame a reportBehavior() para reportar inmediatamente la cola de comportamiento actual.

Si no llama manualmente a este método, cuando ocurre un error de JS, la cola de comportamiento actual se reporta automáticamente. El tamaño máximo de una cola es 100. Si la cola contiene más de 100 registros de comportamiento, los registros se descartan desde el inicio de la cola.

Sintaxis de reportBehavior():

__bl.reportBehavior()

El método reportBehavior() no acepta ningún parámetro.

[[Back to Top]](#sc_index)

addBehavior()

Llame al método addBehavior() para agregar un comportamiento de usuario personalizado a la cola de comportamiento actual.

El SDK mantiene una cola de comportamiento de usuario con una longitud máxima de 100 entradas. Puede llamar al método addBehavior() para agregar un comportamiento de usuario personalizado a la cola. Cuando ocurre un error de JS, el SDK reporta la cola de comportamiento actual y la vacía.

Puede consultar el rastreo del comportamiento del usuario en la página JS Error Diagnostics. Para obtener instrucciones, consulte Use user behavior traceback to diagnose JS errors.

Sintaxis de addBehavior():

__bl.addBehavior(behavior)

Ejemplo de addBehavior():

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

[[Back to Top]](#sc_index)

performance()

Llame al método performance() después del evento onLoad de la página para reportar métricas de rendimiento personalizadas además de las métricas de rendimiento predeterminadas.

Para usar el método performance(), realice los siguientes pasos:

1. Establezca el parámetro autoSendPerf en false para deshabilitar el reporte automático de métricas de rendimiento y esperar el reporte manual.

2. Llame al método __bl.performance(Object) para reportar manualmente las métricas personalizadas. Esta llamada envía tanto sus métricas personalizadas como las métricas de rendimiento predeterminadas recopiladas por el SDK.

Ejemplo 1 de performance(): con un CDN.

window.onload = () => {
 setTimeout(()=>{
  __bl.performance({cfpt:100, ctti:200, t1:300, …});
 }, 1000); // Delay to ensure all default performance metrics are collected before manual reporting.
};

Ejemplo 2 de performance(): con un paquete 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);// Delay to ensure all default performance metrics are collected before manual reporting.
};

• cfpt: el tiempo personalizado de primera pintura

• ctti: el primer tiempo personalizado hasta la interacción

• t1 a t10: 10 métricas de rendimiento personalizadas

[[Back to Top]](#sc_index)

setConfig()

Llame a setConfig() después de la inicialización del SDK para modificar elementos de configuración específicos. Para obtener más información, consulte SDK reference.

Sintaxis de setConfig():

__bl.setConfig(next)

[[Back to Top]](#sc_index)

setPage()

Utilice setPage() para restablecer el nombre de la página, lo que de forma predeterminada desencadena un nuevo reporte de PV. Este método se usa normalmente para aplicaciones de una sola página (SPA). Para obtener más información, consulte Page data reporting of SPAs.

Sintaxis de setPage():

__bl.setPage(page, sendPv)

Ejemplo de setPage():

// Set the page name to the current URL hash and report a new PV.
__bl.setPage(location.hash);

// Set the page name to 'homepage' without reporting a new PV.
__bl.setPage('homepage', false);

[[Back to Top]](#sc_index)

setCommonInfo()

Utilice setCommonInfo() para establecer campos comunes.

Sintaxis de setCommonInfo():

__bl.setCommonInfo(obj)

El método setCommonInfo() acepta un parámetro de objeto:

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

[[Back to Top]](#sc_index)

Crear varias instancias

Para crear varias instancias, utilice el paquete npm @arms/js-sdk.

Páginas web

• Ejemplo:

  const BrowerLogger = require('@arms/js-sdk');
  const bl2 = BrowerLogger.createExtraInstance(props); // Create an instance using the createExtraInstance method.
  bl2.custom({
    key: 'biz',
    msg: 'msg info'
  });

  Nota

  El parámetro props es de tipo Object. Los parámetros contenidos en el parámetro props son básicamente los mismos que los de la configuración del SDK.

• Las nuevas instancias solo reportan información personalizada:

  var props = {
    pid: 'xxxx', // The site ID where the new instance reports data.
    region: 'cn',
    page: '',
    uid: ''
  }

Páginas Weex

• Ejemplo:

  const WeexLogger = require('@arms/js-sdk/weex');
  const wl2 = WeexLogger.createExtraInstance(props); // Create an instance using the createExtraInstance method.
  wl2.custom({
    key: 'biz',
    msg: 'msg info'
  });

  Nota

  El parámetro props es de tipo Object. Los parámetros contenidos en el parámetro props son básicamente los mismos que los de la configuración del SDK.

• Las nuevas instancias solo reportan información personalizada:

  var props = {
    pid: 'xxxx', // The site ID where the new instance reports data.
    region: 'cn',
    sendRequest: function(data, imgUrl) {
      // The method for sending logs using GET requests.
    },
    postRequest: function(data, imgUrl) {
      // The method for sending logs using POST requests.
    }
  }

Miniprogramas

import MiniProgramLogger from '@arms/js-sdk/miniapp'; // Select the path that matches your mini program type, such as a DingTalk mini program or an Alipay mini program.
const MiniInstance = MiniProgramLogger.createExtraInstance({
  pid: 'xxxinstance',
  uid: 'userxxx', // User ID for collecting UV data.
  region: 'cn', // The region where logs are reported. Set the value to `cn` for China or `sg` for Singapore. Defaults to `cn` if unspecified.
  // For basic mini program monitoring, you must manually pass the remote procedure call (RPC) method. Implement the method based on your business requirements.
  sendRequest: (url, resData) => {
    // The method for sending data.
  }
});