Estás viendo una versión antigua de esta página. Ve a la versión actual.

Comparar con el actual Ver el historial de la página

« Anterior Versión 2 Siguiente »

Documentación en proceso...


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:

npm i --save @mncs/fwjs-components

O si ya lo tenemos, actualizando la versión en package.json (y haciendo un npm i para que se nos actualice en local).

Necesitaremos añadir estas dos variables de entorno al archivo .env:

VUE_APP_API_URL=/consultaexpedientes/rest/v1.0
VUE_APP_UMU_CLIENT_APP=consultaexpedientes-ui
  • VUE_APP_API_URL: será la ruta base de nuestro backend (coincidirá con la propiedad server.servlet.context-path que tendremos en el application.properties de nuestro proyecto Spring Boot).
  • VUE_APP_UMU_CLIENT_APP: indicaremos el nombre de la aplicación, seguido de ui. En el ejemplo vemos cómo está puesta para la aplicación Consulta de Expedientes.

Después, tenemos que añadir a nuestro main.js lo siguiente:

// Front logger
import log from "@mncs/fwjs-components/log";
Vue.use(log);

Con esto ya lo tendríamos configurado. El logger toma el usuario logeado de vuex, por lo que hay que tener en cuenta la siguiente advertencia:

El logger toma el usuario logeado de Vuex, del módulo "user", de la variable de estado "user". Esta es la estructura por defecto del login con el Portal de Servicios, por lo que es importante que la tengamos igual (la podemos ver en Login con JWT en Vue (Portal de Servicios o CAS)).

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.

  • Sin etiquetas