Initialize the logger in a renderer process

Previously in v4, the logger instances worked independently in main and renderer processes. But currently, there are a lot of restrictions for code in a renderer processes by default. So now all the logic performed in the main process. A logger in the renderer processes just collects the data and sends it to the main process through IPC.

There are a few ways how a renderer logger could be configured.

1. Most common case. Use some bundler and contextIsolation/sandbox enabled

import log from 'electron-log/main';

log.initialize();

renderer.ts

import log from 'electron-log/renderer';

log.info('Log from the renderer');

This method injects a built-in preload script into a renderer process through sessions. The preload script is injected into the default session and any sessions created after a log.initialize() call.

Using custom sessions

If you use another session, make sure it's initialized after log.initialize() call or pass your sessions to the function:

log.initialize({ getSessions: () => [customSession] });

To disable preload script injection, pass includeFutureSession: false option to the initizlize function.

2. Inject preload code manually

Instead of calling log.initialize(), you can inject the preload script manually. Add the import inside your preload script:

import 'electron-log/preload';

3. Use window.__electronLog with isolated context without bundling

main.js

import log from 'electron-log/main';

log.initialize();

renderer.js

__electronLog.info('Log from the renderer');

Please be aware that __electronLog global variable only exposes log functions, no errorHandler, scope and other members.

4. Spy on console.log calls

It's possible to collect logs written by console.log in the renderer process

main.js

import log from 'electron-log/main';

// It makes a renderer logger available trough a global electronLog instance
log.initialize({ spyRendererConsole: true });

After that, any console call from a renderer will be processed in the main process. But in that case, it's not possible to log object. For example, when console.log('test', { a: 1 }) is called in a renderer, test [Object] is received on the main side.

5. Using IPC directly

Starting from electron-log v5, an electron-log IPC call has a constant signature. So you can call it directly if you don't want to use a renderer-side logger instance for some reason:

import { ipcRenderer } from 'electron';

ipcRenderer.send('__ELECTRON_LOG__', {
  // LogMessage-like object
  data: ['Log from a renderer'],
  level: 'info',
  variables: { processType: 'renderer' },
  // ... some other optional fields like scope, logId and so on
});

When context isolation is enabled or nodeIntegration is disabled, which is the default WebContext state in Electron, this code only works in a preload script. Otherwise, it can be used in a renderer code as well.