DEV Community

Nhan Nguyen
Nhan Nguyen

Posted on

7

Simple Angular Log Service

Logging is an essential part of any software development process.

It helps developers debug applications, understand workflows, and track down issues.

In this article, I would like to introduce a simple logging service that can be easily integrated into our Angular application.

It uses an enumerated log level to control what messages are logged based on the current environment configuration.

Log Levels Enum

export const LOG_LEVEL = {
  info: 1,
  error: 2,
  warn: 3,
  debug: 4,
  all: 5,
} as const;
Enter fullscreen mode Exit fullscreen mode

Environment Configuration

// environment.ts (Development)
export const environment = {
  production: false,
  logLevel: LOG_LEVEL.debug
};

// environment.prod.ts (Production)
export const environment = {
  production: true,
  logLevel: LOG_LEVEL.info
};
Enter fullscreen mode Exit fullscreen mode

Log Service

export class LogService {
  log(message?: any, ...optionalParams: any[]) {
    if (environment.logLevel >= LOG_LEVEL.debug) {
      console.log(...[message, ...optionalParams]);
    }
  }

  table(message?: any, ...optionalParams: any[]) {
    if (environment.logLevel >= LOG_LEVEL.debug) {
      console.table(...[message, ...optionalParams]);
    }
  }

  trace(message?: any, ...optionalParams: any[]) {
    if (environment.logLevel >= LOG_LEVEL.debug) {
      console.trace(...[message, ...optionalParams]);
    }
  }

  error(message?: any, ...optionalParams: any[]) {
    if (environment.logLevel >= LOG_LEVEL.error) {
      console.error(...[message, ...optionalParams]);
    }
  }

  debug(message?: any, ...optionalParams: any[]) {
    if (environment.logLevel >= LOG_LEVEL.debug) {
      console.debug(...[message, ...optionalParams]);
    }
  }

  info(message?: any, ...optionalParams: any[]) {
    if (environment.logLevel >= LOG_LEVEL.info) {
      console.info(...[message, ...optionalParams]);
    }
  }

  warn(message?: any, ...optionalParams: any[]) {
    if (environment.logLevel >= LOG_LEVEL.warn) {
      console.warn(...[message, ...optionalParams]);
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

And how to Use the Log Service

To start using the LogService, just inject it into our components or services like this:

export class AppComponent implements OnInit {
  private logService = inject(LogService);

  ngOnInit() {
    this.logService.info('Application initialized');
    this.logService.debug('Debugging information');
  }
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

By using this LogService, we can gain better control over your logging output, ensuring that we have detailed logs in development while keeping our production environment clean and efficient.


I hope you found it helpful. Thanks for reading. 🙏

Let's get connected! You can find me on:

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (1)

Collapse
 
jangelodev profile image
João Angelo

Hi Nhan Nguyen,
Top, very nice and helpful !
Thanks for sharing.

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay