...

Al ejecutarse las aplicaciones Vue sólo en el navegador, por defecto los logs que se obtienen no se quedan guardados, sólo se muestran en la consola del navegador. Para poder loggear también esta parte de las aplicaciones, hemos incluido un frontLogger, compuesto de un endpoint en el backend al que el frontend mandará los logs, de forma que podremos consultar en Lagar también los logs que vienen del frontend.

La configuración tanto del frontend como del backend ya estarán incluidas en los proyectos si hemos creado uno nuevo recientemente, y hemos seguido las instrucciones de la documentación. En el caso de proyectos más antiguos, creados antes de que hubiésemos sacado el log sí que habrá que seguir los pasos siguientes.

Configuración frontend

En nuestro proyecto Vue, en primer lugar tendremos que tener la dependencia @mncs/fwjs-components en la versión 0.1.40 o superior. Podemos instalar la última versión con:

...

Configuración backend

En el proyecto Spring Boot, tendremos que seguir los siguientes pasos para incluir el logger del ui. En primer lugar, tenemos que añadir la siguiente dependencia al pom.xml:

<dependency>
	<groupId>es.um.atica.fundewebjs.fundewebjs-api</groupId>
	<artifactId>fundewebjs-lagar</artifactId>
	<version>1.0.0-SNAPSHOT</version>
</dependency>

Además, también en el pom.xml, en el bloque de repositories, tenemos que añadir el siguiente:

<repository>
	<id>fundewebjs.archiva.atica.umu.es</id>
	<name>ATICA - UMU Repository - FundeWebJS</name>
	<url>https://archiva.um.es/archiva/repository/FundeWebJS/</url>
	<releases>
		<enabled>true</enabled>
	</releases>
	<snapshots>
		<enabled>true</enabled>
	</snapshots>
</repository>

En la clase que inicia la aplicación, que será algo como NombreApplication.java, sustituyendo Nombre por el de nuestra aplicación, tendremos que añadir a la clase la anotación @ComponentScan, con el contenido siguiente:

@ComponentScan( basePackages = {
		"es.um.atica.aplicacion", "es.um.atica.fundewebjs"
} )

Ahí, tenemos que cambiar aplicación por el paquete base de nuestra aplicación.

Con esto, un ejemplo de esta clase inicial podría ser el siguiente:

package es.um.atica.pruebaspose;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.ComponentScan;

@SpringBootApplication
@ComponentScan( basePackages = {
		"es.um.atica.pruebaspose", "es.um.atica.fundewebjs"
} )
public class PruebasPoseApplication {

	public static void main(String[] args) {
		SpringApplication.run(PruebasPoseApplication.class, args);
	}

}

Por último, en application.properties, tendremos que tener las siguientes propiedades:

##### Logs UI
# FundeWebJS Habilitar endpoint jsn.logger
fdwjs.api.frontLogger.enable=true

# FundeWebJS Habilitar filtro para cabeceras en logs MDC de lagar 
fdwjs.api.lagar.enable=true 
fdwjs.api.lagar.headers=UMU-User-UUID,UMU-Client-APP

# FundeWebJS Habilitar filtro para loggear request/response
fdwjs.api.logging.enable=true
fdwjs.api.logging.client.enable=true
fdwjs.api.logging.query.enable=true
fdwjs.api.logging.headers.enable=true
fdwjs.api.logging.payload.enable=true
fdwjs.api.logging.payload.maxLength=6400
fdwjs.api.logging.url-patterns=*

Estas propiedades también tendrán que estar en los application.properties de los entornos. En estos, ademas, tendremos que comprobar también la propiedad server.tomcat.accesslog.pattern, poniéndole este valor si no lo tiene:

server.tomcat.accesslog.pattern=%h %l %u %t "%r" %s %b "%{Referer}i" "%{User-Agent}i" "%{X-Forwarded-For}i" %D "%{UMU-Request-UUID}o"

Funcionamiento y uso del log

Por defecto, se loggearán los warnings y errores que aparezcan en nuestro frontend. Esto se hará sólo cuando la imagen sea de producción, es decir, en los entornos o si ejecutamos la aplicación en local con la opción --mode production. Si en local no utilizamos esa opción seguiremos viendo los errores y warnings en la consola del navegador.