YUI 3.x Home -

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

Console: YUI configuration to filter log messages

This example illustrates how to configure your YUI instance to ignore certain log messages to aid in reducing the signal-to-noise ratio when debugging.

Log messages filtered out from the YUI config are permanently ignored. If you want to be able to temporarily hide and reshow messages, use the ConsoleFilters plugin. It is not uncommon to set up logInclude or logExclude in the YUI configuration and use the ConsoleFilters plugin.

Log messages can be ignored based on the source (e.g. event or attribute) or based on their log level (info, warn, error).

View example in new window.

Source filter

Log level

Log a message

Source: Category:

Code preview

// YUI instance configuration
var Y = YUI({
    "logLevel": "info",
    "logExclude": {
        "sourceC": true
    }
});

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

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:

  1. YUI({
  2.     filter : 'debug', // request -debug versions of modules for log statements
  3.     logExclude : {
  4.         event : true,     // Don't broadcast log messages from the event module
  5.         attribute : true, // or the attribute module
  6.         widget : true     // or the widget module
  7.     },
  8.     logLevel : 'error',       // Show only errors in the Console
  9.     useBrowserConsole : false // Don't use the browser's native console
  10. }).use('overlay','anim','console', function (Y) {
  11.  
  12. /* Console instances will default to logLevel = "info" */
  13.  
  14. });
YUI({
    filter : 'debug', // request -debug versions of modules for log statements
    logExclude : {
        event : true,     // Don't broadcast log messages from the event module
        attribute : true, // or the attribute module
        widget : true     // or the widget module
    },
    logLevel : 'error',       // Show only errors in the Console
    useBrowserConsole : false // Don't use the browser's native console
}).use('overlay','anim','console', function (Y) {
 
/* Console instances will default to logLevel = "info" */
 
});

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.

  1. YUI({
  2.     logExclude : {
  3.         event : true
  4.     }
  5. }).use('console', function (Y) {
  6.  
  7. /* In here, Y.config refers to the config object passed to the constructor */
  8.  
  9. // Stop broadcasting log messages from the attribute module
  10. Y.config.logExclude.attribute = true;
  11.  
  12. // Start broadcasting log messages from the event module again
  13. delete Y.config.logExclude.event;
  14.  
  15. });
YUI({
    logExclude : {
        event : true
    }
}).use('console', function (Y) {
 
/* In here, Y.config refers to the config object passed to the constructor */
 
// Stop broadcasting log messages from the attribute module
Y.config.logExclude.attribute = true;
 
// Start broadcasting log messages from the event module again
delete Y.config.logExclude.event;
 
});

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 ("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.

  1. YUI({ logLevel : "warn" }).use('console', function (Y) {
  2.  
  3. var yconsole_1 = new Y.Console(); // logLevel == "warn"
  4.  
  5. var yconsole_2 = new Y.Console({
  6.     logLevel : "info" // override at construction
  7. });
  8.  
  9. // This will not affect yconsole_1 or yconsole_2
  10. Y.config.logLevel = "error";
  11.  
  12. var yconsole_3 = new Y.Console(); // logLevel == "error"
  13.  
  14. yconsole_1.set("logLevel", "info"); // update this instance
  15.  
  16. });
YUI({ logLevel : "warn" }).use('console', function (Y) {
 
var yconsole_1 = new Y.Console(); // logLevel == "warn"
 
var yconsole_2 = new Y.Console({
    logLevel : "info" // override at construction
});
 
// This will not affect yconsole_1 or yconsole_2
Y.config.logLevel = "error";
 
var yconsole_3 = new Y.Console(); // logLevel == "error"
 
yconsole_1.set("logLevel", "info"); // update this instance
 
});

The interactive portion of this example illustrates the effect of various filter settings against logged messages. In a 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.

  1. // Create and render the Console
  2. var yconsole = new Y.Console({
  3.     boundingBox: '#console', // anchored to the page for the demo
  4.     style: "block"
  5. }).render();
  6.  
  7. ...
  8.  
  9. // Source include or exclude select
  10. Y.on("change", function () {
  11.     if (this.get("value") === "logInclude") {
  12.         Y.config.logInclude = Y.config.logExclude;
  13.         delete Y.config.logExclude;
  14.     } else {
  15.         Y.config.logExclude = Y.config.logInclude;
  16.         delete Y.config.logInclude;
  17.     }
  18.     updatePreview();
  19. }, "#incexc");
  20.  
  21. // These functions are called from a delegated event handler.
  22. // See the Full Code Listing for how they are called.
  23. function updateSourceFilters(source, checked) {
  24.     var disposition = Y.one("#incexc").get("value"),
  25.         cfg = Y.config[disposition]; // Y.config.logInclude or logExclude
  26.  
  27.     if (checked) {
  28.         if (!cfg) {
  29.             cfg = Y.config[disposition] = {};
  30.         }
  31.         cfg[source] = true; // e.g. Y.config.logInclude.sourceA = true;
  32.     } else {
  33.         delete cfg[source];
  34.  
  35.         if (!Y.Object.size(cfg)) {
  36.             delete Y.config[disposition];
  37.         }
  38.     }
  39.  
  40.     updatePreview();
  41. }
  42.  
  43. function updateLogLevel(level, checked) {
  44.     if (checked) {
  45.         Y.config.logLevel = level;
  46.         yconsole.set("logLevel", level);
  47.         updatePreview();
  48.     }
  49. }
// Create and render the Console
var yconsole = new Y.Console({
    boundingBox: '#console', // anchored to the page for the demo
    style: "block"
}).render();
 
...
 
// Source include or exclude select
Y.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();
}, "#incexc");
 
// These functions are called from a delegated event handler.
// See the Full Code Listing for how they are called.
function updateSourceFilters(source, checked) {
    var disposition = Y.one("#incexc").get("value"),
        cfg = Y.config[disposition]; // Y.config.logInclude or logExclude
 
    if (checked) {
        if (!cfg) {
            cfg = Y.config[disposition] = {};
        }
        cfg[source] = true; // e.g. Y.config.logInclude.sourceA = true;
    } else {
        delete cfg[source];
 
        if (!Y.Object.size(cfg)) {
            delete Y.config[disposition];
        }
    }
 
    updatePreview();
}
 
function updateLogLevel(level, checked) {
    if (checked) {
        Y.config.logLevel = level;
        yconsole.set("logLevel", level);
        updatePreview();
    }
}

Full Code Listing

Markup

  1. <div id="demo">
  2.     <div id="console"></div>
  3.  
  4.     <div class="filter-controls">
  5.         <h4>Source filter</h4>
  6.         <p>
  7.             <select id="incexc">
  8.                 <option value="logExclude" selected="selected">Exclude</option>
  9.                 <option value="logInclude">Include</option>
  10.             </select>
  11.             <label for="filter_a"><input type="checkbox" name="src_filter" value="sourceA" id="filter_a"> <code>sourceA</code></label>
  12.             <label for="filter_b"><input type="checkbox" name="src_filter" value="sourceB" id="filter_b"> <code>sourceB</code></label>
  13.             <label for="filter_c"><input type="checkbox" name="src_filter" value="sourceC" id="filter_c" checked="checked"> <code>sourceC</code></label>
  14.         </p>
  15.     </div>
  16.  
  17.     <div class="filter-controls">
  18.         <h4>Log level</h4>
  19.         <p>
  20.             <label for="lvl_info">
  21.                 <input type="radio" name="log_level" id="lvl_info" value="info" checked="checked">
  22.                 info
  23.             </label>
  24.             <label for="lvl_warn">
  25.                 <input type="radio" name="log_level" id="lvl_warn" value="warn">
  26.                 warn
  27.             </label>
  28.             <label for="lvl_error">
  29.                 <input type="radio" name="log_level" id="lvl_error" value="error">
  30.                 error
  31.             </label>
  32.         </p>
  33.     </div>
  34.  
  35.     <div class="form">
  36.         <h4>Log a message</h4>
  37.         <div>
  38.             <input type="text" id="msg" value="This is a log message!">
  39.             <button type="button" id="log">log message</button>
  40.  
  41.             <p>
  42.                 Source:
  43.                 <label for="msg_src_a">
  44.                     <input type="radio" name="msg_src" id="msg_src_a" value="sourceA" checked="checked">
  45.                     A
  46.                 </label>
  47.                 <label for="msg_src_b">
  48.                     <input type="radio" name="msg_src" id="msg_src_b" value="sourceB">
  49.                     B
  50.                 </label>
  51.                 <label for="msg_src_c">
  52.                     <input type="radio" name="msg_src" id="msg_src_c" value="sourceC">
  53.                     C
  54.                 </label>
  55.  
  56.                 <span>Category:</span>
  57.                 <label for="msg_info">
  58.                     <input type="radio" name="msg_cat" id="msg_info" value="info" checked="checked">
  59.                     info
  60.                 </label>
  61.                 <label for="msg_warn">
  62.                     <input type="radio" name="msg_cat" id="msg_warn" value="warn">
  63.                     warn
  64.                 </label>
  65.                 <label for="msg_error">
  66.                     <input type="radio" name="msg_cat" id="msg_error" value="error">
  67.                     error
  68.                 </label>
  69.             </p>
  70.         </div>
  71.  
  72.         <h4>Code preview</h4>
  73.         <pre id="preview">// YUI instance configuration
  74. var Y = YUI({
  75.     "logLevel": "info",
  76.     "logExclude": {
  77.         "sourceC": true
  78.     }
  79. });
  80.  
  81. // Log statement
  82. Y.log(&quot;This is a log message!&quot;, &quot;info&quot;, &quot;sourceA&quot;);</pre>
  83.     </div>
  84. </div>
<div id="demo">
    <div id="console"></div>
 
    <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</code></label>
            <label for="filter_b"><input type="checkbox" name="src_filter" value="sourceB" id="filter_b"> <code>sourceB</code></label>
            <label for="filter_c"><input type="checkbox" name="src_filter" value="sourceC" id="filter_c" checked="checked"> <code>sourceC</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">
                info
            </label>
            <label for="lvl_warn">
                <input type="radio" name="log_level" id="lvl_warn" value="warn">
                warn
            </label>
            <label for="lvl_error">
                <input type="radio" name="log_level" id="lvl_error" value="error">
                error
            </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(&quot;This is a log message!&quot;, &quot;info&quot;, &quot;sourceA&quot;);</pre>
    </div>
</div>

JavaScript

  1. YUI({base:"../../build/", timeout: 10000}).use("console", "selector-css3", "json-stringify", function (Y) {
  2.  
  3. // Add the default filtering of sourceC messages
  4. Y.config.logExclude = {
  5.     sourceC : true
  6. };
  7.  
  8. // Create and render the Console
  9. var yconsole = new Y.Console({
  10.     boundingBox: "#console",
  11.     style: "block"
  12. }).render();
  13.  
  14.  
  15. // Set up event listeners
  16. // Source include or exclude select
  17. Y.on("change", function () {
  18.     if (this.get("value") === "logInclude") {
  19.         Y.config.logInclude = Y.config.logExclude;
  20.         delete Y.config.logExclude;
  21.     } else {
  22.         Y.config.logExclude = Y.config.logInclude;
  23.         delete Y.config.logInclude;
  24.     }
  25.     updatePreview();
  26. }, "#incexc");
  27.  
  28. // delegate all checkbox and radio group clicks via a single event subscriber
  29. // routing to the appropriate function based on the input name
  30. var clickHandlers = {
  31.     src_filter : updateSourceFilters,
  32.     log_level  : updateLogLevel,
  33.     msg_src    : updatePreview,
  34.     msg_cat    : updatePreview
  35. };
  36.  
  37. Y.delegate("click", function (e) {
  38.     var input   = e.currentTarget,
  39.         handler = clickHandlers[ input.get("name") ];
  40.  
  41.     if (handler) {
  42.         handler(input.get("value"), input.get("checked"));
  43.     }
  44.  
  45. }, "#demo", "input[name]");
  46.  
  47. // Log message input and radio groups
  48. Y.on("keyup", updatePreview, "#msg");
  49.  
  50. // Log message button
  51. Y.on("click", function (e) {
  52.     var msg = Y.one("#msg").get("value"),
  53.         cat = Y.one("#demo input[name=msg_cat]:checked").get("value"),
  54.         src = Y.one("#demo input[name=msg_src]:checked").get("value");
  55.  
  56.     Y.log(msg,cat,src);
  57. }, "#log");
  58.  
  59. // Support functions
  60. function updateSourceFilters(source, checked) {
  61.     var disposition = Y.one("#incexc").get("value"),
  62.         cfg = Y.config[disposition]; // Y.config.logInclude or logExclude
  63.  
  64.     if (checked) {
  65.         if (!cfg) {
  66.             cfg = Y.config[disposition] = {};
  67.         }
  68.         cfg[source] = true;
  69.     } else {
  70.         delete cfg[source];
  71.         if (!Y.Object.size(cfg)) {
  72.             delete Y.config[disposition];
  73.         }
  74.     }
  75.  
  76.     updatePreview();
  77. }
  78.  
  79. function updateLogLevel(level, checked) {
  80.     if (checked) {
  81.         yconsole.set("logLevel", level);
  82.         updatePreview();
  83.     }
  84. }
  85.  
  86. function updatePreview() {
  87.     var filters   = Y.all("#demo input[name=src_filter]:checked"),
  88.         cfg = {
  89.             logLevel: Y.one("#demo input[name=log_level]:checked").get("value")
  90.         };
  91.  
  92.     if (filters.size()) {
  93.         cfg[Y.one("#incexc").get("value")] = Y.Array.hash(filters.get("value"));
  94.     }
  95.  
  96.     Y.one("#preview").set("text",Y.substitute(
  97.         "// YUI instance configuration
  98. " +
  99.         "var Y = YUI({cfg});
  100.  
  101. " +
  102.         "// Log statement
  103. " +
  104.         'Y.log("{msg}", "{lvl}", "{src}");',
  105.         {
  106.             cfg: Y.JSON.stringify(cfg, null, 4),
  107.             msg: Y.one("#msg").get("value"),
  108.             lvl: Y.one("#demo input[name=msg_cat]:checked").get("value"),
  109.             src: Y.one("#demo input[name=msg_src]:checked").get("value")
  110.         }));
  111. }
  112.  
  113. });
YUI({base:"../../build/", timeout: 10000}).use("console", "selector-css3", "json-stringify", function (Y) {
 
// Add the default filtering of sourceC messages
Y.config.logExclude = {
    sourceC : true
};
 
// Create and render the Console
var yconsole = new Y.Console({
    boundingBox: "#console",
    style: "block"
}).render();
 
 
// Set up event listeners
// Source include or exclude select
Y.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();
}, "#incexc");
 
// delegate all checkbox and radio group clicks via a single event subscriber
// routing to the appropriate function based on the input name
var clickHandlers = {
    src_filter : updateSourceFilters,
    log_level  : updateLogLevel,
    msg_src    : updatePreview,
    msg_cat    : updatePreview
};
 
Y.delegate("click", function (e) {
    var input   = e.currentTarget,
        handler = clickHandlers[ input.get("name") ];
 
    if (handler) {
        handler(input.get("value"), input.get("checked"));
    }
 
}, "#demo", "input[name]");
 
// Log message input and radio groups
Y.on("keyup", updatePreview, "#msg");
 
// Log message button
Y.on("click", function (e) {
    var msg = Y.one("#msg").get("value"),
        cat = Y.one("#demo input[name=msg_cat]:checked").get("value"),
        src = Y.one("#demo input[name=msg_src]:checked").get("value");
 
    Y.log(msg,cat,src);
}, "#log");
 
// Support functions
function updateSourceFilters(source, checked) {
    var disposition = Y.one("#incexc").get("value"),
        cfg = Y.config[disposition]; // Y.config.logInclude or logExclude
 
    if (checked) {
        if (!cfg) {
            cfg = Y.config[disposition] = {};
        }
        cfg[source] = true;
    } else {
        delete cfg[source];
        if (!Y.Object.size(cfg)) {
            delete Y.config[disposition];
        }
    }
 
    updatePreview();
}
 
function updateLogLevel(level, checked) {
    if (checked) {
        yconsole.set("logLevel", level);
        updatePreview();
    }
}
 
function updatePreview() {
    var filters   = Y.all("#demo input[name=src_filter]:checked"),
        cfg = {
            logLevel: Y.one("#demo input[name=log_level]:checked").get("value")
        };
 
    if (filters.size()) {
        cfg[Y.one("#incexc").get("value")] = Y.Array.hash(filters.get("value"));
    }
 
    Y.one("#preview").set("text",Y.substitute(
        "// YUI instance configuration
" +
        "var Y = YUI({cfg});
 
" +
        "// Log statement
" +
        'Y.log("{msg}", "{lvl}", "{src}");',
        {
            cfg: Y.JSON.stringify(cfg, null, 4),
            msg: Y.one("#msg").get("value"),
            lvl: Y.one("#demo input[name=msg_cat]:checked").get("value"),
            src: Y.one("#demo input[name=msg_src]:checked").get("value")
        }));
}
 
});

CSS

  1. #console {
  2.     position: static;
  3.     float: left;
  4. }
  5. #demo .yui-console .yui-console-title {
  6.     border: 0 none;
  7.     color: #000;
  8.     font-size: 13px;
  9.     font-weight: bold;
  10.     margin: 0;
  11.     text-transform: none;
  12. }
  13.  
  14. #demo .yui-console .yui-console-entry-meta {
  15.     margin: 0;
  16. }
  17.  
  18. .filter-controls p label {
  19.     display: block;
  20.     margin: .25em 0;
  21. }
  22. #demo input {
  23.     vertical-align: middle;
  24. }
  25.  
  26. .form {
  27.     clear: left;
  28.     padding: 1em 0;
  29. }
  30.  
  31. .form span {
  32.     padding-left: 3em;
  33. }
  34.  
  35. #msg {
  36.     width: 50%;
  37. }
  38.  
  39. .filter-controls {
  40.     width: 180px;
  41.     margin-left: 1em;
  42.     float: left;
  43. }
  44.  
  45. #preview {
  46.     background: #eee;
  47.     border: 1px solid #999;
  48.     margin: 1em 0;
  49.     overflow: auto;
  50.     padding: 1em;
  51.     width: 480px;
  52. }
#console {
    position: static;
    float: left;
}
#demo .yui-console .yui-console-title {
    border: 0 none;
    color: #000;
    font-size: 13px;
    font-weight: bold;
    margin: 0;
    text-transform: none;
}
 
#demo .yui-console .yui-console-entry-meta {
    margin: 0;
}
 
.filter-controls p label {
    display: block;
    margin: .25em 0;
}
#demo input {
    vertical-align: middle;
}
 
.form {
    clear: left;
    padding: 1em 0;
}
 
.form span {
    padding-left: 3em;
}
 
#msg {
    width: 50%;
}
 
.filter-controls {
    width: 180px;
    margin-left: 1em;
    float: left;
}
 
#preview {
    background: #eee;
    border: 1px solid #999;
    margin: 1em 0;
    overflow: auto;
    padding: 1em;
    width: 480px;
}

More Console Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings