OJET: Logging with js-logger

One of the common challenges in Enterprise Application is the the Logging.

In Java EE / Jakarta EE you can use Java Logger with one of their famous implementations such us log4j for logging in a file system or database easily and also monitor them using Elastic or other log monitoring tools.

How can I log in JavaScript?

Obviously it exists the console.log for logging into the BROWSER Console. However, for Enterprise Application we will require to log the information somewhere to be consumed!!!.

There are million of Logger modules in NPM

For logging in an Enterprise way we are not going to re-invent the wheel. We can use one of the numerous logging modules you can find in NPM :).

• js-logger: Lightweight, unobtrusive, configurable JavaScript logger as they define it!
  https://www.npmjs.com/package/js-logger
• log4js: Yes looks like our famous log4js. It is a very famous implementation. We can format, create our own appenders etc..Much more complete than js-logger.
• loglevel: https://www.npmjs.com/package/loglevel
  Much more complete than js-logger also you can define Appenders :).

Depending on how complex is your use case select the one for your needs.

Integrating js-logger in Oracle JET

In this example we will make use of js-logger.

1. Install the js-logger dependency in your Oracle JET Application path application
   
   npm install js-logger --save
2. Add the third-party library dependency to path_mapping.json

   "js-logger": {
         "cdn": "3rdparty",
         "cwd": "node_modules/js-logger/src",
         "debug": {
           "src":  ["logger.js"],
           "path": "libs/js-logger/logger.js",
           "cdnPath": "js-logger/logger"
         },
         "release": {
           "src": ["logger.min.js"],
           "path": "libs/js-logger/logger.min.js",
           "cdnPath": "js-logger/logger"
         }
       }

   
   
3. Register the Dependency in main.js in the Require section.
   
   

   requirejs.config(
     {
       baseUrl: 'js',
   
       // Path mappings for the logical module names
       // Update the main-release-paths.json for release mode when updating the mappings
       paths:
       //injector:mainReleasePaths
       {
         'knockout': 'libs/knockout/knockout-3.4.2.debug',
         'jquery': 'libs/jquery/jquery-3.3.1',
         'jqueryui-amd': 'libs/jquery/jqueryui-amd-1.12.1',
         'promise': 'libs/es6-promise/es6-promise',
         'hammerjs': 'libs/hammer/hammer-2.0.8',
         'ojdnd': 'libs/dnd-polyfill/dnd-polyfill-1.0.0',
         'ojs': 'libs/oj/v6.1.0/debug',
         'ojL10n': 'libs/oj/v6.1.0/ojL10n',
         'ojtranslations': 'libs/oj/v6.1.0/resources',
         'text': 'libs/require/text',
         'signals': 'libs/js-signals/signals',
         'customElements': 'libs/webcomponents/custom-elements.min',
         'proj4': 'libs/proj4js/dist/proj4-src',
         'css': 'libs/require-css/css',
         'touchr': 'libs/touchr/touchr',
         'js-logger': 'libs/js-logger/logger'
       }
       //endinjector
     }
   );

4. In the main.js configure the Logger as following
   
   

   require(['ojs/ojcore', 'knockout', 'appController', 'jquery', 'js-logger', 'ojs/ojknockout',
     'ojs/ojmodule', 'ojs/ojrouter', 'ojs/ojnavigationlist', 'ojs/ojbutton', 'ojs/ojtoolbar'],
     function (oj, ko, app, $, Logger) { // this callback gets executed when all required modules are loaded
   
       $(function () {
   
         function init() {
           oj.Router.sync().then(
             function () {
               app.loadModule();
               // Bind your ViewModel for the content of the whole page body.
               ko.applyBindings(app, document.getElementById('globalBody'));
             },
             function (error) {
               oj.Logger.error('Error in root start: ' + error.message);
             }
           );
   
           // 1. Default Logger configuration. It configures the Console Handler as defualt Handler and the formatter
           Logger.useDefaults({
           });
           
           // 2. Override the Logger Configuration
           const loggerOptions = {
             defaultLevel: Logger.DEBUG,
             formatter : function (messages, context) {
               messages.unshift(new Date().toUTCString());
               messages.unshift("[" + context.name + "]");
             }
           }
           const consoleHandler = Logger.createDefaultHandler(loggerOptions);
           const myServerHandler = function(messages,context) {
             //jQuery.post('/logs', { message: messages[0], level: context.level });
             console.log("PUSH to Server");
           }
   
           Logger.setHandler(function(messages,context) {
             consoleHandler(messages,context);
             myServerHandler(messages,context);
           })

   
    
5. Use it in your modules getting a named Logger for each one!.

   define(['ojs/ojcore', 'knockout', 'jquery', 'js-logger'],
    function(oj, ko, $, Logger) {
     
       function DashboardViewModel() {
         var self = this;
         // Below are a set of the ViewModel methods invoked by the oj-module component.
         // Please reference the oj-module jsDoc for additional information.
   
         /** Test of js-logger */
         const dashboardLogger = Logger.get('dashboard');
         dashboardLogger.info("Welcome to the Dashbaord :)");
         dashboardLogger.error("Fake error");