Cross‑Platform Mini Program Log Collection SDK: Design, Implementation, and Practice

Background : Mini programs (e.g., WeChat, Baidu, Alipay, ByteDance, 360) are lightweight applications that run without installation, boasting over 4.1 billion daily active users and deep penetration across 200+ industries. However, platform‑specific incompatibilities make debugging and performance analysis difficult.

Problem Statement : Developers face slow startup, white‑screen failures, insufficient error details (missing page path, system info, network state, user behavior), and a lack of unified logging standards across platforms.

Solution Overview : A multi‑platform log‑collection SDK that intercepts the three core modules of a mini program— App, Page and the platform macro ( wx, swan, tt, my, qq, qh)—to capture exception, normal, and performance logs and report them in a unified format.

Mini Program Architecture : The rendering layer uses a WebView, while the logic layer runs on JSCore/V8. Communication between the two layers passes through the native side, which also provides a convenient interception point for the SDK.

SDK Core Functions :

Data collection and reporting service.

Three log categories: exception logs (JS errors, API errors, resource download errors), normal logs (user actions, custom logs, routing info), and performance logs (first‑screen time, render time, PV/UV).

Each log includes common information such as system details, network status, and user context.

Multi‑Platform Compatibility : The SDK detects the current environment and stores it in a context variable.

public get context() {
    if (this._context) return this._context;
    if (typeof wx !== 'undefined') { this._context = wx; }
    if (typeof swan !== 'undefined') { this._context = swan; }
    if (typeof tt !== 'undefined') { this._context = tt; }
    if (typeof my !== 'undefined') { this._context = my; }
    if (typeof qq !== 'undefined') { this._context = qq; }
    if (typeof qh !== 'undefined') { this._context = qh; }
    return this._context;
}
// Usage example: ctx.getUserInfo()

Current Page Path Retrieval (handles platform differences, e.g., 360 uses $router.history):

public get currentPage() {
    if (this.appName === 'qh') { // 360 compatibility
        const { path } = $router.history.current;
        return path;
    }
    let pages = getCurrentPages();
    if (pages.length > 0) {
        return pages[pages.length - 1].route;
    } else {
        return this._indexPage;
    }
}

Exception Log Collection : Intercepts App.onError, App.onUnhandledRejection, App.onPageNotFound, and App.onMemoryWarning. Additionally, it wraps console.error to capture script, API, and Promise errors, normalizing stack traces across platforms.

Performance Log Collection : Hooks lifecycle callbacks ( onLaunch, onShow, onLoad, onReady, onHide) to calculate application‑level first‑screen time and page‑level load, show, and render durations. Special handling for Taro‑based mini programs is provided.

Behavior‑Trace Log : Records recent user actions, HTTP requests, and page navigation stacks (up to 10 entries) to aid in root‑cause analysis of exceptions.

SDK Characteristics :

Packaged with Rollup, 49 KB gzipped, supports both CommonJS and ES6 modules.

Two usage modes: npm package ( import * as mpMonitor from 'mp-monitor') or single‑file require ( const mpMonitor = require('./utils/mp-monitor')).

Custom log reporting via console.error('custom content').

Business Practice : Integrated with the company's front‑end monitoring platform, supporting WeChat, Baidu, Toutiao, Alipay, QQ, and 360. By October 2021, the SDK covered 13 mini programs across five business lines, with reporting compatible with Sentry.

Results : Dashboards display real‑time health, performance curves, PV/UV statistics, waterfall page‑load visualizations, and behavior‑trace graphs, helping developers identify optimization opportunities and reproduce issues quickly.

Project Repository : https://github.com/wuba/mp-monitor

Author : Liu Min, senior front‑end engineer focusing on mini‑program monitoring and micro‑frontend architecture.