Implementando un registro remoto de logs con Angular

Si estás desarrollando una apliación con Angular y quieres hacer un registro remoto de los logs para que sean explotados por un sistema BELK, este es tu tutorial.

Índice de contenidos

• 1. Introducción
• 2. Para empezar
• 3. Configuración por entorno
• 4. Cosas a considerar
• 5. Conclusiones

1. Introducción

Como desarrollador que responde por cada línea de código que escribe, has decidido implementar un sistema de registro en su proyecto Angular.¡Bien hecho! Con esta biblioteca, puede implementar fácilmente un sistema de registro confiable con una configuración mínima que le sirva bien. NGX-logger actualmente admite las versiones Angular 6.x y 7.x

El sistema NGX-logger ofrece actualmente las siguientes características:

1. Indicación de ubicación de registro y número de línea
2. Envío de mensajes de registro a su punto final de backend como solicitudes POST
3. Manera de controlar su nivel de registro basado en el entorno actual
4. Habilitar / deshabilitar el registro de la consola del lado del cliente
5. Pretty print en consola.

2. Para empezar

Teniendo en cuenta que está implementando este registrador por primera vez, le sugiero que comience un nuevo proyecto para que puede jugar un poco con él en un campo limpio 🙂

$> ng new logger-test-project

El primer paso para comenzar es instalar el paquete usando el siguiente comando

$> npm install --save ngx-logger

El segundo paso es importar la biblioteca en el módulo raíz (app.module.ts) de su aplicación

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

Veamos qué hace esta configuración línea por línea.

• serverLoggingUrl – es la ruta completa de su punto final de back-end donde ngx-logger intentará publicar los registros. Entonces, si no necesita mantener los registros en su servidor para algunos propósitos, no dude en eliminar esta línea.
• level – Define el nivel de registro mínimo en la consola del navegador. Los niveles disponibles son: TRACE, DEBUG, INFO, LOG, WARN, ERROR, FATAL y OFF. La mayoría de estos valores provienen de NgxLoggerLevelclass. Por ejemplo, si configuramos el nivel en ERROR, eso significa que solo se registrará el nivel de error o superior.
• serverLogLevel – define el nivel de registro mínimo para el registro del lado del servidor. Por ejemplo, si ajustamos el nivel a ERROR, eso significa que solo el nivel de error y superior se enviarán al servidor.
• disableConsoleLogging – Indicador realmente útil que activa / desactiva el registro de la consola global cuando es necesario.

Después de que tengamos la configuración necesaria, podemos implementar algunos registros para realizar pruebas. Debemos agregar el siguiente código en el módulo principal de nuestro proyecto para que podamos generar los registros en el inicio de la aplicación.

constructor(private logger: NGXLogger) {
     this.logger.debug("Debug message");
     this.logger.info("Info message");
     this.logger.log("Default log message");
     this.logger.warn("Warning message");
     this.logger.error("Error message");
}

Después de ejecutar la aplicación podemos ver lo siguiente en la consola del navegador:

Podemos ver los mensajes de registro que hemos declarado en el constructor y también podemos ver algunos otros errores relacionados con el registro del lado del servidor. Esto se debe a que hemos declarado que los registros del lado del servidor deben enviarse a /api/logs endpoint, que no tenemos desarrollado.

3. Configuración por entorno

A veces, debemos considerar registrar solo errores en el entorno de producción y eliminar otros niveles y al mismo tiempo mantener todos los niveles de registro habilitados.

Si tenemos que cambiar manualmente la configuración cada vez que cambiemos de entorno, es fácil que cometamos errores y perdamos mucho tiempo.

Para solventar esto, la librería tiene la posibilidad de cambiar la configuración por entorno.

Para ello tenemos que agregar una dependencia de entorno en nuestro app.component.ts . Esta dependencia nos permitirá leer la configuración especificada en los «environments» de Angular. Luego reemplazamos la configuración de registro para usar variables de entorno.

import { environment } from 'src/environments/environment';
 
@NgModule({
   imports: [ 
     BrowserModule,
     FormsModule,
     LoggerModule.forRoot({
        serverLoggingUrl: `${environment.apiUrl}api/logs`,
        level:environment.logLevel,
        serverLogLevel: environment.serverLogLevel,
        disableConsoleLogging: false
      })
      ],declarations: [AppComponent],
        bootstrap: [AppComponent]
   })
   export class AppModule { }

Por defecto, hay dos entornos en una aplicación Angular: desarrollo y producción. Normalmente, el entorno de desarrollo utiliza environment.ts y el entorno de producción utiliza environment.prod.ts estos archivos están bajo la carpeta src/environment. Lo importante, para evitar errores de ejecución, es que los dos archivos definan las mismas propiedades de entorno, proporcionando el valor adecuado al entorno. De forma que ahora la configuración tendrá en cuenta el «environment» de Angular.

import { NgxLoggerLevel } from 'ngx-logger';

export const environment = {
    production: false,
    apiUrl: 'http://localhost:8080/', // Reemplazar con API local
    logLevel: NgxLoggerLevel.WARN,
    serverLogLevel: NgxLoggerLevel.OFF
};

Cuando ejecute la aplicación, se utilizará la configuración del entorno de desarrollo: solo se mostrarán los registros de advertencia y el registro del lado del servidor está desactivado ya que solo queremos ver los errores en la consola del navegador.

El fichero para el entorno de producción quedaría del siguiente modo:

import { NgxLoggerLevel } from 'ngx-logger';

export const environment = {
     production: true,
     apiUrl: 'http://api.myservice.com/api/', // Reemplazar con API remoto
     logLevel: NgxLoggerLevel.OFF,
     serverLogLevel: NgxLoggerLevel.ERROR
};

Nuestra configuración de producción indica que no habrá registro del navegador y solo se registrarán los errores en el servidor en la URL de API especificada. El comando utilizado para ejecutar en modo de producción es ng serve –configuration=production o ng serve –prod

4. Cosas a considerar

1. Si considera implementar un punto final para almacenar los registros, tenga en cuenta que las solicitudes POST están llegando en esta forma:

{
   "message":"Now we got a problem",
   "additional":[],
   "level":5,
   "timestamp":"2018-10-11T08:43:30.543Z",
   "fileName":"home-home-module.js",
   "lineNumber":"121"
}

2. Cuando esté implementando NGX-logger en su aplicación, las pruebas de los componentes que usan la biblioteca se verán afectadas y no se compilarán. Si inyecta cualquiera de los servicios del registrador NGX en su aplicación, deberá proporcionarlos en su módulo de pruebas. La librería presenta módulos para testing:

TestBed.configureTestingModule({
   imports: [
      LoggerTestingModule
   ],
   ...
});

5. Conclusiones

Al final podríamos decir que NGX-Logger hizo que el registro con Angular fuera tan simple como eso. Biblioteca clara, fácil de configurar que nos proporciona características impresionantes. Tenemos la posibilidad de agregar registros en todo el sistema y activarlos /
desactivarlos cuando lo deseemos. Registrando toda la información que necesitamos rastrear y localizar problemas en diferentes entornos.

Have fun logging!