Application Real-Time Monitoring Service:Monitorar mini programas do WeChat

// 1. Copy https://retcode.alicdn.com/retcode/wl.js into /utils/wxLogger.js

// 2. Create /utils/monitor.js
import WXLogger from './wxLogger.js';
const Monitor = WXLogger.init({
    pid: '<your-pid>',       // From the ARMS console
    region: 'cn',            // cn: Chinese mainland | sg: nearest to Singapore
});
export default Monitor;

// 3. In app.js, hook the app lifecycle
import Monitor from '/utils/monitor';
App(Monitor.hookApp({
    onError(err) { console.log('onError:', err); },
    onLaunch() {},
    onShow() {},
    onHide() {}
}));

// 4. In each page.js, hook the page lifecycle
import Monitor from '/utils/monitor';
Page(Monitor.hookPage({
    data: {},
    onShow() {},
    onHide() {},
    onUnload() {}
}));

Baixar o SDK

1. Crie um arquivo wxLogger.js na pasta /utils do seu projeto de mini programa.

2. Copie o conteúdo do arquivo JS do SDK para wxLogger.js.

Inicializar o SDK

Crie um arquivo monitor.js na pasta /utils e adicione o código de inicialização.

CommonJS (require):

const WXLogger = require('./wxLogger.js');
const Monitor = WXLogger.init({
    pid: '<your-pid>',       // Project ID from the ARMS console
    region: 'cn',            // cn: Chinese mainland | sg: nearest to Singapore
});
export default Monitor;

Módulo ES (import):

import WXLogger from './wxLogger.js';
const Monitor = WXLogger.init({
    pid: '<your-pid>',       // Project ID from the ARMS console
    region: 'cn',            // cn: Chinese mainland | sg: nearest to Singapore
});
export default Monitor;

Substitua <your-pid> pelo ID exclusivo do projeto encontrado no console do ARMS. O ARMS gera esse ID automaticamente ao criar um site.

Para obter a lista completa de parâmetros de inicialização, consulte Parâmetros do SDK.

Fazer hook do ciclo de vida do aplicativo

Em app.js, envolva a configuração do seu App com Monitor.hookApp(options) para capturar logs de erros automaticamente.

import Monitor from '/utils/monitor';

App(Monitor.hookApp({
    onError(err) {
        console.log('Trigger onError:', err);
    },
    onLaunch() {
        console.log('Trigger onLaunch');
    },
    onShow(options) {
    },
    onHide() {
    }
}));

Fazer hook dos ciclos de vida da página

Em cada page.js, envolva a configuração da sua Page com Monitor.hookPage(options) para relatar chamadas de API, visualizações de página e dados de integridade automaticamente.

import Monitor from '/utils/monitor';
// hookPage starts lifecycle-based instrumentation automatically.
Page(Monitor.hookPage({
    data: {},
    onLoad(query) {
    },
    onReady() {
        // The page is loaded.
    },
    onShow() {
    },
    onHide() {
    },
    onUnload() {
    }
}));

Requisitos dos métodos de ciclo de vida

Esses métodos de ciclo de vida devem estar presentes no seu código para que a instrumentação funcione.

Relatar resultados de API manualmente

Para ter controle total sobre os relatórios de API:

1. Defina disableHook como true na configuração do SDK para impedir o relatório automático de logs de wx.request.

2. Chame api() para relatar resultados de API conforme necessário.

Rastrear manualmente sem hooks automáticos

Para lidar com todos os relatórios manualmente em vez de usar hookApp e hookPage:

1. Omita hookApp em app.js e hookPage em page.js.

2. Relate visualizações de página chamando pageShow() no método onShow de cada Page:

   Importante

   Não chame pageShow() junto com hookPage(). Isso causa logs de PV duplicados.

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

3. Relate dados de integridade (incluindo tempo de navegação) chamando pageHide() nos métodos onHide e onUnload:

   Importante

   Não chame pageHide() junto com hookPage(). Isso causa logs de integridade duplicados.

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