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).
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
Thanks Enric Castella Gonzalez for the blog. One question is how is it different from Console.log, console.warn, console.error etc.
hi Nabheet Madan,
As per my understanding, the difference is as follows:
Using Console will log all the messages in the browser console.
Using sap.base.log, you can set the level which will allow you to log necessary messages selectively.
Ex: In Prod Environment, i would not like to log all the messages but only Error Or Fatal Messages due to performance reasons, so without the need of commenting all the logs in my app, i just need to set the Log Level to Error in the bootstrap.
While debugging also i can just set the log level to any level (NONE|FATAL|ERROR|WARNING|INFO|DEBUG|ALL) from the Browser console as per my needs.
to be honest i will use console.log because once you start using sap log it will log ++ 70 message from the libriry and also when you see your log you don't have the line number of your controller because sapui5 do the link of the log to his library. !!!!!!
Thanks for writing about this. While i have been using it for a while, I didn't know about the data-sap-ui-logLevel option, which is great!
The major advantage for using this instead of console.log is that the console object doesn't always exist. In dreaded IE for example it only exists if developer tools is open so if you try to console.log without having it open, your console.log call will instead throw an error, IIRC.
Another one is being able to easily control which levels go (or not) into the console.
But is there any way to have for example Error logs to be saved on some BTP backend api?
Then we could monitor those errors in HTML5 monitoring pannel ? that would be nice.
Along that if there was some api to access those logs we , partners, could create some giant report (using SAC or Power BI) to see the state of our applications in each subbacount and quickly identify if there is some unexpected error in production that needs to be quickly fixed.
As it is in production the client side navigator logs are just useless, there is no way we can ask the user to perform technical task (F12 etc) to send us the logs... This is a missed opportunity from SAP BTP service in my opinion.