Application Real-Time Monitoring Service:Monitor WeChat mini programs

Download the SDK

1. Create a wxLogger.js file in the /utils folder of your mini program project.

2. Copy the content of the SDK JS file into wxLogger.js.

Initialize the SDK

Create a monitor.js file in the /utils folder and add the initialization code.

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;

ES module (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;

Replace <your-pid> with the project unique ID found in the ARMS console. ARMS automatically generates this ID when it creates a site.

For a full list of initialization parameters, see SDK parameters.

Hook the app lifecycle

In app.js, wrap your App configuration with Monitor.hookApp(options) to capture error logs automatically.

import Monitor from '/utils/monitor';

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

Hook page lifecycles

In each page.js, wrap your Page configuration with Monitor.hookPage(options) to report API calls, page views, and health data automatically.

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() {
    }
}));

Lifecycle method requirements

These lifecycle methods must be present in your code for instrumentation to work.

Report API results manually

For full control over API reporting:

1. Set disableHook to true in the SDK configuration to prevent automatic wx.request log reporting.

2. Call api() to report API results as needed.

Track manually without automatic hooks

To handle all reporting manually instead of using hookApp and hookPage:

1. Skip hookApp in app.js and hookPage in page.js.

2. Report page views by calling pageShow() in the onShow method of each Page:

   Important

   Do not call pageShow() together with hookPage(). This causes duplicate PV logs.

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

3. Report health data (including browsing time) by calling pageHide() in the onHide and onUnload methods:

   Important

   Do not call pageHide() together with hookPage(). This causes duplicate health logs.

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