SAPUI5 – Log API Javascript – Add logs in your webapps

Add browser console logs to your UI5 development using an elegant option

But first, why do you need a log? Some times we want to avoid a debug we can use the famous command console.log that allows us to display messages in the browser console (typically by pressing F12).

It is also possible to use the instructions to report the errors that occurred so that the user can report them. For this error management, SAP proposes the use of Logging API for JavaScript.

Let’s go!

First we will create an application in SAP WEBIde. For example, we will create an “SAPUI5 application “. We do not need more for now:

Once we have the application, we go to the controller that we want to add the log and we instantiate the log libraries (“sap / base / Log”):

Once the libraries are added, we can add the different log types. These logs can be info, debug, warning, error, fatal.

Depending on the added code we can see the different stitch message in the browser console or filter by message types.

For now we will add them all to see their effects in the console, for this, we will add them in the same controller where we have put the library, in the onInit event:

        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");

So we will have something like this:

We still have to enable the log at the application level, for this we will add in the file index.html the instruction:

data-sap-ui-logLevel = "debug"

So we have a file like this:

We execute our application and look at the Log. To do this, execute the application with the run button and once loaded our application press F12:

The first thing we can see is that depending on the type of message in the console appears in one color or another, error in red, warning in yellow, rest without color.

It also allows us to show only errors by level, in this case warnings and errors:

For more information
https://openui5.hana.ondemand.com/#/api/module%3Asap%2Fbase%2FLog