미니 프로그램의 Log 시스템에 대해 이야기하고, 어떻게 구축하고 사용하는지 살펴보겠습니다.

이 기사에서는 미니 프로그램의 로그 시스템에 대해 설명하고, 미니 프로그램 로그 시스템 사용 방법과 미니 프로그램 로그 시스템 구축 방법을 소개하겠습니다. 모든 분들께 도움이 되길 바랍니다!

일반적으로 로깅 시스템은 개발에 있어 중요한 부분입니다.

하지만 여러 가지 이유로 인해 프런트 엔드 개발에서는 로그 인쇄 및 보고 시스템을 수행하는 것이 일반적이지 않습니다.
그러나 어떤 특정한 경우에는 로깅 시스템이 놀라운 효과를 발휘하는 경우가 많습니다.

예를 들어 채팅 시스템에서 다음과 같은 문제가 발생했습니다.

• 음성 통화 중에 사용자가 소리를 들을 수 없었습니다.
• 인스턴트 메시징에서 사용자는 일부 시나리오에서 메시지를 보낼 수 없다고 보고했습니다.
• 인스턴트 메시지에서 A가 B의 메시지에 응답할 때 가끔 대화 상자가 표시되지 않는 경우가 있습니다
• 인스턴트 메시지에서 A가 B에게 두 개의 연속 메시지를 보낸 후 B는 두 번째 메시지를 받을 수 없습니다
• 인스턴트 메시지에서 음성 메시지를 보낼 때 , 사용자는 음성이 전송된 것으로 생각하지만 실제로는 녹음이 계속됩니다. 이때 사용자는 네트워크가 막혔다고 생각했고, 마침내 자신과 다른 사람이 말하는 목소리가 녹음된 것을 발견했습니다. 그러나 위의 오류는 백그라운드 인터페이스에 반영되지 않았습니다. 일부 사용자의 휴대폰 모델 문제와 함께 문제를 찾기가 어렵습니다.
여기에 log가 있으면 문제가 있는 코드를 빠르게 찾을 수 있습니다.

코드 문제가 아닌 경우에는 시스템 문제가 아니라는 답변을 사용자에게 더욱 자신있게 보내드리겠습니다.

미니 프로그램 사용 방법 로그 로깅 시스템

미니 프로그램 측은 두 가지 미니 프로그램을 제공합니다. 로그 로그 인터페이스: 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()

LogManager( 공통 로그 )🎜🎜RealtimeLogManager( 실시간 로그 )🎜🎜🎜공식에서는 둘 사이의 구체적인 차이점을 소개하지 않았습니다. 그러나 실시간 실시간 특성만을 강조했습니다. 🎜🎜제 생각에는 이들 사이의 가장 큰 차이점은 다음과 같습니다. 🎜🎜🎜LogManager는 사용자가 수동으로 보고한 문제이기 때문에 사용자에게 안심할 수 있습니다. . 🎜🎜RealtimeLogManager는 사용자가 모르는 사이에 문제 정보를 수집하고 사용자가 모르는 사이에 문제를 해결할 수 있어 개발자에게 더 친숙합니다. 🎜🎜🎜LogManager🎜🎜를 통해 애플릿에서 제공하는 <code>Log 로그 인터페이스 wx .getLogManager() 인스턴스를 가져옵니다. 🎜참고: 🎜🎜🎜최대 5M의 로그 콘텐츠를 저장할 수 있습니다. 5M을 초과하면 오래된 로그 콘텐츠가 삭제됩니다. 🎜🎜미니 프로그램의 경우 사용자는 button 구성 요소의 open-type="feedback"을 사용하여 인쇄된 로그를 업로드할 수 있습니다. 🎜🎜미니 게임의 경우 사용자는 wx.createFeedbackButton을 사용하여 인쇄된 로그를 업로드하는 버튼을 만들 수 있습니다. 🎜🎜개발자는 미니 프로그램 관리 백엔드 왼쪽 메뉴의 피드백 관리 페이지를 통해 관련 인쇄 로그를 볼 수 있습니다. 🎜🎜🎜LogManager 인스턴스 생성🎜🎜 wx.getLogManager()를 통해 로그 인스턴스를 가져올 수 있습니다. > . 🎜{ 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 之间，会聚合成一条日志上报
• 开发者可从小程序管理后台： 开发 -> 运维中心 -> 实时日志 进入小程序端日志查询页面

为了定位问题方便，日志是按页面划分的，某一个页面，在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安装方法 将会在该页面更新。
开放时间基于大家需求而定。

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

위 내용은 미니 프로그램의 Log 시스템에 대해 이야기하고, 어떻게 구축하고 사용하는지 살펴보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!