...
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:
| Bloque de código | ||
|---|---|---|
| ||
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:
| 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 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:
| Bloque de código |
|---|
import { vm } from "@/main.js";
...
vm.$logger.info("Desde un .js"); |