| Advertencia |
|---|
Documentación en proceso... |
| Tabla de contenidos |
|---|
...
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
La configuración en la parte frontend ya está incluida en el proyecto Portal UI, así que no tendremos que tocar nada.
| Expandir | ||
|---|---|---|
| ||
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. |
...
43 o superior. Podemos instalar la última versión con:
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:
Después, tenemos que añadir a nuestro main.js lo siguiente:
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:
|
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:
| Bloque de código | ||
|---|---|---|
| ||
<properties> ... <fdwjs.version>[1.0.0,)</fdwjs.version> ... </properties> <dependency> <groupId>es.um.atica.fundewebjs.fundewebjs-api</groupId> <artifactId>fundewebjs-lagar</artifactId> <version>1.0.0-SNAPSHOT<<version>${fdwjs.version}</version> </dependency> |
Además, también en el pom.xml, en el bloque de repositories, tenemos que añadir el siguiente:
...
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 el atributo scanBasePackages a la clase la anotación @ComponentScannotación SpringBootApplication, con el contenido siguiente:
| Bloque de código | ||
|---|---|---|
| ||
@ComponentScan@SpringBootApplication( basePackagesscanBasePackages = { "es.um.atica.aplicacion[PAQUETE_APPLICATION]", "es.um.atica.fundewebjs" } ) |
...
| Bloque de código | ||
|---|---|---|
| ||
package es.um.atica.pruebaspose; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.context.annotation.ComponentScan; @SpringBootApplication @ComponentScan( basePackagesscanBasePackages = { "es.um.atica.pruebaspose", "es.um.atica.fundewebjs" } ) public class PruebasPoseApplication { public static void main(String[] args) { SpringApplication.run(PruebasPoseApplication.class, args); } } |
...
| Bloque de código |
|---|
##### Logs UI # FundeWebJS Habilitar endpoint jsn.logger fdwjs.api.frontLogger.enable=true fdwjs.api.frontLogger.header.group=UMU-Logger-Group fdwjs.api.frontLogger.header.app=UMU-Logger-App # 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=*,UMU-User-SessionID |
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:
...
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 (también, si no utilizamos --mode production se mostrarán en la consola del navegador). 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:
| Bloque de código | ||
|---|---|---|
| ||
this.$logger.debug("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, necesitamos 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:
| Bloque de código | ||
|---|---|---|
| ||
// Original - Esta hay que cambiarla por la siguiente
new Vue({
router,
store,
i18n,
render: (h) => h(App),
}).$mount("#app");
// UTILIZAR ESTA:
export default new Vue({
router,
store,
i18n,
render: (h) => h(App),
}).$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:
| Bloque de código |
|---|
import vm from "@/main.js";
...
vm.$logger.info("Desde un .js"); |