استفاده از console.log را متوقف کنید و از این سرویس استفاده کنید!

Summarize this content to 400 words in Persian Lang
ورود به سیستم بخشی ضروری از هر فرآیند توسعه نرم افزار است. این به توسعه دهندگان کمک می کند تا برنامه ها را اشکال زدایی کنند، گردش کار را درک کنند و مسائل را ردیابی کنند. با این حال، تنها با تکیه بر console.log برای ورود به یک برنامه Angular می تواند به سرعت مشکل ساز شود، به خصوص در هنگام انتقال از محیط های توسعه به محیط های تولید.

در این مقاله یک سرویس لاگ را معرفی می کنم که به راحتی می تواند در برنامه Angular شما ادغام شود. این سرویس به شما این امکان را می دهد که سطح گزارش را بر اساس پیکربندی محیط کنترل کنید و اطمینان حاصل کنید که گزارش دقیق در طول توسعه در دسترس است اما در تولید به حداقل رسیده یا غیرفعال شده است.

استفاده كردن console.log عبارات پراکنده در سرتاسر پایگاه کد شما می تواند به چندین مشکل منجر شود:

مسائل مربوط به عملکرد: ورود بیش از حد در تولید می تواند عملکرد را کاهش دهد.
خطرات امنیتی: اطلاعات حساس ممکن است ثبت شده و در معرض دید قرار گیرند.
کلفت: گزارش‌ها می‌توانند به سرعت به هم ریخته شوند و پیدا کردن اطلاعات مرتبط را دشوار کند.

با استفاده از یک سرویس گزارش ساختاری، می توانید این مشکلات را کاهش دهید و کنترل بیشتری بر روی مواردی که ثبت می شود و چه زمانی ثبت می شود، داشته باشید.

در اینجا یک سرویس ورود به سیستم ساده اما موثر برای برنامه Angular شما آورده شده است. از یک سطح گزارش شمارش شده برای کنترل اینکه چه پیام هایی بر اساس پیکربندی محیط فعلی ثبت می شوند، استفاده می کند.

ابتدا یک شمارش برای سطوح مختلف گزارش تعریف می کنیم:

export enum LogLevel {
info,
error,
warn,
debug,
all,
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بعد، ما ایجاد می کنیم LogService که از این enum برای ثبت مشروط پیام ها استفاده می کند:

import { Injectable } from “@angular/core”;
import { environment } from “../../environments/environment”;
import { LogLevel } from “../models/log.interface”;

@Injectable({
providedIn: “root”,
})
export class LogService {
constructor() {}

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

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

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

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

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

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

warn(message?: any, …optionalParams: any\[\]) {
if (environment.logLevel >= LogLevel.warn) {
console.warn(…\[message, …optionalParams\]);
}
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در نهایت، ما محیط ها را برای استفاده از سطوح مختلف گزارش پیکربندی می کنیم:

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

// environment.prod.ts (Production)
export const environment = {
production: true,
logLevel: LogLevel.info
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

برای شروع استفاده از LogService، آن را به اجزا یا خدمات خود تزریق کنید:

import { Component, OnInit } from ‘@angular/core’;
import { LogService } from ‘./services/log.service’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: \[‘./app.component.css’\] })
export class AppComponent implements OnInit {
constructor(private logService: LogService) {}

ngOnInit() {
this.logService.info(‘Application initialized’);
this.logService.debug(‘Debugging information’);
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

با استفاده از این LogService، می توانید کنترل بهتری بر خروجی ورود به سیستم خود داشته باشید و اطمینان حاصل کنید که گزارش های دقیقی در توسعه دارید و در عین حال محیط تولید خود را تمیز و کارآمد نگه می دارید. این رویکرد نه تنها قابلیت نگهداری برنامه شما را افزایش می دهد، بلکه به رعایت بهترین شیوه ها برای ورود به سیستم توسعه نرم افزار کمک می کند.

دست از پراکندگی بردارید console.log امروز در کد خود بیان کنید و از یک سرویس ورود به سیستم ساخت یافته برای برنامه ای قوی تر و قابل مدیریت استفاده کنید!

export enum LogLevel {  
  info,  
  error,  
  warn,  
  debug,  
  all,  
}

import { Injectable } from "@angular/core";  
import { environment } from "../../environments/environment";  
import { LogLevel } from "../models/log.interface";  

@Injectable({  
  providedIn: "root",  
})  
export class LogService {  
  constructor() {}  

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

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

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

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

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

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

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

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

// environment.prod.ts (Production)  
export const environment = {  
  production: true,  
  logLevel: LogLevel.info  
};

import { Component, OnInit } from '@angular/core';  
import { LogService } from './services/log.service';  

@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: \['./app.component.css'\]  
})  
export class AppComponent implements OnInit {  
  constructor(private logService: LogService) {}  

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