【Electron + Vue】使用log4js

0. 背景

Electron 的结构中包含两种类型的进程：主进程和渲染器进程。通过源码运行项目时，在主进程中使用 console.log() 打印的信息会被输出到运行项目的终端窗口中，而渲染器进程的内容则会显示在网页开发者工具的控制台里。希望能统一到一个地方来显示日志。

而且，有时候用 console.log() 会用得比较随意。所以还是想有一个专门的日志工具，使用它提供的功能。

1. 安装

可以使用 yarn 安装：

yarn add log4js

2. 引入

无论是在主进程还是渲染器进程使用 log4js，都希望日志能显示到同一个地方。这可以通过进程间通信（IPC）来实现，需要用到预加载（preload）脚本。

首先，可以先为 log4js 创建一个专门的文件 src/utils/log.js，设计相关的接口：

const log4js = require('log4js');

const getLogger = (category, level = 'all') => {
    const logger = log4js.getLogger(category);
    logger.level = level;
    return logger;
};

export const trace = (event, category, message) => {
    getLogger(category).trace(message);
};


export const debug = (event, category, message) => {
    getLogger(category).debug(message);
};


export const info = (event, category, message) => {
    getLogger(category).info(message);
};


export const warn = (event, category, message) => {
    getLogger(category).warn(message);
};


export const error = (event, category, message) => {
    getLogger(category).error(message);
};


export const fatal = (event, category, message) => {
    getLogger(category).fatal(message);
};


export const mark = (event, category, message) => {
    getLogger(category).mark(message);
};

然后，在 src/main.js 文件中引入这些接口：

+import {debug, error, fatal, info, mark, trace, warn} from "./utils/log";
 
 // ...
 
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
-app.on('ready', createWindow);
+app.on('ready', () => {
+  ipcMain.on('log4js:trace', trace);
+  ipcMain.on('log4js:debug', debug);
+  ipcMain.on('log4js:info', info);
+  ipcMain.on('log4js:warn', warn);
+  ipcMain.on('log4js:error', error);
+  ipcMain.on('log4js:fatal', fatal);
+  ipcMain.on('log4js:mark', mark);
+
+  createWindow();
+});

之后便可通过预加载脚本 src/preload.js 将接口暴露给渲染器进程：

// See the Electron documentation for details on how to use preload scripts:
// https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('getLogger', {
    trace: (category, message) => ipcRenderer.send('log4js:trace', category, message),
    debug: (category, message) => ipcRenderer.send('log4js:debug', category, message),
    info: (category, message) => ipcRenderer.send('log4js:info', category, message),
    warn: (category, message) => ipcRenderer.send('log4js:warn', category, message),
    error: (category, message) => ipcRenderer.send('log4js:error', category, message),
    fatal: (category, message) => ipcRenderer.send('log4js:fatal', category, message),
    mark: (category, message) => ipcRenderer.send('log4js:mark', category, message),
});

这样在主进程和渲染器进程中就都可以调用同样的日志接口了。

3. 使用

3.1 主进程

例如有一个被主进程使用的 src/utils/syscall.js 文件，其中有个 ping() 方法，调用时想要记录一下日志：

+import {info} from "./log";
+
 const util = require('util');
 const exec = util.promisify(require('child_process').exec);
 
 export const ping = (event, target) => {
     const ipv4Pattern = /((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}/;  // IPv4
     const domainNamePattern = /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/;       // 域名
 
     if ((!ipv4Pattern.test(target)) && (!domainNamePattern.test(target))) {
         return Promise.reject(new Error(
             target.toString() + ' is neither a valid IPv4 address nor a valid domain name.'
         ));
     }
 
+    info(null, 'syscall.js', `ping ${target}`);
     return exec('ping ' + target);
};

控制台中会打印出：

[2024-03-26T11:55:46.850] [INFO] syscall.js - ping 127.0.0.1

3.2 渲染器进程

假设有个 src/components/SampleComponent.vue 文件要记录日志：

 await window.syscall.ping(form.ip).then(() => {  // ping 目标地址
+    window.getLogger.info('SampleComponent.vue', `ping ${form.ip} success`);
     // ...
 }).catch((error) => {
+    window.getLogger.error('SampleComponent.vue', error.message);
     // ...
 });

控制台会显示：

[2024-03-26T11:55:49.957] [INFO] SampleComponent.vue - ping 127.0.0.1 success
[2024-03-26T11:57:22.315] [ERROR] SampleComponent.vue - Error invoking remote method 'ping': Error: Command failed: ping 0.0.0.0

4. 配置

要修改 log4js 的配置，可以修改 src/utils/log.js 文件中 getLogger() 方法的内容。例如在将日志输出到控制台同时保存到文件。

-const getLogger = (category, level = 'all') => {
-    const logger = log4js.getLogger(category);
-    logger.level = level;
-    return logger;
+const getLogger = (category, level = 'info') => {
+    log4js.configure({
+        appenders: {
+            console: { type: 'console' },
+            dateFile: {
+                type: 'dateFile',
+                filename: 'logs/log.log'
+            }
+        },
+        categories: {
+            default: { appenders: ['console', 'dateFile'], level: level }
+        }
+    });
+    return log4js.getLogger(category);
 };