ミニ プログラムのログ システムについて説明し、その構築方法と使用方法を見てみましょう。

この記事では、ミニ プログラムのログ システムについて説明し、ミニ プログラム ログ システムの使用方法、ミニ プログラム ログ システムの構築方法を紹介します。

通常、ログ システムは開発の重要な部分です。

しかし、さまざまな理由により、フロントエンド開発でログの印刷やレポート システムを使用することは一般的ではありません。
しかし、特定のケースでは、ログ システムが驚異的に機能することがよくあります。

たとえば、チャット システムで次の問題が発生しました。

• 音声通話中にユーザーに音が聞こえない
• インスタント メッセージングでは、ユーザーのフィードバックが一部のシナリオ、メッセージを送信できません
• インスタント メッセージングで、A が B のメッセージに返信するときに、ダイアログ ボックスが表示されないことがあります。
• インスタント メッセージングで、A が 2 つのメッセージを B に 1 回で送信した後、行、B は 2 番目のメッセージを受信できません。 ヒント
• インスタント メッセージングでは、音声メッセージを送信すると、ユーザーは音声メッセージが送信されたように見えますが、実際には録音がまだ続いています。この時、ユーザーはネットワークが止まっているのではないかと思い、最終的に自分や他の人の会話の音声が録音されていることに気づきました（

）が、上記のエラーはバックグラウンドインターフェースには反映されませんでした。一部のユーザーの携帯電話モデルに問題があるため、問題を特定するのは困難です。
ここに log があれば、問題のあるコードをすぐに見つけることができます。
コードの問題ではない場合は、システムの問題ではないことをユーザーに自信を持って答えることができます。

ミニ プログラム ログ システムの使用方法

ミニ プログラム側には、2 つのミニ プログラム ログ インターフェイスが用意されています。

• LogManager ( 通常のログ )
• RealtimeLogManager ( リアルタイム ログ )

公式は、両者の具体的な違いについては紹介していませんでした。これは、Realtime のリアルタイム性を強調しているだけです。

私の意見では、これらの最大の違いは次のとおりです。

• LogManager はユーザーに安心感を与えます。LogManager は問題があるからです。ユーザーによって手動で報告されます。
• RealtimeLogManager は開発者にとってよりフレンドリーで、ユーザーが知らないうちに問題情報を収集し、ユーザーが気づかないうちに問題を修正できます。

LogManager

アプレットによって提供される Log ログ インターフェイス (wx.getLogManager を通じて) ( ) インスタンスを取得します。
注:

• ログ コンテンツは最大 5M まで保存できます。5M を超えると、古いログ コンテンツは削除されます。
• ミニ プログラムの場合、ユーザーは button コンポーネントの open-type="フィードバック" を使用して、印刷されたログをアップロードできます。
• ミニ ゲーム の場合、ユーザーは wx.createFeedbackButton を使用して、印刷されたログをアップロードするボタンを作成できます。
• 開発者は、ミニ プログラム管理バックエンドの左側のメニュー フィードバック管理 ページから、関連する印刷ログを表示できます。

LogManager インスタンスの作成

ログ インスタンスは、wx.getLogManager() を通じて取得できます。
パラメーターを括弧 { level: 0 | 1 } で渡すことで、wx## の下の関数である Page のライフサイクル関数を記述するかどうかを決定できます。 # 名前空間ログ。

0: 書きます
• 1: 書かない

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

LogManager インスタンスを使用します #

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

ユーザー フィードバックは、LogManager によって記録されたログをアップロードします。ログが記録された後、ユーザーは

profile

にログオンできます。ミニ プログラムのページで、フィードバックと苦情をクリックし、機能異常をクリックしてログをアップロードします。

開発者はユーザーのフィードバックを処理し、ユーザーとコミュニケーションを行います開発者はミニ プログラムのバックグラウンドで

管理できる ->

ユーザーフィードバック -> 機能異常 ユーザーフィードバック情報を表示します。 開発者は、 Function ->
Customer Service でカスタマー サービス WeChat をバインドできます。バインド後、48 時間 以内に WeChat を通じてフィードバック ユーザーと通信できます。 注: コミュニケーションにユーザーからのフィードバックが必要な場合は、「開発者が 48 時間以内にカスタマー サービス メッセージを通じて私に連絡できるようにする」をチェックしてください。

RealtimeLogManager

アプレットによって提供される リアルタイム ログ

ログ インターフェイス (

を通じて) wx.getRealtimeLogManager () インスタンスを取得します。 ＃＃＃知らせ：＃＃＃<ul><li><code>wx.getRealtimeLogManager() 基础库 2.7.1 开始支持

官方给出实时日志每条的容量上限是 5kb

官方对每条日志的定义：在一个页面 onShow -> onHide 之间，会聚合成一条日志上报

开发者可从小程序管理后台： 开发 -> 运维中心 -> 实时日志 进入小程序端日志查询页面

为了定位问题方便，日志是按页面划分的，某一个页面，在onShow到onHide（切换到其它页面、右上角圆点退到后台）之间打的日志，会聚合成一条日志上报，并且在小程序管理后台上可以根据页面路径搜索出该条日志

创建 RealtimeLogManager 实例

你可以通过 wx.getRealtimeLogManager() 获取实时日志实例。

const logger = wx.getRealtimeLogManager()

使用 RealtimeLogManager 实例

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

查看实时日志

与普通日志不同的是，实时日志不再需要用户反馈，可以直接通过以下方式查看实例。

• 登录小程序后台

• 通过路径 开发 -> 开发管理 -> 运维中心 -> 实时日志 查看实时日志

如何搭建小程序 Log 日志系统

上面我们知道了小程序的 Log 日志怎么使用，我们当然可以不进行封装直接使用。
但是我们直接使用起来会感觉到十分的别扭，因为这不符合我们程序员单点调用的习惯。

那么接下来让我们对这套 Log 系统进行初步的封装以及全局的方法的日志注入。

后续我会在 github 开放源码，并打包至 npm ，需要的开发者可自行 install 调用。

封装小程序 Log 方法

封装 Log 方法前，我们需要整理该方法需要考虑什么内容：

• 打印格式：统一打印格式有助于我们更快的定位问题
• 版本号：方便我们清晰的知道当前用户使用的小程序版本，避免出现旧版本问题在新代码中找不到问题
• 兼容性：我们需要考虑用户小程序版本不足以支持 getLogManager 、 getRealtimeLogManager 的情况
• 类型：我们需要兼容 debug 、 log 、 error 类型的 log日志

版本问题

我们需要一个常量用以定义版本号，以便于我们定位出问题的代码版本。
如果遇到版本问题，我们可以更好的引导用户

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

logger.log(VERSION, info)

打印格式

我们可以通过 [version] file | content 的统一格式来更快的定位内容。

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 系统的基本封装。

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

通过该章节的名称，我们就可以知道全局注入。
全局注入的意思就是，不通过手动调用的形式，在方法写完后自动注入 log ，你只需要在更细节的地方考虑打印 log 即可。

为什么要全局注入

虽然我们实现了全局 log 的封装，但是很多情况下，一些新同学没有好的打 log 的习惯，尤其是前端同学（我也一样）。
所以我们需要做一个全局注入，以方便我们的代码书写，也避免掉手动打 log 会出现遗漏的问题。

如何进行全局注入

小程序提供了 behaviors 参数，用以让多个页面拥有相同的数据字段和方法。

需要注意的是， page 级别的 behaviors 在 2.9.2 之后开始支持

我们可以通过封装一个通用的 behaviors ，然后在需要 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)
      }
    })
  }
})

总结

连着开发带整理，林林总总的也有了 2000+ 字，耗费了三天的时间，整体感觉还是比较值得的，希望可以带给大家一些帮助。

也希望大家更重视前端的 log 一点。这基于我自身的感觉，尤其是移动端用户。
在很多时候由于 手机型号 、 弱网环境 等导致的问题。
在没有 log 时，找不到问题的着力点，导致问题难以被及时解决。

后续我会在 github 开放源码，并打包至 npm ，开发者后续可自行 install 调用。
后续 源码地址 及 npm安装方法 将会在该页面更新。
开放时间基于大家需求而定。

【相关学习推荐：小程序开发教程】

以上がミニ プログラムのログ システムについて説明し、その構築方法と使用方法を見てみましょう。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。