electron 日志接入

接入方案

第三方开源库 + 二次开发

考虑到技术的成熟性、稳定性、效率，采用第三方成熟的开源库是比较好的方案。

而在众多 npm 包中，electron-log 的匹配度、更新时间与下载量以碾压态比下了其他的第三方库。

从功能上评估，electron-log 提供了本地日志写入与远端日志上报功能，在主要功能上是满足需求的。

虽然第三方库提供的功能较为齐全，但是这并不能避免后续会产生其他的定制，因此，最理想的方案是基于第三方开源库二次开发。

但是在实施上，可以先接入 electron-log，后期不修改日志记录方式的基础上，做个性化，完成后只需要替换包即可。

下面，先熟悉 electron-log 的基础，以该套成熟方案作为基石。

从官网 electron-log 官方包说明上得知，electron 13以下的版本需使用4.x及以下的版本，反之推荐使用5.x的版本，因此这里取4.4.8版本的 electron-log

接入实例

1、安装依赖包

yarn add electron-log@^4.4.0 or npm i electron-log@^4.4.0

2、编辑基本日志配置

logger.ts

import { app } from 'electron'
import logger from 'electron-log'
const path = require('path')

const useLogger = (isDevelopment: boolean) => {
  /**
   * @desc app 启动时的时间
   * @example 若 app 在前一天打开，一直运行到第二天，第二天的日志将存储在前一天
   */
  const appRunDate = new Date()
  /**
   * @desc 日志文件名
   * @example {date}.log
   */
  const logFileName = `${appRunDate.getFullYear()}-${appRunDate.getMonth() + 1}-${appRunDate.getDate()}.log`

  /**
   * @desc 日志文件位置
   * @example macOS: ~/Library/Logs/{appName}/{appVersion}/{date}.log
   * @example Windows: %USERPROFILE%\AppData\Roaming\{appName}\logs\{appVersion}\{date}.log
   */
  const logFilePath: string = path.resolve(app.getPath('logs'), app.getVersion(), logFileName)

  logger.transports.console.format = '[{y}-{m}-{d} {h}:{i}:{s}.{ms}] [{level}]{scope} {text}' // 设置日志内容格式

  logger.transports.file.level = isDevelopment ? 'silly' : 'verbose' // 配置 silly 时表示所有日志都写入文件
  logger.transports.file.maxSize = 10 * 1024 * 1024 // 最大不超过10M
  logger.transports.file.fileName = logFileName
  logger.transports.file.resolvePath = () => logFilePath

  logger.verbose('Logger is ready');
}

export default useLogger

3、接入到 main 线程

background.ts

import useLogger from '@/main/logger'

const isDevelopment = process.env.NODE_ENV !== 'production'

useLogger(isDevelopment)

该文件对应主线程，在主线程中，仅需添加一个引用即可

4、接入 renderer 线程

src/preload.ts

const log = require('electron-log')

window.log = log.functions

首先添加 preload 文件

vue.config.js

module.exports = defineConfig({
  pluginOptions: {
    electronBuilder: {
      preload: 'src/preload.ts',
    }
  }
}

其次，为了能解析 preload 文件，添加如上配置

methods.ts

config.webPreferences = {
  preload: path.resolve(__dirname, 'preload')
}

最后，在创建窗口时，将 preload 文件进行加载

至此，整个接入就完成了

日志输出载体

这里的日志输出载体主要分为几种：控制台、文件、远端

1、控制台

main线程和renderer线程的日志在其对应的控制台查看

可以通过 logger.transports.console 对其进行配置

2、文件

记录日志到文件

可以通过 logger.transports.file 对其进行配置

3、远端

记录日志到远端

可以通过 logger.transports.remote 对其进行配置

这里远端暂时先不配置，后续迭代再接入

日志格式化

模版

1、内置模版变量

官方提供了模版变量供使用

Name	Value
level	Logging level
text	Serialized log message
processType	browser or renderer
y	Year
m	Month
d	Day
h	Hour
i	Minute
s	Second
ms	Millisecond
z	Timezone offset
iso	date.toISOString()

2、自定义变量

若官方变量无法满足，也可以自定义

log.variables.label = 'dev';
log.transports.console.format = '[{h}:{i}:{s}.{ms}] [{label}] {text}';

函数

另外，官方还提供了函数的方式来进行格式化

log.transports.console.format = (message) => {
  return util.format.apply(util, message.data);
}

格式

这里定义格式为：[{y}-{m}-{d} {h}:{i}:{s}.{ms}] [{level}]{scope} {text}

日志文件位置

这里，直接取 app.getPath('logs')，该路径在 macOS 代表~/Library/Logs/{appName}/{appVersion}/{date}.log，在 Windows为%USERPROFILE%\AppData\Roaming\{appName}\logs\{appVersion}\{date}.log

日志等级

error、warn、info、verbose、debug、silly

以上等级，从左到右依次降低。配置某等级的报错时，只有高于或等于该等级的报错才会被记录或上报

silly 等级最低，一般用于表示只需要在控制台打印，但不需要写入文件的日志（需配置）

此外，官方也提供了自定义等级的方法