? ????? ?? ????? ?? ???? ?? ????, ?? ???? ?? ??? ?? ??? ?? ???? ?? ??? ?? ??? ???????. ?? ??? ??? ?? ????!

????? ?? ???? ??? ?? ??? ?????.

??? ?? ?? ??? ?? ??? ?? ????? ?? ?? ? ?? ???? ???? ?? ????? ????.
??? ?? ??? ???? ?? ???? ??? ??? ???? ??? ????.

?? ?? ?? ????? ??? ?? ??? ??????.

• ?? ?? ?? ???? ??? ?? ? ?????.
• ???? ????? ???? ?? ?????? ???? ?? ? ??? ??????.
• ???? ????? A? B? ???? ??? ? ?? ?? ??? ???? ?? ??? ????
• ???? ????? A? B?? ? ?? ?? ???? ?? ? B? ? ?? ???? ?? ? ????
• ???? ????? ?? ???? ?? ? , ???? ??? ??? ??? ????? ???? ??? ?????. ?? ???? ????? ???? ????, ??? ??? ?? ??? ??? ???? ??? ?? ??????. ??? ?? ??? ????? ?????? ???? ?????. ?? ???? ??? ?? ??? ?? ??? ??? ?????.
??? log? ??? ??? ?? ??? ??? ?? ? ????.

?? ??? ?? ???? ??? ??? ???? ??? ????? ?? ???? ????????.

?? ???? ?? ?? ?? ?? ???

?? ???? ?? ? ?? ?? ????? ?????. ?? ?? ?????: log ，我們就能很快定位到出問題的代碼。
如果不是代碼問題，也更有底氣回復用戶不是我們系統(tǒng)的問題。

如何使用小程序 Log 日志系統(tǒng)

小程序側提供了兩種小程序 Log 日志接口：

• LogManager ( 普通日志 )
• RealtimeLogManager ( 實時日志 )

官方并沒有介紹兩者的具體區(qū)別，只是強調了 Realtime 的實時性質。

在我看來他們的最大區(qū)別就是：

• LogManager 可以讓用戶有種心安的感覺，因為 LogManager 是用戶手動反饋的問題。
• RealtimeLogManager 則對開發(fā)者更友好，可以在用戶不知情的情況下收集到問題信息，并在用戶無感的情況下對問題進行修復。

LogManager

小程序提供的 Log 日志接口，通過 wx.getLogManager() 獲取實例。
注意：

• 最多保存5M的日志內容，超過5M后，舊的日志內容會被刪除。
• 對于 小程序 ，用戶可以通過使用?button?組件的?open-type="feedback"?來上傳打印的日志。
• 對于 小游戲 ，用戶可以通過使用?wx.createFeedbackButton?來創(chuàng)建上傳打印的日志的按鈕。
• 開發(fā)者可以通過小程序管理后臺左側菜單 反饋管理 頁面查看相關打印日志。

創(chuàng)建 LogManager 實例

你可以通過 wx.getLogManager() 獲取日志實例。
括號中可以傳參 { level: 0 | 1 } 來決定是否寫入 Page 的生命周期函數(shù)， wx 命名空間下的函數(shù)日志。

• 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 頁面，單擊 反饋與投訴 ，在點擊 功能異常 進行日志上傳。

開發(fā)者處理用戶反饋及和用戶溝通

開發(fā)者可以在小程序后臺 管理 -> 用戶反饋 -> 功能異常 查看用戶反饋的信息。
開發(fā)者可以在 功能 -> 客服 下綁定客服微信，綁定后可以在 48小時 內通過微信和反饋用戶溝通。

注：溝通需要用戶反饋時勾選：允許開發(fā)者在 48 小時內通過客服消息聯(lián)系我。

RealtimeLogManager

小程序提供的 實時Log 日志接口，通過 wx.getRealtimeLogManager()

LogManager( ?? ?? )????RealtimeLogManager( ??? ?? )??????????? ? ??? ???? ???? ???? ?????. ??? ??? ??? ???? ??????. ????? ???? ?? ??? ?? ? ???? ??? ????. ??????LogManager? ???? ???? ??? ???? ??? ????? ??? ? ????. . ????RealtimeLogManager? ???? ??? ??? ?? ??? ???? ???? ??? ??? ??? ??? ? ?? ????? ? ?????. ??????LogManager????? ?? ????? ???? <code>Log ?? ????? wx .getLogManager() ????? ?????. ????: ???????? 5M? ?? ???? ??? ? ????. 5M? ???? ??? ?? ???? ?????. ?????? ????? ?? ???? button ?? ??? open-type="feedback"? ???? ??? ??? ???? ? ????. ?????? ??? ?? ???? wx.createFeedbackButton? ???? ??? ??? ????? ??? ?? ? ????. ???????? ?? ???? ?? ??? ?? ??? ??? ?? ???? ?? ?? ?? ??? ? ? ????. ??????LogManager ???? ?????? wx.getLogManager()</code? ?? ?? ????? ??? ? ????. > . ??<code>{ level: 0 | 1 } ????? ?? ?? ???? wx</ ??? <code>Page? ?? ?? ??? ???? ??? ??? ? ????. code> ?????? ?? ??. ??????0: ?? ????1: ?? ?? ????

const logger = wx.getRealtimeLogManager()

??LogManager ???? ????

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

?? ??? ???? LogManager? ??? ??? ????????????? ??? ? ???? ?? ????? ???? ???? ? ????. code> ????? ?? ? ?? ??? ???? ?? ??? ???? ??? ??????. ???????? ??? ???? ???? ???? ?????.???????? ?? ?????? ??? ? ????. background Strong> -> ??? ??? -> ?? ?? ??? ??? ??? ???. ?????? ?? -> ?? ????? ?? ??? WeChat? ??? ? ????. ??? ? 48?? ?? WeChat? ?? ????? ???? ??? ? ????. ??????. ??

????: ??????? ??? ???? ??? ?? ???? ?????. ???? 48?? ??? ?? ??? ???? ?? ??? ??? ? ??? ?????. ??

??RealtimeLogManager?????? ???? ??? ?? ?? ????? ????? wx.getRealtimeLogManager()? ?? ????? ?????. ????: ??

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

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

創(chuàng)建 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])

查看實時日志

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

• 登錄小程序后臺

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

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

上面我們知道了小程序的 Log 日志怎么使用，我們當然可以不進行封裝直接使用。
但是我們直接使用起來會感覺到十分的別扭，因為這不符合我們程序員單點調用的習慣。

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

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

封裝小程序 Log 方法

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

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

版本問題

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

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

logger.log(VERSION, info)

打印格式

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

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é)的名稱，我們就可以知道全局注入。
全局注入的意思就是，不通過手動調用的形式，在方法寫完后自動注入 log ，你只需要在更細節(jié)的地方考慮打印 log 即可。

為什么要全局注入

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

如何進行全局注入

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

需要注意的是， 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)
      }
    })
  }
})

總結

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

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

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

【相關學習推薦：小程序開發(fā)教程】

? ??? ?? ????? Log ???? ?? ?????, ??? ???? ????? ???????.? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!