YUI Library Examples: Console: YUI configuration to filter log messages

Note: This is YUI 3.x. Looking for YUI 2.x?

Console: YUI configuration to filter log messages

Setting up filters in the YUI configuration

The configuration object passed to the YUI constructor supports a few settings that can help manage Console output while debugging. These configuration options are logExclude, logInclude, logLevel, filter, and filters.

This example will show the use of the logInclude, logExclude, and logLevel configurations.

An example configuration might look like this:

logExclude and logInclude prevent the logging subsystem from broadcasting filtered log messages. logLevel, on the other hand is used by Console instances to filter messages received from the subsystem.

Updating Y.config.logExclude or Y.config.logInclude at runtime will immediately change the subsystem filtering, but will not recover messages previously sent from that source.

When a Console is instantiated, barring explicit logLevel attribute configuration, the logLevel will be adopted from the YUI instance's configured logLevel, or Y.Console.LOG_LEVEL_INFO as a fallback. Unlike logExclude, changing the value in the YUI configuration will only affect instantiated Consoles from that point on. Additionally, you can manually override the logLevel a Console instance will display by updating its logLevel attribute.

The interactive portion of this example illustrates the effect of various filter settings against logged messages. In real application, it is most likely that the logging configuration won't be changed at runtime but set once in the YUI configuration at construction.

The most relevant portion of the code for the demo above is the updating of the YUI config and Console attribute.

// Create and render the Console
var yconsole = new Y.Console({ boundingBox: '#console' }).render();

// Set up event listeners
// Log source checkboxes
Y.all('#demo input[name=src_filter]').on('click', function (e) {
    var disposition = Y.get('#incexc').get('value'),
        src = e.target;

if (src.get('checked')) {
        Y.config[disposition] = Y.config[disposition] || {};
        Y.config[disposition][src.get('value')] = true;
    } else {
        delete Y.config[disposition][src.get('value')];
        if (!Y.Object.size(Y.config[disposition])) {
            delete Y.config[disposition];
        }
    }
    updatePreview();
});

// Source include or exclude select
Y.get('#incexc').on('change', function () {
    if (this.get('value') === 'logInclude') {
        Y.config.logInclude = Y.config.logExclude;
        delete Y.config.logExclude;
    } else {
        Y.config.logExclude = Y.config.logInclude;
        delete Y.config.logInclude;
    }
    updatePreview();
});

// Log level radio group
Y.all('#demo input[name=log_level]').on('click', function () {
    var lvl = e.target;

if (lvl.get('checked')) {
        yconsole.set('logLevel', lvl.get('value'));
        updatePreview();
    }
});

Full Code Listing

Markup

<div class="filter-controls">
        <h4>Source filter</h4>
        <p>
            <select id="incexc">
                <option value="logExclude" selected="selected">Exclude</option>
                <option value="logInclude">Include</option>
            </select>
            <label for="filter_a"><input type="checkbox" name="src_filter" value="sourceA" id="filter_a"> <code>sourceA = true</code></label>
            <label for="filter_b"><input type="checkbox" name="src_filter" value="sourceB" id="filter_b"> <code>sourceB = true</code></label>
            <label for="filter_c"><input type="checkbox" name="src_filter" value="sourceC" id="filter_c" checked="checked"> <code>sourceC = true</code></label>
        </p>
    </div>

<div class="filter-controls">
        <h4>Log level</h4>
        <p>
            <label for="lvl_info">
                <input type="radio" name="log_level" id="lvl_info" value="info" checked="checked">
                <code>LOG_LEVEL_INFO</code>
            </label>
            <label for="lvl_warn">
                <input type="radio" name="log_level" id="lvl_warn" value="warn">
                <code>LOG_LEVEL_WARN</code>
            </label>
            <label for="lvl_error">
                <input type="radio" name="log_level" id="lvl_error" value="error">
                <code>LOG_LEVEL_ERROR</code>
            </label>
        </p>
    </div>

<div class="form">
        <h4>Log a message</h4>
        <div>
            <input type="text" id="msg" value="This is a log message!">
            <button type="button" id="log">log message</button>

<p>
                Source:
                <label for="msg_src_a">
                    <input type="radio" name="msg_src" id="msg_src_a" value="sourceA" checked="checked">
                    A
                </label>
                <label for="msg_src_b">
                    <input type="radio" name="msg_src" id="msg_src_b" value="sourceB">
                    B
                </label>
                <label for="msg_src_c">
                    <input type="radio" name="msg_src" id="msg_src_c" value="sourceC">
                    C
                </label>

<span>Category:</span>
                <label for="msg_info">
                    <input type="radio" name="msg_cat" id="msg_info" value="info" checked="checked">
                    info
                </label>
                <label for="msg_warn">
                    <input type="radio" name="msg_cat" id="msg_warn" value="warn">
                    warn
                </label>
                <label for="msg_error">
                    <input type="radio" name="msg_cat" id="msg_error" value="error">
                    error
                </label>
            </p>
        </div>

<h4>Code preview</h4>
        <pre id="preview">// YUI instance configuration
var Y = YUI({
    "logLevel": "info",
    "logExclude": {
        "sourceC": true
    }
});

// Log statement
Y.log("This is a log message!", "info", "sourceA");</pre>
    </div>
</div>

JavaScript

YUI({base:"../../build/", timeout: 10000}).use("console", "selector-css3", "json-stringify", function (Y) {

// To eliminate duplicate reporting in native console in supporting browsers
Y.config.useBrowserConsole = false;

// Add the default filtering of sourceC messages
Y.config.logExclude = {
    sourceC : true
};

// Create and render the Console
var yconsole = new Y.Console({ boundingBox: '#console' }).render();

// Set up event listeners
// Log source checkboxes
Y.all('#demo input[name=src_filter]').on('click', function (e) {
    var disposition = Y.get('#incexc').get('value'),
        arc = e.target;

// Log level radio group
Y.all('#demo input[name=log_level]').on('click', function (e) {
    var lvl = e.target;

if (lvl.get('checked')) {
        yconsole.set('logLevel', lvl.get('value'));
        updatePreview();
    }
});

// Log message input and radio groups
Y.get('#msg').on('keyup', updatePreview);
Y.all('#demo input[name=msg_src]').on('click', updatePreview);
Y.all('#demo input[name=msg_cat]').on('click',  updatePreview);

// Log message button
Y.get('#log').on('click', function (e) {
    var msg = Y.get('#msg').get('value'),
        cat = Y.get('#demo input[name=msg_cat]:checked').get('value'),
        src = Y.get('#demo input[name=msg_src]:checked').get('value');

Y.log(msg,cat,src);
});

// Support function
function updatePreview() {
    var filters   = Y.all('#demo input[name=src_filter]:checked'),
        cfg = {
            logLevel: Y.get('#demo input[name=log_level]:checked').get('value')
        };

if (filters.size()) {
        cfg[Y.get('#incexc').get('value')] = Y.Array.hash(filters.get('value'));
    }

Y.get('#preview').set('text',Y.substitute(
        "// YUI instance configuration\n" +
        "var Y = YUI({cfg});\n\n" +
        "// Log statement\n" +
        'Y.log("{msg}", "{lvl}", "{src}");',
        {
            cfg: Y.JSON.stringify(cfg, null, 4),
            msg: Y.get('#msg').get('value'),
            lvl: Y.get('#demo input[name=msg_cat]:checked').get('value'),
            src: Y.get('#demo input[name=msg_src]:checked').get('value')
        }));
}

});

CSS

YUI 3.x Project
YUI 3 Web Site (external)
YUI 3 Examples
YUI 3 API Docs
YUI 3 on Sourceforge (external)
YUI License (external)
YUI 3 Core - Examples
YUI (Global Prerequisite)
Event
Node
YUI 3 Component Infrastructure - Examples
Attribute
Plugin
Widget
YUI 3 Utilities - Examples
Animation
Cache
Cookie
DataSchema
DataSource
DataType
Drag & Drop
Get
History
ImageLoader
IO
JSON
Queue
Stylesheet
YUI 3 Widgets - Examples
Overlay
Slider
YUI 3 Node Plugins - Examples
FocusManager Node Plugin
MenuNav Node Plugin
YUI 3 CSS - Examples
CSS Reset
CSS Fonts
CSS Base
YUI 3 Developer Tools - Examples
Console
Profiler
Test
The YUI Community
YUI Blog (external)
YUI Forum (external)
YUI 3 Forum (external)
YUI Sightings (external)
YUI Theater (external)
YUI Articles on the YUI Website
YUI FAQ (external)
Graded Browser Support (external)
Bug Reports/Feature Requests (external)
Serving YUI Files from Yahoo! (external)