In this article, we will see how to do Client-Side Logging and Server Side Log-back in an Angular application. We all enable the logging in our application to understand the behavior of the application and to debug unexpected issues or simply tracking events. In the production environment, we can’t debug issues without proper log files as they become the only source of information to debug some intermittent or unexpected errors.

Advantages of Using Loggers

  • Information at Class Level
  • What timestamp
  • Which user
  • Filename
  • Separate log files for different components.
  • Log levels (like DEBUG, ERROR, WARN, INFO) which can be very handy when you want to track the path followed by your program or log queries, etc.

In this article, we are going to use ngxLogger to achieve logging and log-back in the angular application. First, we need to install the ngxLogger by running the below command at the root of our angular application.

Once installed, we need to do the configuration of the ngxLogger in our application. For that, we will be doing the below entries in the app.module.ts file –

This is the configuration part for enabling the logging in our application. Let us understand the meaning of each configuration did for ngxLogging.

  • LoggerModule.forRoot – We have added the logger module at the root of our application. Now, every exported class, components, services, etc. are available throughout the application and we can use it.
  • serverLoggingUrl – This is need to specify the endpoint where we need to post the logs from the angular application. It can be a URL or if you are using a proxy then it can be the endpoint as well.
  • level – The level defines the logs configuration level which we need to print on the browser’s console. This level can be DEBUG, ERROR, WARN, or INFO, etc. If the value is set as OFF, It will disable the browser’s console logs.
  • serverLogLevel – This level defines the log configuration level which we need to post to the backend service or any API which is consuming the logging information. This level can be DEBUG, ERROR, WARN, or INFO, etc. If the value is set as OFF, It will disable the server level logs.


Now, we will see the usage of the Logger at the component level.

Here, we have injected the NGXLogger in the component. This service class provides us different methods by which we can generate the logs and also we can update the logging configurations. Whenever this component will get loaded, it will simply log the information in the browser’s console as well as it can post the logging information to the backend server.

Updating Configuration

We can also change the configuration at the component or service level with the help of updateConfig method of NGXLogger. This will help us to do some configuration change other than the root level and help us to achieve the dynamic behavior of the logging.

Request Payload

The payload body of the request is of type NGXLogInterface. 

code screenshot - requesting payload NGXLogInterface

Request Payload.

Logs at the Browser’s Console

[WDS] Live Reloading enabled. 2020-06-17T13:17:32.526Z DEBUG [main.js:213] / loggingApi/logging/getData code screenshot

Logging Using Interceptor

We can also achieve the logging at Interceptor so that whenever there is any request or response coming from the backend server, we can trace that as well and this will help us to identify the flow of the user’s request.

With the above code block, we can achieve the logging at the interceptor and keep a track of all the requests and response if needed.

A working example of this code is available at the GitHub.

Source link

Write A Comment