Application Real-Time Monitoring Service:Méthodes SDK

Méthodes abordées dans cette rubrique

• API de transmission des données : api() | error() | sum() | avg() | reportBehavior() | performance()

• Méthodes de configuration : setConfig() | setPage() | setCommonInfo() | addBehavior()

api()

Utilisez api() pour transmettre le taux de réussite des appels API sur une page.

Par défaut, le SDK surveille les requêtes AJAX sur la page et appelle cette API pour transmettre les données. Si votre page demande des données via JSONP ou d'autres méthodes personnalisées, telles qu'un SDK client, appelez la méthode api() pour transmettre les données manuellement.

Syntaxe de api() :

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

Ou

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

Exemple d'utilisation 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...
});

[[Retour en haut]](#sc_index)

error()

Appelez la méthode error() pour transmettre les erreurs ou exceptions JS sur les pages surveillées. Vous pouvez consulter les détails sur la page JS Error Diagnostics de Browser Monitoring.

Généralement, le SDK écoute les erreurs globales sur la page et appelle cette méthode pour transmettre les exceptions. Toutefois, les détails des erreurs sont souvent inaccessibles en raison de la politique d'origine identique du navigateur. Dans ce cas, vous devez transmettre ces erreurs manuellement.

Syntaxe de error() :

__bl.error(error, pos)

Exemple 1 d'utilisation de error() : écoutez et transmettez les erreurs JS sur la page.

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

Exemple 2 d'utilisation de error() : transmettez un message d'erreur personnalisé.

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

Exemple 3 d'utilisation de error() : transmettez un message d'erreur d'un type personnalisé.

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

[[Retour en haut]](#sc_index)

sum()

Utilisez la méthode sum() pour transmettre des statistiques personnalisées. Cette méthode sert généralement à compter les occurrences d'un événement métier. Vous pouvez consulter les données transmises par la méthode sum() sur la page Custom Statistics :

• Graphique de tendance des événements personnalisés

• Pages vues (PV) et visiteurs uniques (UV) d'un événement

• Informations sur la distribution des dimensions

Syntaxe de sum() :

__bl.sum(key, value)

Exemple d'utilisation de sum() :

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

[[Retour en haut]](#sc_index)

avg()

Utilisez la méthode avg() pour transmettre des données personnalisées. Cette méthode sert généralement à calculer le nombre moyen d'occurrences ou la valeur moyenne d'un événement métier spécifique. Vous pouvez consulter les données transmises par avg() sur la page Custom Statistics :

• Graphique de tendance des événements personnalisés

• PV et UV d'un événement

• Informations sur la distribution des dimensions

Syntaxe de avg() :

__bl.avg(key, value)

Exemple d'utilisation de avg() :

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

[[Retour en haut]](#sc_index)

reportBehavior()

Appelez reportBehavior() pour transmettre immédiatement la file d'attente de comportement actuelle.

Si vous n'appelez pas cette méthode manuellement, la file d'attente de comportement actuelle est automatiquement transmise lorsqu'une erreur JS se produit. La taille maximale d'une file d'attente est de 100. Si la file d'attente contient plus de 100 enregistrements de comportement, les enregistrements sont supprimés depuis le début de la file.

Syntaxe de reportBehavior() :

__bl.reportBehavior()

La méthode reportBehavior() n'accepte aucun paramètre.

[[Retour en haut]](#sc_index)

addBehavior()

Appelez la méthode addBehavior() pour ajouter un comportement utilisateur personnalisé à la file d'attente de comportement actuelle.

Le SDK maintient une file d'attente de comportements utilisateur d'une longueur maximale de 100 entrées. Vous pouvez appeler la méthode addBehavior() pour ajouter un comportement utilisateur personnalisé à la file. Lorsqu'une erreur JS se produit, le SDK transmet la file d'attente de comportement actuelle et la vide.

Vous pouvez consulter la trace des comportements utilisateur sur la page JS Error Diagnostics . Pour obtenir des instructions, consultez Utiliser la trace des comportements utilisateur pour diagnostiquer les erreurs JS.

Syntaxe de addBehavior() :

__bl.addBehavior(behavior)

Exemple d'utilisation de addBehavior() :

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

[[Retour en haut]](#sc_index)

performance()

Appelez la méthode performance() après l'événement onLoad de la page pour transmettre des métriques de performance personnalisées en plus des métriques de performance par défaut.

Pour utiliser la méthode performance() , procédez comme suit :

1. Définissez le paramètre autoSendPerf sur false pour désactiver la transmission automatique des métriques de performance et attendre la transmission manuelle.

2. Appelez la méthode __bl.performance(Object) pour transmettre manuellement des métriques personnalisées. Cet appel envoie à la fois vos métriques personnalisées et les métriques de performance par défaut collectées par le SDK.

Exemple 1 d'utilisation de performance() : avec 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.
};

Exemple 2 d'utilisation de performance() : avec un package 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 : temps de premier affichage personnalisé

• ctti : premier temps d'interaction personnalisé

• t1 à t10 : 10 métriques de performance personnalisées

[[Retour en haut]](#sc_index)

setConfig()

Appelez setConfig() après l'initialisation du SDK pour modifier certains éléments de configuration. Pour plus d'informations, consultez Référence SDK.

Syntaxe de setConfig() :

__bl.setConfig(next)

[[Retour en haut]](#sc_index)

setPage()

Utilisez setPage() pour réinitialiser le nom de la page, ce qui déclenche par défaut une nouvelle transmission PV. Cette méthode est généralement utilisée pour une application monopage (SPA). Pour plus d'informations, consultez Transmission des données de page des SPA.

Syntaxe de setPage() :

__bl.setPage(page, sendPv)

Exemple d'utilisation 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);

[[Retour en haut]](#sc_index)

setCommonInfo()

Utilisez setCommonInfo() pour définir des champs communs.

Syntaxe de setCommonInfo() :

__bl.setCommonInfo(obj)

La méthode setCommonInfo() accepte un paramètre d'objet :

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

[[Retour en haut]](#sc_index)

Créer plusieurs instances

Pour créer plusieurs instances, utilisez le package npm @arms/js-sdk .

Pages Web

• Exemple :

  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'
  });

  Remarque

  Le paramètre props est de type Object. Les paramètres contenus dans le paramètre props sont essentiellement les mêmes que ceux de la configuration du SDK.

• Les nouvelles instances transmettent uniquement des informations personnalisées :

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

Pages Weex

• Exemple :

  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'
  });

  Remarque

  Le paramètre props est de type Object. Les paramètres contenus dans le paramètre props sont essentiellement les mêmes que ceux de la configuration du SDK.

• Les nouvelles instances transmettent uniquement des informations personnalisées :

  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.
    }
  }

Mini-programmes

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.
  }
});