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

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

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

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

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

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

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

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

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

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

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

• LogManager はユーザーに安心感を與えます。LogManager は問(wèn)題があるからです。ユーザーによって手動(dòng)で報(bào)告されます。
• RealtimeLogManager は開(kāi)発者にとってよりフレンドリーで、ユーザーが知らないうちに問(wèn)題情報(bào)を収集し、ユーザーが気づかないうちに問(wèn)題を修正できます。

LogManager

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

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

LogManager インスタンスの作成

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

0: 書(shū)きます
• 1: 書(shū)かない

•  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 によって記録されたログをアップロードします。ログが記録された後、ユーザーは

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

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

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

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

を通じて) wx.getRealtimeLogManager () インスタンスを取得します。 ＃＃＃知らせ：＃＃＃<ul><li><code>wx.getRealtimeLogManager() 基礎(chǔ)庫(kù) 2.7.1 開(kāi)始支持

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

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

你可以通過(guò) 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í)日志不再需要用戶反饋，可以直接通過(guò)以下方式查看實(shí)例。

• 登錄小程序后臺(tái)

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

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

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

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

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

封裝小程序 Log 方法

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

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

版本問(wèn)題

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

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

logger.log(VERSION, info)

打印格式

我們可以通過(guò) [version] file | content 的統(tǒng)一格式來(lái)更快的定位內(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

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

為什么要全局注入

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

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

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

需要注意的是， page 級(jí)別的 behaviors 在 2.9.2 之后開(kāi)始支持

我們可以通過(guò)封裝一個(gè)通用的 behaviors ，然后在需要 log 的頁(yè)面進(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é)

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

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

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

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

以上がミニ プログラムのログ システムについて説明し、その構(gòu)築方法と使用方法を見(jiàn)てみましょう。の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。