SAPUI5 – Log API Javascript – Añade logs a tu aplicación

Añade logs de consola de navegador a tu desarrollo UI5 de manera elegante

En la entrada de hoy veremos como añadir de manera elegante un log en nuestra consola del navegador y deshabitalitar las algunas de las trazas una vez finalizado el desarrollo de la aplicación.

Resultado de imagen de console.log

Pero antes, ¿porque necesitas un log? Algunas ocasiones que queremos evitar un debug podemos usar la famosa instrucción console.log que nos permite mostrar mensajes en la consola del navegador (típicament pulsando F12).

También es possible que queramos dejar traza de los errores ocurridos para que el usuario pueda estar al corriente e informar de ellos. Para todos estos casos SAP nos propone el uso de Logging API for JavaScript.


Vamos a meter las manos en fango

Lo primero que haremos es crear una aplicación en SAP WEBIde. Por ejemplo crearemos una «SAPUI5″ application». No necesitamos mas por ahora:

Una vez tenemos la aplicación vamos al controlador que queremos hacer log y añadimos las librerías de log («sap/base/Log»):

Una vez añadidas las librerias ya podemos añadir el los distintos log. Estos se pueden separar en info, debug, warning, error, fatal.

En función del código añadido podremos ver distintos mensajes en la consola del navegador o filtrar por tipos de mensaje:

Por ahora los añadiremos todos para ver su efecto, para ello, los añadiremos en el mismo controlador donde hemos puesto la libreria, en el evento onInit:

        Log.info("Aquí una Información");
        Log.debug("Aquí una información de debug");
        Log.warning("Aquí un warning");
        Log.error("Aquí un error");
        Log.fatal("Aquí una catástrofe");

Por lo que nos quedará algo como esto:

Solo nos queda habilitar el log a nivel de aplicación, para ello añadiremos en el fichero index.html la instrucció:

data-sap-ui-logLevel=»debug»

Por lo que nos quedara un fichero como este:

Ya solo nos queda ejecutar nuestra aplicación y mirar el Log. Para ello, ejecutamos la aplicación con el boton de run y una vez cargada nuestra aplicación pulsamos F12:

Lo primero que podemos ver es que en funció del tipo de mensaje en la consola nos aparece en un color o otro.

También nos permite mostrar solo errores por nivel, en este caso warnings y errores:

En caso de quitar el parámetro logLevel, se mostraran únicamente aquellos logs que corresponden a errores y warnings y se ocultaran el resto.


Hasta aquí la entrada de hoy, espero que os resulte útil para mostrar de una manera elegante logs de navegador.

Para mas información https://openui5.hana.ondemand.com/#/api/module%3Asap%2Fbase%2FLog

Si este tema os ha interesado, suscribiros al blog Suscribete

Add a Comment

Tu dirección de correo electrónico no será publicada.

Pin It on Pinterest