This article will talk about the Log system in the Mini Program, introduce how to use the Mini Program Log system, and how to build the Mini Program Log system. I hope it will be helpful to everyone!

Normally, the logging system is an important part of development.

But for various reasons, it is not common to do log printing and reporting systems in front-end development.
But in some specific cases, the log system often works wonders.

For example, a chat system encountered the following problems:

• During a voice call, the user cannot hear the sound
• In instant messaging, user feedback in some scenarios, messages Unable to send
• In instant messaging, when A replies to B's message, the dialog box does not appear occasionally
• In instant messaging, after A sends two messages to B in a row, B cannot receive the second message Tip
• In instant messaging, when sending a voice message, the user thinks that the voice message has been sent, but in fact the recording is still continuing. At this time, the user thought that the network was stuck, and finally found that the voices of himself and other people talking were recorded

. However, the above errors were not reflected in the background interface. Coupled with problems with some users' mobile phone models, the problem is difficult to locate.
If we have log here, we can quickly locate the problematic code.
If it is not a code problem, we will be more confident in replying to the user that it is not a problem with our system.

How to use the Mini Program Log system

The Mini Program side provides two Mini Program Log interfaces:

• LogManager ( Normal log )
• RealtimeLogManager ( Real-time log )

The official did not introduce the specific difference between the two. It just emphasizes the real-time nature of Realtime.

In my opinion, the biggest difference between them is:

• LogManager can make users feel at ease, because LogManager is Problems reported manually by users.
• RealtimeLogManager is more friendly to developers. It can collect problem information without the user's knowledge and fix the problem without the user being aware of it.

LogManager

The Log log interface provided by the applet, through wx.getLogManager( ) Get the instance.
Note:

• Save up to 5M of log content. After exceeding 5M, the old log content will be deleted.
• For Mini Program, users can upload printed logs by using button component’s open-type="feedback".
• For Mini Games, users can create a button to upload printed logs by using wx.createFeedbackButton.
• Developers can view related printing logs through the left menu Feedback Management page of the mini program management backend.

Create LogManager instance

You can get the log instance through wx.getLogManager().
Parameters can be passed in brackets { level: 0 | 1 } to decide whether to write the life cycle function of Page, the function under the wx namespace log.

• 0: Write
• 1: Do not write

 https://github.com/Kujiale-Mobile/Painter

Use LogManager instance

const logger = wx.getLogManager({ level: 0 })
logger.log({str: 'hello world'}, 'basic log', 100, [1, 2, 3])
logger.info({str: 'hello world'}, 'info log', 100, [1, 2, 3])
logger.debug({str: 'hello world'}, 'debug log', 100, [1, 2, 3])
logger.warn({str: 'hello world'}, 'warn log', 100, [1, 2, 3])

User feedback uploads the log recorded by LogManager

After the log is recorded, the user can log on the profile page of the mini program , click Feedback and Complaints, and click Function Abnormality to upload the log.

Developers handle user feedback and communicate with users

Developers can manage in the mini program background -> User Feedback -> Function Abnormality View user feedback information.
Developers can bind customer service WeChat under Function -> Customer Service. After binding, they can communicate with feedback users through WeChat within 48 hours .

Note: When communication requires user feedback, check: Allow developers to contact me via customer service messages within 48 hours.

RealtimeLogManager

The real-time Log log interface provided by the applet, through wx.getRealtimeLogManager () Get the instance.
Notice:

• wx.getRealtimeLogManager() 基礎(chǔ)庫 2.7.1 開始支持
• 官方給出實(shí)時(shí)日志每條的容量上限是 5kb
• 官方對每條日志的定義：在一個頁面 onShow -> onHide 之間，會聚合成一條日志上報(bào)
• 開發(fā)者可從小程序管理后臺： 開發(fā) -> 運(yùn)維中心 -> 實(shí)時(shí)日志 進(jìn)入小程序端日志查詢頁面

為了定位問題方便，日志是按頁面劃分的，某一個頁面，在onShow到onHide（切換到其它頁面、右上角圓點(diǎn)退到后臺）之間打的日志，會聚合成一條日志上報(bào)，并且在小程序管理后臺上可以根據(jù)頁面路徑搜索出該條日志

創(chuàng)建 RealtimeLogManager 實(shí)例

你可以通過 wx.getRealtimeLogManager() 獲取實(shí)時(shí)日志實(shí)例。

const logger = wx.getRealtimeLogManager()

使用 RealtimeLogManager 實(shí)例

const logger = wx.getRealtimeLogManager()
logger.debug({str: 'hello world'}, 'debug log', 100, [1, 2, 3])
logger.info({str: 'hello world'}, 'info log', 100, [1, 2, 3])
logger.error({str: 'hello world'}, 'error log', 100, [1, 2, 3])
logger.warn({str: 'hello world'}, 'warn log', 100, [1, 2, 3])

查看實(shí)時(shí)日志

與普通日志不同的是，實(shí)時(shí)日志不再需要用戶反饋，可以直接通過以下方式查看實(shí)例。

• 登錄小程序后臺

• 通過路徑 開發(fā) -> 開發(fā)管理 -> 運(yùn)維中心 -> 實(shí)時(shí)日志 查看實(shí)時(shí)日志

如何搭建小程序 Log 日志系統(tǒng)

上面我們知道了小程序的 Log 日志怎么使用，我們當(dāng)然可以不進(jìn)行封裝直接使用。
但是我們直接使用起來會感覺到十分的別扭，因?yàn)檫@不符合我們程序員單點(diǎn)調(diào)用的習(xí)慣。

那么接下來讓我們對這套 Log 系統(tǒng)進(jìn)行初步的封裝以及全局的方法的日志注入。

后續(xù)我會在 github 開放源碼，并打包至 npm ，需要的開發(fā)者可自行 install 調(diào)用。

封裝小程序 Log 方法

封裝 Log 方法前，我們需要整理該方法需要考慮什么內(nèi)容：

• 打印格式：統(tǒng)一打印格式有助于我們更快的定位問題
• 版本號：方便我們清晰的知道當(dāng)前用戶使用的小程序版本，避免出現(xiàn)舊版本問題在新代碼中找不到問題
• 兼容性：我們需要考慮用戶小程序版本不足以支持 getLogManager 、 getRealtimeLogManager 的情況
• 類型：我們需要兼容 debug 、 log 、 error 類型的 log日志

版本問題

我們需要一個常量用以定義版本號，以便于我們定位出問題的代碼版本。
如果遇到版本問題，我們可以更好的引導(dǎo)用戶

const VERSION = "1.0.0"
const logger = wx.getLogManager({ level: 0 })

logger.log(VERSION, info)

打印格式

我們可以通過 [version] file | content 的統(tǒng)一格式來更快的定位內(nèi)容。

const VERSION = "1.0.0"
const logger = wx.getLogManager({ level: 0 })

logger.log(`[${VERSION}] ${file} | `, ...args)

兼容性

我們需要考慮用戶小程序版本不足以支持 getLogManager 、 getRealtimeLogManager 的情況

const VERSION = "0.0.18";

const canIUseLogManage = wx.canIUse("getLogManager");
const logger = canIUseLogManage ? wx.getLogManager({ level: 0 }) : null;
const realtimeLogger = wx.getRealtimeLogManager ? wx.getRealtimeLogManager() : null;

export function RUN(file, ...args) {
  console.log(`[${VERSION}]`, file, " | ", ...args);
  if (canIUseLogManage) {
    logger.log(`[${VERSION}]`, file, " | ", ...args);
  }

  realtimeLogger && realtimeLogger.info(`[${VERSION}]`, file, " | ", ...args);
}

類型

我們需要兼容 debug 、 log 、 error 類型的 log日志

export function RUN(file, ...args) {
    ...
}

export function DEBUG(file, ...args) {
    ...
}

export function ERROR(file, ...args) {
    ...
}

export function getLogger(fileName) {
  return {
    DEBUG: function (...args) {
      DEBUG(fileName, ...args)
    },
    RUN: function (...args) {
      RUN(fileName, ...args)
    },
    ERROR: function (...args) {
      ERROR(fileName, ...args)
    }
  }
}

完整代碼

以上都做到了，就完成了一套 Log 系統(tǒng)的基本封裝。

const VERSION = "0.0.18";

const canIUseLogManage = wx.canIUse("getLogManager");
const logger = canIUseLogManage ? wx.getLogManager({ level: 0 }) : null;
const realtimeLogger = wx.getRealtimeLogManager ? wx.getRealtimeLogManager() : null;

export function DEBUG(file, ...args) {
  console.debug(`[${VERSION}] ${file}  | `, ...args);
  if (canIUseLogManage) {
    logger.debug(`[${VERSION}]`, file, " | ", ...args);
  }

  realtimeLogger && realtimeLogger.info(`[${VERSION}]`, file, " | ", ...args);
}

export function RUN(file, ...args) {
  console.log(`[${VERSION}]`, file, " | ", ...args);
  if (canIUseLogManage) {
    logger.log(`[${VERSION}]`, file, " | ", ...args);
  }

  realtimeLogger && realtimeLogger.info(`[${VERSION}]`, file, " | ", ...args);
}

export function ERROR(file, ...args) {
  console.error(`[${VERSION}]`, file, " | ", ...args);
  if (canIUseLogManage) {
    logger.error(`[${VERSION}]`, file, " | ", ...args);
  }

  realtimeLogger && realtimeLogger.error(`[${VERSION}]`, file, " | ", ...args);
}

export function getLogger(fileName) {
  return {
    DEBUG: function (...args) {
      DEBUG(fileName, ...args)
    },
    RUN: function (...args) {
      RUN(fileName, ...args)
    },
    ERROR: function (...args) {
      ERROR(fileName, ...args)
    }
  }
}

全局注入 Log

通過該章節(jié)的名稱，我們就可以知道全局注入。
全局注入的意思就是，不通過手動調(diào)用的形式，在方法寫完后自動注入 log ，你只需要在更細(xì)節(jié)的地方考慮打印 log 即可。

為什么要全局注入

雖然我們實(shí)現(xiàn)了全局 log 的封裝，但是很多情況下，一些新同學(xué)沒有好的打 log 的習(xí)慣，尤其是前端同學(xué)（我也一樣）。
所以我們需要做一個全局注入，以方便我們的代碼書寫，也避免掉手動打 log 會出現(xiàn)遺漏的問題。

如何進(jìn)行全局注入

小程序提供了 behaviors 參數(shù)，用以讓多個頁面擁有相同的數(shù)據(jù)字段和方法。

需要注意的是， page 級別的 behaviors 在 2.9.2 之后開始支持

我們可以通過封裝一個通用的 behaviors ，然后在需要 log 的頁面進(jìn)行引入即可。

import * as Log from "./log-test";

export default Behavior({
  definitionFilter(defFields) {
    console.log(defFields);
    Object.keys(defFields.methods || {}).forEach(methodName => {
      const originMethod = defFields.methods[methodName];
      defFields.methods[methodName] = function (ev, ...args) {
        if (ev && ev.target && ev.currentTarget && ev.currentTarget.dataset) {
          Log.RUN(defFields.data.PAGE_NAME, `${methodName} invoke, event dataset = `, ev.currentTarget.dataset, "params = ", ...args);
        } else {
          Log.RUN(defFields.data.PAGE_NAME, `${methodName} invoke, params = `, ev, ...args);
        }
        originMethod.call(this, ev, ...args)
      }
    })
  }
})

總結(jié)

連著開發(fā)帶整理，林林總總的也有了 2000+ 字，耗費(fèi)了三天的時(shí)間，整體感覺還是比較值得的，希望可以帶給大家一些幫助。

也希望大家更重視前端的 log 一點(diǎn)。這基于我自身的感覺，尤其是移動端用戶。
在很多時(shí)候由于 手機(jī)型號 、 弱網(wǎng)環(huán)境 等導(dǎo)致的問題。
在沒有 log 時(shí)，找不到問題的著力點(diǎn)，導(dǎo)致問題難以被及時(shí)解決。

后續(xù)我會在 github 開放源碼，并打包至 npm ，開發(fā)者后續(xù)可自行 install 調(diào)用。
后續(xù) 源碼地址 及 npm安裝方法 將會在該頁面更新。
開放時(shí)間基于大家需求而定。

【相關(guān)學(xué)習(xí)推薦：小程序開發(fā)教程】

The above is the detailed content of Let's talk about the Log system in the mini program and see how to build and use it.. For more information, please follow other related articles on the PHP Chinese website!