微信小程序集成前端日志庫的詳細記錄

更新時間：2024年07月25日 08:35:22 作者：人工智能的茍富貴

這篇文章主要給大家介紹了關于微信小程序集成前端日志庫的詳細記錄,文中通過代碼介紹的非常詳細,對大家學習或者使用微信小程序具有一定的參考借鑒價值,需要的朋友可以參考下

在微信小程序內(nèi)接入日志庫的記錄

在開發(fā)微信小程序時，為了更好地調(diào)試和維護代碼，通常需要記錄日志信息。我嘗試了多種日志庫，包括Winston、pion和loglevel，并最終選擇了loglevel作為日志庫，并實現(xiàn)了日志上傳到服務器的功能。本文詳細記錄了這一過程，以供參考。

使用Winston失敗

最初，我嘗試在微信小程序中使用Winston日志庫。然而，Winston依賴Node.js的部分核心模塊（如stream、path和os），這些模塊在微信小程序的環(huán)境中不可用。這導致了編譯和運行時錯誤。

示例錯誤信息：

Module not found: Error: Can't resolve 'stream' in 'node_modules/winston/dist/winston/transports'

手動編寫日志庫：

為了繞過上述這些問題，我嘗試手動編寫一個簡單的日志庫。該庫能夠記錄日志，并根據(jù)配置將日志發(fā)送到服務器

示例代碼：

// 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;
      }
      //通過配置參數(shù)控制是否打印
      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, // 是否發(fā)送到服務端
      printInDev: false, //開發(fā)環(huán)境是否打印日志
      serverUrl: 'https://your-server-url.com/logs', // 服務端 URL
    });
    wx.logger = logger; //掛載到wx

使用小程序onError捕獲異常

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

最后重寫小程序page(),使日志庫能夠監(jiān)聽頁面生命周期

// 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可以很方便地在微信小程序中使用，并且我們可以通過插件實現(xiàn)日志上傳功能。

安裝loglevel：

npm install loglevel

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

在小程序內(nèi)使用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()上傳，小程序內(nèi)不支持，需要重寫上傳模塊，下附上傳插件源碼鏈接

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 中調(diào)用

const loglevelServerSend = require('./utils/loglevel-server-send-wx.js');
onLaunch(){
log.setLevel('info'); //設置 日志輸出級別 
wx.log = log; //掛載到wx

//wx.log*等觸發(fā)日志上傳服務端
    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', //設置允許上傳日志的環(huán)境
      callOriginal: false // 上傳日志時是否控制臺打印
    });
    wx.log.level = 'info'; //動態(tài)改變?nèi)罩据敵龅募墑e
}

//捕獲異常
onError(error) {
    wx.log.log('error', error);
  },

獲取小程序當前環(huán)境

如需根據(jù)小程序環(huán)境動態(tài)設置日志輸出級別，添加以下模塊

// 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 };

結(jié)論

通過上述步驟，我成功在微信小程序中集成了loglevel日志庫，并實現(xiàn)了日志上傳到服務器的功能。這不僅提高了日志管理的靈活性，也為未來的維護和調(diào)試提供了更強大的支持。

參考資料

loglevel

微信小程序開發(fā)文檔

到此這篇關于微信小程序集成前端日志庫的文章就介紹到這了,更多相關微信小程序集成前端日志庫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

使用mixins實現(xiàn)elementUI表單全局驗證的解決方法
這篇文章主要介紹了使用mixins實現(xiàn)elementUI表單的全局驗證的解決方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-04-04
js編寫選項卡效果
這篇文章主要為大家詳細介紹了js編寫選項卡效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-05-05
IE的有條件注釋判定IE版本詳解（附實例代碼）
IE的有條件注釋是一種專有的（因此是非標準的）、對常規(guī)（X）HTML注釋的Miscrosoft擴展。顧名思義，有條件注釋使你能夠根據(jù)條件（比如瀏覽器版本）顯示代碼塊(不一定就是css，也可以是html代碼，甚至是JavaScript代碼)。
2012-01-01
javascript設計模式 – 迭代器模式原理與用法實例分析
這篇文章主要介紹了javascript設計模式 – 迭代器模式原理與用法,結(jié)合實例形式分析了javascript迭代器模式相關概念、原理、用法及操作注意事項,需要的朋友可以參考下
2020-04-04
javascript hashtable 修正版下載
javascript hashtable 修正版 hashtable hashset 下載,需要的朋友可以收藏下。
2010-12-12
js前端解決跨域的八種實現(xiàn)方案
這篇文章主要介紹了js前端解決跨域的八種實現(xiàn)方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-04-04
html5+canvas實現(xiàn)支持觸屏的簽名插件教程
jq-signature.js是一個幫助你創(chuàng)建簽名的jQuery插件，允許你的用戶使用鼠標，手指或者鉛筆生成簽名。下面這篇文章主要給大家介紹了利用html5+canvas實現(xiàn)支持觸屏的簽名插件的相關資料，需要的朋友可以參考下。
2017-05-05
JS調(diào)用某段SQL語句的方法
這篇文章主要為大家詳細介紹了通過JS調(diào)用某段SQL語句的相關方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-10-10
JavaScript使用indexOf獲得子字符串在字符串中位置的方法
這篇文章主要介紹了JavaScript使用indexOf獲得子字符串在字符串中位置的方法,涉及javascript中indexOf方法操作字符串的技巧,需要的朋友可以參考下
2015-04-04
原生JS+HTML5實現(xiàn)跟隨鼠標一起流動的粒子動畫效果
這篇文章主要介紹了原生JS+HTML5實現(xiàn)跟隨鼠標一起流動的粒子動畫效果,涉及javascript事件響應、數(shù)值運算及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下
2018-05-05