Shulou(Shulou.com)06/02 Report--

This article mainly analyzes the relevant knowledge points of how to build and use the Log log system in Mini Program, the content is detailed and easy to understand, the operation details are reasonable, and has a certain reference value. If you are interested, you might as well follow the editor and learn more about "how to build and use the Log log system in Mini Program".

In general, the logging system is an important part of development.

However, for various reasons, it is not common to do log printing and reporting system in front-end development.

However, in some specific cases, the logging system is often miraculous.

For example, a chat system encountered the following problems:

In a voice call, the user cannot hear the voice.

In instant messaging, users give feedback in some scenarios and messages cannot be sent.

In instant messaging, when A replies to B messages, the occasional dialog box does not display

In instant messaging, after A sends two messages to B in succession, B does not receive the second prompt.

In instant messaging, when sending a voice message, the user thinks the voice has been sent, but in fact the recording continues. At this time, the user thought it was a network card, but finally found that his voice talking to others had been recorded.

However, the above errors are not reflected in the background interface. Coupled with the problems of some users' mobile phone models, it is difficult to locate the problem.

If we have log here, we can quickly locate the faulty code.

If it is not the code problem, but also more confident to reply to the user is not the problem of our system.

How to use Mini Program Log Log system

Two Mini Program Log log interfaces are provided on the mini program side:

LogManager (General Log)

RealtimeLogManager (real-time log)

Officials did not describe the specific difference between the two, but stressed the real-time nature of Realtime.

In my opinion, the biggest difference between them is:

LogManager can give users a sense of peace of mind, because LogManager is a manual feedback problem.

RealtimeLogManager is more developer-friendly and can collect problem information without the user's knowledge and fix the problem without the user's perception.

LogManager

The Log log interface provided by Mini Program, and the instance is obtained through wx.getLogManager ().

Note:

Save up to 5m of log content, after more than 5m, the old log content will be deleted.

For Mini Program, users can upload printed logs by using the open-type= "feedback" of the button component.

For Mini Game, users can create buttons to upload and print logs by using wx.createFeedbackButton.

Developers can view the relevant print logs through the feedback management page of the left menu in the Mini Program management backend.

Create a LogManager instance

You can get the log instance through wx.getLogManager ().

The parameter {level: 0 | 1} can be passed in parentheses to determine whether to write the life cycle function of Page, the function log under the wx namespace.

0: write

1: do not write

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

Using LogManager instances

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])

Users report uploading logs recorded by LogManager

When the log is recorded, users can upload the log on Mini Program's profile page, click feedback and complaint, and click on the abnormal function to upload the log.

Developers handle user feedback and communicate with users

Developers can view user feedback in Mini Program backend Management-> user feedback-> feature exception.

Developers can bind customer service Wechat under function-> customer service, and communicate with feedback users through Wechat within 48 hours after binding.

Note: check when communication requires user feedback: allow developers to contact me through customer service messages within 48 hours.

RealtimeLogManager

The real-time Log log interface provided by Mini Program, and the instance is obtained through wx.getRealtimeLogManager ().

Note:

Wx.getRealtimeLogManager () base library 2.7.1 is supported

Officially, the maximum capacity of each real-time log is 5kb.

Official definition of each log: between a page onShow-> onHide, it converges to form a log to report

Developers can enter the Mini Program log query page from Mini Program Management backend: development-> Operation and maintenance Center-> Real-time logs.

In order to locate the problem conveniently, the log is divided by page. On a certain page, the log played between onShow and onHide (switch to another page, and the dots in the upper right corner are retreated to the background) will converge to form a log to report, and the log can be searched according to the page path on the Mini Program management background.

Create a RealtimeLogManager instance

You can get real-time log instances through wx.getRealtimeLogManager ().

Const logger = wx.getRealtimeLogManager ()

Using RealtimeLogManager instances

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])

View real-time logs

Unlike ordinary logs, real-time logs no longer require user feedback, and you can view the instance directly in the following ways.

Log in to Mini Program backend

View real-time logs from path Development-> Development Management-> Operation and maintenance Center-> Real-time logs

How to build Mini Program Log log system

Above we know how to use Mini Program's Log log, of course we can use it without encapsulation.

But it is very awkward for us to use it directly, because it is not in line with our programmer's habit of single point of call.

Then let's make a preliminary encapsulation of this Log system and log injection of the global method.

In the future, I will open source in github and package it to npm. Developers who need it can call it on their own install.

Encapsulating Mini Program Log method

Before encapsulating the Log method, we need to sort out what the method needs to consider:

Print format: a unified print format helps us to locate problems faster

Version number: it is convenient for us to know clearly the Mini Program version used by the current user, so as to avoid the problem of the old version and cannot be found in the new code.

Compatibility: we need to consider the situation where users' Mini Program versions are not enough to support getLogManager and getRealtimeLogManager.

Type: we need log logs that are compatible with debug, log and error types

Version problem

We need a constant to define the version number so that we can locate the version of the code in question.

If we encounter version problems, we can better guide users.

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

Print format

We can locate content more quickly through the unified format of [version] file | content.

Const VERSION = "1.0.0" const logger = wx.getLogManager ({level: 0}) logger.log (`[${VERSION}] ${file} |`,... args)

Compatibility

We need to consider the situation where users' Mini Program versions are not enough to support getLogManager and 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);}

Types

We need log logs that are compatible with debug, log and error types

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)}

Complete code

All the above has been done, and a basic package of Log system has been completed.

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)}

Global injection of Log

By the name of this chapter, we can know the global injection.

Global injection means that instead of using manual calls to automatically inject log after the method is written, you just need to consider printing log in more detail.

Why global injection?

Although we have implemented the global log encapsulation, in many cases, some new students do not have a good habit of playing log, especially the front-end students (me, too).

So we need to do a global injection to facilitate our code writing and avoid the problem of missing when typing log manually.

How to perform global injection

Mini Program provides a behaviors parameter to make multiple pages have the same data fields and methods.

It should be noted that page-level behaviors has been supported since 2.9.2.

We can encapsulate a generic behaviors and then introduce it on pages that need log.

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)})}) about "how to build and use the Log log system in Mini Program", this is the end of the introduction, more related content can be searched for previous articles, hope to help you answer questions, please support the website!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.