Electron-开发实践：本地日志

【前言】

使用electron开发好本地应用后，

本地日志记录必不可少，

这样可以通过日志获取用户操作信息以及定位bug等，

本地日志与实时性的埋点上报稍微有不同，

本地日志量更大，信息更全，且不是所有信息都时候上报。

【与nodejs本地日志的异同】

electron写本地日志和nodejs写本地日志类似，

如果想自己封装，可以参考这篇文章： Node.js-WebServer开发实践：本地日志

不同点是

1. 初始化logger的时机

2. 渲染进程日志通过ipc传到主进程后记录到本地

【qiao-x-logger】

封装了一个npm包，欢迎使用： https://code.insistime.com/#/qiao-x-logger

初始化

建议在尽量早的时机初始化，这样可以记录更多的日志信息，

例如在electron入口js中第一行初始化，

// init
import { initLogger } from 'qiao-x-logger';

// init logger
const loggerPath = path.resolve(app.getPath('logs'), './electron.log');
initLogger(loggerPath);

主进程使用

主进程使用比较简单，如下

// logger
import { Logger } from 'qiao-x-logger';
const logger = Logger('sips.js');

logger.info('iconutil', 'success');

渲染进程使用

渲染进程使用需要通过ipc将日志传递到主进程后记录

1. 初始化主进程ipc监听

// log ipc
import { logIPCInit } from 'qiao-x-logger';

logIPCInit();

2. preload相关代码

log-preload.js

// electron
import { ipcRenderer } from 'electron';

/**
 * logIPC
 * @param {*} msg
 * @param {*} type debug,info,warn,error
 */
export const logIPC = (msg, type) => {
  ipcRenderer.send('ipc-log', { msg, type });
};

preload.js

// electron
import { contextBridge } from 'electron';

// custom preload
import { logIPC } from './log-preload.js';

// preload
contextBridge.exposeInMainWorld('electron', {
  logIPC,
});

3. 渲染进程使用

window.electron.logIPC(`selectPngPath filePath ${filePath}`, 'info');

【效果】

写日志后会在logPath下生成日志文件，并按小时分割日志文件，

输出效果如下：