微信小程序集成前端日志库的详细记录_Javascript

在微信小程序内接入日志库的记录

在开发微信小程序时，为了更好地调试和维护代码，通常需要记录日志信息。我尝试了多种日志库，包括winston、pion和loglevel，并最终选择了loglevel作为日志库，并实现了日志上传到服务器的功能。本文详细记录了这一过程，以供参考。

使用winston失败

最初，我尝试在微信小程序中使用winston日志库。然而，winston依赖node.js的部分核心模块（如stream、path和os），这些模块在微信小程序的环境中不可用。这导致了编译和运行时错误。

示例错误信息：

module not found: error: can't resolve 'stream' in 'node_modules/winston/dist/winston/transports'

手动编写日志库：

为了绕过上述这些问题，我尝试手动编写一个简单的日志库。该库能够记录日志，并根据配置将日志发送到服务器

示例代码：

// utils/logger.js
import {
  getenvironment
} from './env'
class logger {
  constructor(config) {
    this.level = config.level || 'info';
    this.sendtoserver = config.sendtoserver || false;
    this.serverurl = config.serverurl || '';
    this.printindev = config.printindev || false;
  }

  log(level = this.level, message) {
    const env = getenvironment()
    if (this.shouldlog(level)) {
      if (typeof message === 'undefined') {
        message = level;
        level = this.level;
      }
      //通过配置参数控制是否打印
      if (this.printindev || env == 'prod' || env == 'test') {
        console.log(`[${level.touppercase()}]: ${message}`);
      }
      if (this.sendtoserver) {
        if (env == 'prod' || env == 'test') {
          this.sendlogtoserver(level, message);
        }
      }
    }
  }

  info(message) {
    this.log('info', message);
  }

  warn(message) {
    this.log('warn', message);
  }

  error(message) {
    this.log('error', message);
  }

  shouldlog(level) {
    const levels = ['info', 'warn', 'error'];
    const currentlevelindex = levels.indexof(this.level);
    const messagelevelindex = levels.indexof(level);
    return messagelevelindex >= currentlevelindex;
  }

  sendlogtoserver(level, message) {
    wx.request({
      url: this.serverurl,
      method: 'post',
      data: {
        level,
        message,
      },
      success(res) {
        console.log('log sent to server:', res);
      },
      fail(err) {
        console.error('failed to send log to server:', err);
      },
    });
  }
}

module.exports = logger;

app.js使用：

引入模块

const logger = require('./utils/logger.js');

在小程序onlaunch中初始化并挂在到wx

//实例话 logger
    const logger = new logger({
      level: env, // 可配置为 'info', 'warning', 'error'
      sendtoserver: true, // 是否发送到服务端
      printindev: false, //开发环境是否打印日志
      serverurl: 'https://your-server-url.com/logs', // 服务端 url
    });
    wx.logger = logger; //挂载到wx

使用小程序onerror捕获异常

 onerror(error) {
    wx.logger.log(error);
  },

最后重写小程序page(),使日志库能够监听页面生命周期

// utils/overridepage.js

function overridepage() {
  const logger = wx.logger;
  const originalpage = page;
  page = function (pageconfig) {
    const originalonload = pageconfig.onload;
    pageconfig.onload = function (options) {
      logger.log(`page loaded: ${this.route}`);
      if (originalonload) originalonload.call(this, options);
    };

    const originalonshow = pageconfig.onshow;
    pageconfig.onshow = function () {
      logger.log(`page shown: ${this.route}`);
      if (originalonshow) originalonshow.call(this);
    };

    const originalonhide = pageconfig.onhide;
    pageconfig.onhide = function () {
      logger.log(`page hidden: ${this.route}`);
      if (originalonhide) originalonhide.call(this);
    };

    const originalonunload = pageconfig.onunload;
    pageconfig.onunload = function () {
      logger.log(`page unloaded: ${this.route}`);
      if (originalonunload) originalonunload.call(this);
    };


    originalpage(pageconfig);
  };
}

module.exports = overridepage;

const overridepage = require('./utils/overridepage.js');

 wx.logger = logger; //挂载到wx
 overridepage(); //重写page

使用loglevel

为了简化日志记录，我们决定使用更轻量级的loglevel库。loglevel可以很方便地在微信小程序中使用，并且我们可以通过插件实现日志上传功能。

安装loglevel：

npm install loglevel

下载完成后，需要使用微信的npm构建功能

在小程序内使用loglevel

app.js
import log from 'loglevel';
onlaunch(){
log.setlevel('info'); //设置 loglevel 日志输出级别 
log.trace('this is a trace message');
log.debug('this is a debug message');
log.info('this is an info message');
log.warn('this is a warning message');
log.error('this is an error message');
}

日志上传服务器，loglevel的上传插件使用xmlhttprequest()上传，小程序内不支持，需要重写上传模块，下附上传插件源码链接

https://github.com/artemyarulin/loglevel-serversend/blob/master/loglevel-serversend.js

重写上传模块

// utils/loglevel-server-send-wx.js
var loglevelserversend = function (options) {
  var _url = options && options.url || 'http://localhost:8000/main/log',
    _calloriginal = options && options.calloriginal || false,
    _prefix = options && options.prefix,
    _sendqueue = [],
    _issending = false;

  var _sendnextmessage = function () {
    if (!_sendqueue.length || _issending) return;

    _issending = true;

    var msg = _sendqueue.shift();
    wx.request({
      url: _url,
      method: 'post',
      data: msg,
      header: {
        'content-type': 'text/plain'
      },
      success: function () {
        _issending = false;
        settimeout(_sendnextmessage, 0);
      },
      fail: function () {
        _issending = false;
        settimeout(_sendnextmessage, 0);
      }
    });
  };

  wx.log = {
    log: function (level, message) {
      if (typeof _prefix === 'string') message = _prefix + message;
      else if (typeof _prefix === 'function') message = _prefix(level, message);
      else message = level + ': ' + message;

      console.log(`[${level.touppercase()}]: ${message}`);
      if (options && options.sendtoserver) {
        _sendqueue.push(message);
        _sendnextmessage();
      }
    },
    info: function (message) {
      this.log('info', message);
    },
    warn: function (message) {
      this.log('warn', message);
    },
    error: function (message) {
      this.log('error', message);
    }
  };
};

module.exports = loglevelserversend;

在app.js 中调用

const loglevelserversend = require('./utils/loglevel-server-send-wx.js');
onlaunch(){
log.setlevel('info'); //设置 日志输出级别 
wx.log = log; //挂载到wx

//wx.log*等触发日志上传服务端
    loglevelserversend({
      url: 'https://your-server-url.com/logs',
      prefix: function (level, message) {
        return `[${new date().toisostring()}] [${level.touppercase()}]: ${message}`;
      },
      sendtoserver: env === 'dev' || env === 'test' || env === 'pre' || env === 'prod', //设置允许上传日志的环境
      calloriginal: false // 上传日志时是否控制台打印
    });
    wx.log.level = 'info'; //动态改变日志输出的级别
}

//捕获异常
onerror(error) {
    wx.log.log('error', error);
  },

获取小程序当前环境

如需根据小程序环境动态设置日志输出级别，添加以下模块

// utils/environment.js
function getenvironment() {
  return __wxconfig.envversion;
}

function getloglevel(env) {
  const levels = {
    'develop': 'info',
    'trial': 'warning',
    'pre': 'error',
    'release': 'error'
  };
  return levels[env] || 'info';
}

module.exports = { getenvironment, getloglevel };