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 el archivo JSNLog.2-30-0.min.js en la ruta /public/js/ de nuestro proyecto (creamos la carpeta js). Podemos descargar el archivo clickando en el enlace anterior, o podemos crearlo nosotros mismos, con el mismo nombre, desplegar el siguiente bloque de código y copiar su contenido al archivo:
Después, necesitamos 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=false 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.
Además, podemos indicar explícitamente logs que queremos que se manden. Por defecto, el nivel de log que registrará el backen es debug; los niveles de log que podemos mandar son:
- debug
- info
- warn
- error
- fatal
Para mandar logs explícitamente, lo haremos de las siguientes formas.
Desde un componente, lo podemos hacer llamando a this.$logger, seguido del método correspondiente al nivel de log que queramos mandar:
this.$logger.warn("Log debug");
this.$logger.info("Log info");
this.$logger.warn("Log warn");
this.$logger.error("Log error");
this.$logger.fatal("Log fatal");
En archivos .js, hace falta un paso extra. Tendremos que importar la instancia de Vue, y para ello necesitamos cambiar en el main.js la declaración de ésta, neceistamos exportarla. En el siguiente bloque de código, vemos en primer lugar cómo viene definida por defecto (en proyectos anteriores a esta documentación), y cómo tiene que quedarse:
// Original - Esta hay que cambiarla por la siguiente
new Vue({
router,
store,
i18n,
render: (h) => h(App),
}).$mount("#app");
// UTILIZAR ESTA:
export const vm = new Vue({
router,
store,
i18n,
render: (h) => h(App),
})
vm.$mount("#app");
De este modo, en los archivos .js podremos importar la instancia de Vue, y utiliizarla para llamar al logger como en los componentes, pero utilizando vm en vez de this:
import { vm } from "@/main.js";
...
vm.$logger.info("Desde un .js");