Let your electron application print logs like java

Let your electron application print logs like java

Logs are a good help for finding bugs. On web pages, logs are generally rarely printed. When printing is required, some abnormal monitoring platforms (such as sentry) can also be used to upload logs to the server in time. Due to the huge number of users and various restrictions, this collection method is often not used to collect a large number of logs. But in electron, we can choose to use libraries (such as log4js) to cache logs locally, just like the traditional back-end. When the client encounters an error, it can inform the client to actively upload the log.

However, we often use many frameworks for development now, we need to use webpack to build, and inevitably need to confuse compression and other functions when building. At this time, the log printed by log4js cannot reflect the source file information, which brings trouble to troubleshooting.

Log printed by java:

01:50:39.633 INFO com.glmapper.spring.boot.controller.HelloController - test
 


The log printed by log4js:

01:50:39.633 INFO logger-name - test
 

When we build front-end projects, we will inevitably use babel, and babel also provides its plugins with the ability to access and modify the syntax tree. Therefore, we can make a babel plug-in to find the logger function by accessing the syntax tree; then set the file information as the first parameter of the logger function by modifying the form of the syntax tree. This is how babel-plugin-logger-source is implemented.

babel-plugin-logger-source

effect

//src/view/app.js
class App() {
    constructor() {
        logger.log('test')//line no 20,column no 10
    }
}
           
class App() {
    constructor() {
        logger.log('[s.V/app.js (20:10)]', 'test')
    }
}
 

How to use

babel-plugin-logger-source is a babel plugin, all you need to add to babelrc after installation.
installation:

yarn add babel-plugin-logger-source -D
 
npm install babel-plugin-logger-source -S -D
 

Configuration:

//babel.config.js
module.exports = {
  plugins: [
  	[ loggerSource  ],
  ]
};

 

Available configurations

babel-plugin-logger-source supports logger.info,logger.log,logger.warn,logger.error,logger.debug injecting parameters into functions by default . It can also be modified through configuration, and at the same time, prefixes can be added before the file information, and the file information generation method can be customized.

{
  "plugins": [
    ["logger-source",{
      logger: string[];//logger 
			prefix: string;// 
			resolveFileName: Function | 'acronyms' | 'fullpath';//
		}]
  ]
}
 

logger


Append file information for the specified function.
default:

logger:[
	'logger.log',
	'logger.info',
	'logger.wran',
	'logger.error',
	'logger.debug',
]
 

prefix


Add a prefix before the file information.
Such prefix:crm-clientas: .

logger.info('test');
           
logger.info('crm-client [s.V/app.js (20:10)]', 'test')
 

resolveFileName


The way to output file information. The fullpathand acronymsmethods are provided, which are the default acronyms.

acronyms

abbreviation

//src\\View/app.js

logger.info('test');
           
logger.info('[s.V/app.js (20:10)]', 'test')
 

fullpath

Full path

//src\\View/app.js

logger.info('test');
           
logger.info('[s.V/app.js (20:10)]', 'test')
 
//src\\View/app.js

logger.info('test');
           
logger.info('[src\\View\\app.js (2:10)]', 'test')
 

Custom function

((params: ResolveFileNameParams) => string)
Custom function, pass parameters as follows:

params: {
  filename: string; //
  projectPath: string; //
  prefix: string; //babelrc 
  line: number; //
  column: number; //
}
 


Such as:

{
  plugins: [
    [
      'logger-source',
      {
        resolveFileName: function (params) {
          return params.filename;
        },
      },
    ],
  ],
};
 


Thank you for reading, and welcome suggestions and issues. If it feels good, welcome to star.