Application Real-Time Monitoring Service:Surveiller d'autres types de mini-programmes

Utilisation de base

La configuration de base comprend trois étapes : l'installation et l'initialisation du package npm, la transmission des journaux et la configuration des noms de domaine sécurisés.

1. Installez et initialisez le package npm.

   1. Dans votre projet de mini-programme, installez le package npm @arms/js-sdk pour activer la surveillance.

      npm install @arms/js-sdk

   2. Ajoutez le code suivant à un fichier monitor.js dans votre répertoire /utils afin d'initialiser le SDK.

      Remarque

      Vous pouvez personnaliser le nom et l'emplacement du fichier JavaScript (JS).

      import MiniProgramLogger from '@arms/js-sdk/miniapp';
      const Monitor = MiniProgramLogger.init({
          pid: 'xxx',
          uid: 'userxxx', // Set the user ID, which is used for UV statistics.
          region: 'cn', // Specify the region where the application is deployed. Set this parameter to 'cn' for the Chinese mainland or 'sg' for regions outside the Chinese mainland. The default value is 'cn'.
          // For basic mini program monitoring, you must manually provide the RPC function. 
          // Implement the function based on your business logic. The following example shows how to make a call in a DingTalk E-App.
          sendRequest: (url, resData) => {
                // You must configure this part. It supports both GET and POST reporting.
              // Demo in DingTalk
              var method = 'GET';
              var data;
              if (resData) {
                  method = 'POST';
                  data = JSON.stringify(resData);
              }
              dd.httpRequest({
                  url: url,
                  method: method,
                  data: data,
                  fail: function (error) {
                      //...
                  }
              });
          },
           // Manually provide a function to get the current page path. 
           // Implement the function based on your business logic. The following example shows how to make a call in a DingTalk E-App.
           getCurrentPage: () => {
                // You must configure this part.
              if (typeof getCurrentPages !== 'undefined' && typeof getCurrentPages === 'function') {
                  var pages = (getCurrentPages() || []);
                  var pageLength = pages.length;
                  var currPage = pages[pageLength - 1];
                  return (currPage && currPage.route) || null;
              }
           }
      });
      
      export default Monitor;

      Remarque

      Pour plus d'informations sur les paramètres, consultez la section Paramètres du SDK.

2. Transmettez les journaux.

   1. Dans le fichier app.js, utilisez l'une des méthodes suivantes pour transmettre les journaux :

      • Utilisez la méthode Monitor.hookApp(options) pour capturer automatiquement les journaux d'erreurs. Le paramètre options correspond à l'objet de configuration original de votre application.

        import Monitor from '/utils/monitor';
        
            App(Monitor.hookApp({
              onError(err) {
                console.log('Entering onError:', err);
              },
              onLaunch() {
                console.log('Entering onLaunch');
              },
        
              onShow(options) {
              },
              onHide() {
              }
            }));                

      • Utilisez la méthode Monitor.error(err) pour transmettre manuellement les journaux d'erreurs.

        import Monitor from '/utils/monitor';
        
            App({
              onError(err) {
                  Monitor.error(err);
                console.log('Entering onError:', err);
              },
              onLaunch() {
                console.log('Entering onLaunch');
              },
        
              onShow(options) {
              },
              onHide() {
              }
            });

   2. Dans le fichier JS d'une page, utilisez l'une des méthodes suivantes pour transmettre les journaux :

      • Utilisez la méthode Monitor.hookPage(options) pour transmettre automatiquement les données de pages vues (PV) et de santé.

        Remarque

        Cette méthode ne transmet pas automatiquement les requêtes API.

        import Monitor from '/utils/monitor';
        
            Page(Monitor.hookPage({
               data: {},
                onLoad(query) {
                },
                onReady() {
                    // The page has finished loading.
                },
                onShow() {
        
                },
                onLoad(query) {
        
                },
                onHide() {
        
                },
                onUnload() {
        
                },
                onTitleClick() {
                    /**
                     * Report custom instrumentation data.
                     * @desc
                     */
                    Monitor.sum('titleClick');
                }       
            }));

      • Appelez les méthodes API pour transmettre manuellement les données.

        Remarque

        Pour plus d'informations sur les méthodes API, consultez la section Méthodes API.

        import Monitor from './util/monitor';
        
            Page({
               data: {},
                onShow() {
                    Monitor.pageShow();
                },
                onHide() {
                    Monitor.pageHide();
                },
                onUnload() {
                    Monitor.pageHide();
                },
                onTitleClick() {
                    /**
                     * Report custom instrumentation data.
                     * @desc
                     */
                    Monitor.sum('titleClick');
                }       
            });

3. Configurez les noms de domaine sécurisés.

   • Si vous définissez le paramètre region sur cn, ajoutez https://arms-retcode.aliyuncs.com à votre liste de noms de domaine valides.

   • Si vous définissez le paramètre region sur sg, ajoutez https://arms-retcode-sg.aliyuncs.com à votre liste de noms de domaine valides.

Méthodes API

La plupart des API de transmission de journaux sont identiques à celles du SDK de surveillance de navigateur web. L'utilisation des autres API est décrite ci-dessous :

• Pour envoyer les données de pages vues (PV) de la page actuelle, appelez la méthode pageShow() dans la méthode de cycle de vie onShow de la Page.

  Remarque

  N'utilisez pas cette méthode conjointement avec la méthode hookPage(). Sinon, des journaux de pages vues en double seront transmis.

  import Monitor from '/util/monitor';
  Page({
      onShow: function() {
          Monitor.pageShow();
      }
  })

• Pour envoyer les données de santé de la page actuelle et mesurer le niveau de santé ainsi que le temps passé sur la page, appelez la méthode pageHide() dans les méthodes de cycle de vie onHide et onUnload de la Page.

  Remarque

  N'utilisez pas cette méthode conjointement avec la méthode hookPage(). Sinon, des journaux en double seront transmis.

  import Monitor from '/util/monitor';
    Page({
  
        onHide: function() {
            Monitor.pageHide();
        },
        onUnload: function() {
            Monitor.pageHide();
        }
        ... 
    })

Scénarios avancés

Si l'utilisation de base ne répond pas à vos besoins, examinez les scénarios avancés présentés dans cette section.

• Définition du paramètre uid (pour les statistiques UV)

  • Si l'identifiant utilisateur est disponible avant l'initialisation du SDK, vous pouvez définir directement le paramètre uid dans la configuration init.

  • Si l'identifiant utilisateur n'est pas disponible lors de l'initialisation, vous pouvez le récupérer avant l'événement onShow de l'application, puis définir le paramètre uid en appelant setCommonInfo({uid: 'xxx'}).

• Définition des informations communes pour le mini-programme

  Utilisez la méthode setCommonInfo pour définir les informations communes du mini-programme. La surveillance de navigateur ARMS analyse les champs suivants :

  • sr : résolution de l'écran

  • vp : fenêtre d'affichage

  • dpr : ratio de pixels de l'appareil

  • ul : langue du document

  • dr : référant du document

  • ct : type de connexion réseau (par exemple, Wi-Fi ou 3G)

    Avertissement

    Évitez de définir trop de champs via la méthode setCommonInfo. Le dépassement de la limite de longueur de la requête peut entraîner son échec.

Paramètres du SDK

La surveillance de navigateur ARMS fournit des paramètres SDK pour une configuration avancée. Le tableau suivant décrit les paramètres courants applicables à ce scénario.

Pour obtenir la liste complète des paramètres du SDK, consultez la section Configuration du SDK de surveillance de navigateur.