Rich Typescript Logger Decorators for Easy Coding

This article originally appeared on

How much time do you waste on writing logs for your functions? How many times do you change your function name and forget to change the name in the log message? How many time do you find yourself regretting that you didn’t add a log for knowing if the function was called?

NO MORE regrets, NO MORE forgets, NO MORE wasting time — just use the magical Typescript feature — Decorators.

In this article, we will review the rich logger decorators and their cool options. In the near future, I will publish another article in order to explain how to build decorators like these.

TL;DR

You can find the decorators in my GitHub and use them via . If you have further improvements, please make a pull request.

Installation

npm i rich-logger-decorator

Basic usage

In this example, we will use only the ClassLogger decorator in order to log all the class methods.

Basic example And the console looks like:

Basic example output

Mixed decorators and options

In this example, we use the ClassLogger and DiableMethodLogger decorators with the default options and the MethodLogger decorator with custom options.

Mixed example And the console looks like:

Mixed example output

@Logger decorator

The Logger is the main decorator. If we want to be precise, this is a decorator factory because this function is getting an argument and returns a function, but it is not the subject. The Logger decorator needs to be on top of the function you want to log. The log messages will be printed before the function will start and after the function will end. This decorator can get options which define the behavior of the flow and, eventually, affecting the log messages. When the options do not supply, the defaultFunctionLoggerOptions object is used by the decorator. The options are defined by the FunctionLoggerOptions interface.

FunctionLoggerOptions

This is the interface of the Logger decorator options argument.

Function logger options interface As you can see the interface contains some properties.

• withArgs — this property can be boolean or array of strings. When the value is false, the arguments and their values will not be a part of the log message. When the value is true, all the argument and their values will be a part of the log message. When the value is an array of strings, the arguments, that their names contained in the array, will be a part of the log message.
• withTime — when the value is true, the time will be a part of the log message.
• withClassProperties — when the value is true and the function is a method of a class, the class properties, and their values will be part of the log message. This option can be also an array of the properties names of the class (will behave like _withArgs_, just for class properties).
• logFunction —a function that replaces the traditional console.info. This function will be called with the log message at the start and the end of the original function.
• formatAndLogFunction — a function that gets the resulted string of the decorator flow and logs the customized message. This function gets the time, class name (if exist), function name, start/end log, strings array of the arguments and their values and strings array of the class properties and their values.

All of the options are optional.

DefaultFunctionLoggerOptions

defaultFunctionLoggerOptions is an object with default values for LoggerOptions. The default values are:

• withArgs — true
• withTime — true
• withClassProperties — false
• logFunction — the console.info function
• formatAndLogFunction —no default value. When the value doesn’t exist, the default behavior happened.

@ClassLogger decorator

The ClassLogger used by classes. When you put the decorator on top of the class definition, all the methods in the class are logged automatically. This is so convenient to put the decorator and watch the magic happened.

As the Logger decorator, the decorator can get options which define the behavior of the flow and eventually affects the log messages.When the options do not supply, the defaultClassLoggerOptions used by the decorator. The options are defined by the ClassLoggerOptions interface.

ClassLoggerOptions

This is the interface of the ClassLogger decorator options argument.

Class logger options interface As you can see the interface contains some properties.

• methodOptions —the options for the methods of the decorated class. Same as the options of the Logger function decorator.
• loggedMethodsNames — array of method’s names that being logged. When the option is undefined, all the class methods are logged.

All of the options are optional.

DefaultClassLoggerOptions

defaultClassLoggerOptions is an object with default values for ClassLoggerOptions. The default values are:

• methodOptions —same as defaultLoggerOptions of the function decorator.
• loggedMethodsNames — undefined (so all the class methods will be logged)

Additional decorators

For more convienient usage we will see two more decorators that make our life easier.

@DisableLogger decorator

When you are using the ClassLogger decorator (without the methods array option), all the class methods will be logged. In order to disable specific method for being logged, you can put the DisableLogger decorator before the method definition. This is a clearer way to prevent the logger behavior than the method array option, because of the second one restricts us to write the method name in the array.

@LoggerWithoutArgs decorator

This decorator is a syntactic sugar of the Logger decorator with withArgs option of false. Namely, the argument and their values will not be part of the log message. If other options will be provided, the decorator will use them, except for the withArgs option.

Conclusion

The decorators are available to use via the npm package. From now on, the logging feature is easy to use than ever. All you need is to use the rich-logger-decorator and that’s it. You can configure the decorator with the options and just coding… The next part of the article can be found .

You can follow me on or to read more about Angular, JavaScript and web development.