首頁 > 微信小程式 > 小程式開發 > 聊聊小程式中的 Log 日誌系統,看看怎麼搭建和使用

聊聊小程式中的 Log 日誌系統,看看怎麼搭建和使用

青灯夜游
發布: 2022-01-22 09:37:47
轉載
6328 人瀏覽過

這篇文章帶大家聊聊小程式中的 Log 日誌系統,介紹如何使用小程式 Log 日誌系統,以及如何建立小程式 Log 日誌系統,希望對大家有幫助!

聊聊小程式中的 Log 日誌系統,看看怎麼搭建和使用

通常情況下,日誌系統是開發中重要的一環。

但基於種種原因,在前端開發中做日誌列印和上報系統卻不常見。
但在某些特定情況下,日誌系統往往有奇效。

例如一個聊天系統中遇到了以下問題:

  • 語音通話中,用戶聽不到聲音
  • 即時通訊中,部分場景用戶回饋,訊息發送不出去
  • 即時通訊中, A 回覆B 訊息時,偶爾對話方塊不顯示
  • 即時通訊中, A 給B 連續發送兩則訊息後, B 接收不到第二條的提示
  • 即時通訊中,發送語音訊息發送時,用戶以為語音已經發送,但實際上錄音還在繼續。這時用戶以為是網路卡了,最後發現自己和其他人說話的聲音被錄製進去

但是以上幾種錯誤,在後台介面中並沒有體現。再加上部分用戶手機型號的問題,導致問題很難被定位。
如果我們這裡有 log ,我們就能很快定位到出問題的程式碼。
如果不是程式碼問題,也更有底氣回覆使用者不是我們系統的問題。

如何使用小程式Log 日誌系統

小程式側提供了兩個小程式Log 日誌介面:

  • #LogManager ( 普通日誌 )
  • RealtimeLogManager ( 即時日誌 )
##官方並沒有介紹兩者的具體差異,只是強調了Realtime 的即時性質。

在我看來他們的最大差異就是:

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

LogManager

小程式提供的

Log 日誌接口,透過wx.getLogManager( ) 取得實例。 注意:

    最多儲存5M的日誌內容,超過5M後,舊的日誌內容會被刪除。
  • 對於
  • 小程式 ,使用者可以透過使用 button 元件的 open-type="feedback" 來上傳列印的日誌。
  • 對於
  • 小遊戲 ,使用者可以透過使用 wx.createFeedbackButton 來建立上傳列印的日誌的按鈕。
  • 開發者可以透過小程式管理後台左側選單
  • 回饋管理 頁面查看相關列印日誌。

建立 LogManager 實例

#你可以透過

wx.getLogManager() 取得日誌實例。 括號中可以傳參
{ level: 0 | 1 } 來決定是否寫入Page 的生命週期函數, wx 命名空間下的函數紀錄.

    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 頁面,點選回饋與投訴 ,在點擊功能異常 進行日誌上傳。

開發者處理使用者回饋及與使用者溝通

#開發者可以在小程式後台

管理 -> 使用者回饋 -> 功能異常 查看使用者回饋的資訊。 開發者可以在
功能 -> 客服 下綁定客服微信,綁定後可以在48小時 內透過微信和回饋使用者溝通。

附註:溝通需要使用者回饋時勾選:允許開發者在 48 小時內透過客服訊息聯絡我。

RealtimeLogManager

小程式提供的

即時Log 日誌接口,透過wx.getRealtimeLogManager () 取得實例。 注意:

  • 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 方法前,我们需要整理该方法需要考虑什么内容:

  • 打印格式:统一打印格式有助于我们更快的定位问题
  • 版本号:方便我们清晰的知道当前用户使用的小程序版本,避免出现旧版本问题在新代码中找不到问题
  • 兼容性:我们需要考虑用户小程序版本不足以支持 getLogManagergetRealtimeLogManager 的情况
  • 类型:我们需要兼容 debuglogerror 类型的 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)
登入後複製

兼容性

我们需要考虑用户小程序版本不足以支持 getLogManagergetRealtimeLogManager 的情况

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);
}
登入後複製

类型

我们需要兼容 debuglogerror 类型的 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安装方法 将会在该页面更新。
开放时间基于大家需求而定。

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

以上是聊聊小程式中的 Log 日誌系統,看看怎麼搭建和使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:juejin.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板