Components -> sabinos.Log

Introduction

sabinos.Log is a Javascript logging script to help developer output log statements to a several number of targets.

The main idea is to give to the developer the ability of adding log to javascript files and still be able to keep the logging behavior configuration isolated, without having to touch the user script code to change the log target. This is posible with the use of appenders, an idea (and name) that was originally inpired by log4j appenders behaviour.

Another problem is that once the log was added to the source, it is a pain to get rid of all logging calls and even if that is donne, the developer might want to use some logs again it for further tests, and then will be forced to add some of the log messages again. sabinos.Log take some measures to avoid this, the logging script was splitted in two files: the first which contains the basic to keep the script that is using log working even if logging is not necessary, as in release versions for example; And the second file, that is optional, once it contains all appenders inteligence to output log messages.

Keeping the javascript log file with your code is very lightweight, with 3kb size only, and all log calls will be blocked by an comparison that verifies if log is available, diminishing almost completely the impact of log calls processing in the original script.

Examples

This is the simplest sabinos.Log example. It uses an Alert appender to log all click made by example 1 button. The javascript code show the creating of the appender with the follow text in the constructor: "'Alert for example 1. message: {message}'", which means that all log calls message will have its text formated by that sentence in the constructor where "{message}" will be replaced by the message sent by the logging call, such as "button clicked" sent by the example. Check the documentation for all possible formats.

HTML

<input id="buttonExample1" type="button" value="Click me!" 
    class="button" onclick="loggerExample1.debug('button clicked');" />

Javascript

//Creates the log object
var loggerExample1 = new sabinos.Log('example1Logger',[
    new sabinos.Log.Appenders.Alert('Alert for example 1. message: {message}')
]);

Obviously that is not the only way to output the log message, and also not the best, specially because using an 'alert()' suspend all Javascrit being executed while the user does not click the 'OK' button. So, the next example shows not only the usage of another appender, but the usage of more than one appender at the same time, besides the output of more information about the log call.

This example will show the output log in 2 different ways, however, one of then will only be visible for firefox users with Firebug extension, as the output will be the firebug console, and the second log output will be an textarea element*.

This example also shows the output being diferenced by its level of importance, as the example show the Console appender is enabled only for 'Info' logs and the Element appender is enabled for all calls

* Notice that the textarea element appender must be created after the page DOM is loaded, otherwise the appender will not be able to find and map the textarea and an exception will be thrown.


HTML

    <input type="button" id="button1Example2" value="Button 1"
        class="button" onclick="loggerExample2.info('button 1 clicked');"/>
    <input type="button" id="button2Example2" value="Button 2"
        class="button" onclick="loggerExample2.trace('button 2 clicked');"/>
    <br />
    <textarea id="textareaExample1" rows="5" cols="70"></textarea>

Javascript

//Creates log object for example 2
var loggerExample2 = new sabinos.Log('example2Logger');

//Appenders can aso be added after the log object is declared
loggerExample2.Appenders.add(
    new sabinos.Log.Appenders.Console('Console output: {time} - {type} - {message}', 
        sabinos.Log.Level.Info)
    );

Event.observe(window, 'load', function(){
//Add the Element appender to the log object only after the dom is loaded
    loggerExample2.Appenders.add(
        new sabinos.Log.Appenders.Element('log--> {caller} - {type} - {message}\n',
            sabinos.Log.Level.All,'textareaExample1')
    );
});

You can create your on exclusive appender, as all of then inheritate from the same Base class sabinos.Log.Appenders.Base, check the documentation to see how to do it properly.

Documentation

Check sabinos.Log Documentation Page for complete component documentation

Download

You can find all important files for this and other controls at the Download section.

Created by Felipe Sabino © 2008