Angular 15 – Server-Side Logging with ngx-logger Tutorial

Logging is an essential part of any software application, as it provides valuable insights into the application’s behavior and helps developers diagnose and fix issues. While client-side logging can be helpful, server side logging is equally important, as it provides a more complete picture of what is happening in the application.

In Angular applications, the ngx-logger library provides a convenient way to log messages both on the client and server side. While client-side logging can be useful for debuging purposes during development, server-side logging is essential for production applications. In this article, we will explore the benefits of server-side logging with ngx-logger in Angular applications.

Why is Server-Side Logging Important?

Server-side logging provides a centralized location to store log messages and allows developers to easily monitor and analyze application behavior. When an issue arises, developers can quickly search through the logs to identify the source of the problem and take the necessary steps to resolve it. Additionally, server-side logging can help developers to identify patterns in application behavior that may not be immediately obvious from client-side logs.

Server-side logging can also be useful for compliance and auditing purposes, as it provides a record of application activity that can be reviewed by security and compliance teams. This can help organizations meet regulatory requirements and demonstrate that they are following best practices for data security and privacy.

How to Add Client and Server Side Logger Service in Angular App?

Step 1 – Create a new Angular application using the Angular CLI:

ng new ngx-logger-example

Step 2 – Install ngx-logger and its dependencies:

npm install ngx-logger --save
npm install @types/webpack-env --save-dev

Step 3 – Import LoggerModule from ngx-logger in the app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LoggerModule } from 'ngx-logger';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    LoggerModule.forRoot({
      serverLoggingUrl: '/api/logs',
      level: NgxLoggerLevel.DEBUG,
      serverLogLevel: NgxLoggerLevel.ERROR
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 4 – Use the LoggerService in the app.component.ts file:

import { Component } from '@angular/core';
import { Logger } from 'ngx-logger';

@Component({
  selector: 'app-root',
  template: '<h1>Hello, World!</h1>'
})
export class AppComponent {
  constructor(private logger: Logger) {
    this.logger.debug('Debug message');
    this.logger.info('Info message');
    this.logger.warn('Warn message');
    this.logger.error('Error message');
  }
}

Step 5 – Start the application and open the browser and navigate to http://localhost:4200/. Open the developer console to see the log messages.

ng serve

Now you have an Angular application that uses ngx-logger. You can customize the log level and server logging settings in the forRoot() method in the app.module.ts file.

Here are other examples to switch logger level of using ngx-logger:

import { Component } from '@angular/core';
import { Logger, NgxLoggerLevel } from 'ngx-logger';

@Component({
  selector: 'app-root',
  template: '<h1>Hello, World!</h1>'
})
export class AppComponent {
  constructor(private logger: Logger) {
    // Change log level
    this.logger.updateConfig({
      level: NgxLoggerLevel.DEBUG
    });

    // Log objects
    this.logger.debug('Debug message', { foo: 'bar' });
    this.logger.info('Info message', { baz: 'qux' });
    this.logger.warn('Warn message', { quux: 'corge' });
    this.logger.error('Error message', { grault: 'garply' });
  }
}

How I can switch to using the server log?

To switch from using client-side logging to server-side logging with ngx-logger, you need to do the following:

Set the serverLoggingUrl property in the forRoot() method in the app.module.ts file to the URL of your server-side logging endpoint:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LoggerModule, NgxLoggerLevel } from 'ngx-logger';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    LoggerModule.forRoot({
      serverLoggingUrl: '/api/logs',
      level: NgxLoggerLevel.DEBUG,
      serverLogLevel: NgxLoggerLevel.ERROR
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

We set the serverLoggingUrl property to '/api/logs'. Replace this value with the URL of your server-side logging endpoint.

Set the serverLogLevel property to the minimum log level that you want to send to the server:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LoggerModule, NgxLoggerLevel } from 'ngx-logger';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    LoggerModule.forRoot({
      serverLoggingUrl: '/api/logs',
      level: NgxLoggerLevel.DEBUG,
      serverLogLevel: NgxLoggerLevel.ERROR
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

In this example, we set the serverLogLevel property to NgxLoggerLevel.ERROR. This means that only log messages with a severity of ERROR or higher will be sent to the server. You can change this value to any of the log levels provided by ngx-logger: TRACE, DEBUG, INFO, WARN, ERROR, or FATAL.

Inject the LoggerService in your components and use the logging methods as usual:

import { Component } from '@angular/core';
import { Logger } from 'ngx-logger';

@Component({
  selector: 'app-root',
  template: '<h1>Hello, World!</h1>'
})
export class AppComponent {
  constructor(private logger: Logger) {
    this.logger.debug('Debug message');
    this.logger.info('Info message');
    this.logger.warn('Warn message');
    this.logger.error('Error message');
  }
}

In above example, we use the LoggerService in the AppComponent and log messages using the debug(), info(), warn(), and error() methods. These messages will be sent to the server-side logging endpoint that we set up in the forRoot() method.

Conclusion

In conclusion, server-side logging with ngx-logger is an essential tool for monitoring and analyzing the behavior of Angular applications in production envronments. By providing a centralized location for log messages, server-side logging helps developers quickly diagnose and resolve issues, identify patterns in applcation behavior, and meet compliance and auditing requirements. With ngx-logger, it is easy to configure server-side logging in Angular applications, making it an indispensable tool for any development team.