How to safely wrap `console.log`?

Question

Suppose I want to include some calls to console.log for some legitimate production reason, say for something like a unit test harness. Obviously I would not want this to throw a premature exception if the browser doesn't have a console, or if no console is present.

What's the best way to create a simple log function to log stuff to the console, or silently fail without error if no console is present?

The accepted answer to the question linked above:

var log = Function.prototype.bind.call(console.log, console);
log.apply(console, ["this", "is", "a", "test"]);

Can this log function be called normally on IE, and the use of apply here is just to show it's possible? And, I assume from the linked question that this will fail if IE's console is closed when it runs, so log won't work even after the console opens, correct? If that's wrong, can someone explain how it works?

This ycombinator article seems relevant. Are they are talking about the same IE behavior as the question linked above?

Function.prototype.apply.apply(console.log, [console, arguments]);

Works both on IE9 broken console.log, and regular console.log from other vendors. Same hack as using Array.prototype.slice to convert arguments into a real array.

This works nicely in my chrome console.

function echo(){
  Function.prototype.apply.apply(console.log, [console, arguments]);
}

Simplified:

function echo(){
  Function.apply.call(console.log, console, arguments);
}

Add a check and return:

function echo(){
  return window.console && console.log &&
         Function.apply.call(console.log, console, arguments);
}

The example above looks adequate to me. I don't have IE on hand to test it, though. Is this a reasonable approach for safely wrapping console.log?

---

More questions

Following the link in nav's answer below, we see the code:

Function.prototype.call.call(console.log, console,
    Array.prototype.slice.call(arguments));

What is the purpose of converting arguments to an array in this case? I guess it must fail in some browser if you don't do this? And, opera weird behavior and console-less browsers aside, shouldn't something like this pretty much work for every other browser as well? And does prototype serve a purpose in the above examples, or are we just being pedantic... Function.call.call or Object.call.call or for that matter isNaN.call.call seem to work just as well as Function.prototype.call.call.

Answer 1

Try using the code snippet below... (this is my preferred approach because it makes you independent of window.console)

var logger = (function (c) {
    "use strict";
    var m = {
        log: function (a, t) {
            if (!c) { return; /* return or call your custom function here */ }
            var l = c.log,
                f = t === undefined ? l : (this.__dict__[t] || l);
            f.apply(c, a)
        },
        __dict__: {
            "trace": c.trace,
            "debug": c.debug,
            "info": c.info,
            "warn": c.warn,
            "error": c.error
        }
    };

    return {
        trace: function () { m.log(arguments, "trace"); },
        debug: function () { m.log(arguments, "debug"); },
        info: function () { m.log(arguments, "info"); },
        warn: function () { m.log(arguments, "warn"); },
        error: function () { m.log(arguments, "error"); },
        log: function () { m.log(arguments, undefined); }
    };
}(window.console))

So you may now try these in your code and see the result

logger.info("Hello");
logger.trace("Hello");
logger.debug("Hello");
logger.warn("Hello");
logger.error("Hello");
logger.log("Hello");

Answer 2

Use Consolation

My ridiculously overengineered console:

• prevents errors if there's no console
• prevents logging in production if you left console.log statements in your code
• supports console.error, console.group, and all such other methods
• still gives you backtraces to your log statements

It's amazing.

But really, you just shouldn't leave console statements lying around in your code.

Behold and tremble! Presenting: Consolation.js

Answer 3

Sorry, there was a bug in my post. Don't know how I missed it.

The PROPER way to create a global console object, if it does not exist:

if (typeof console === "undefined"){
    console={};
    console.log = function(){
        return;
    }
}

Answer 4

My solution is a little different. I create a standard shortcut for all console.log calls: In my case kag(whatever I want to report in the console).

I test for IE, if IE I send the results to an alert box. If Chrome then displays in the console. This also means IE will always work even in console is closed:

Code:

var iever = getInternetExplorerVersion();
if(iever>-1){
function kag(params){
    alert(params);
}
} else {
var kag = console.log.bind(console, "REPORT: ");
}

function getInternetExplorerVersion() {
var rv = -1;
if (navigator.appName == 'Microsoft Internet Explorer') {
var ua = navigator.userAgent;
var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null){
  rv = parseFloat( RegExp.$1 );
}
}
return rv;
}

Answer 5

Can this log function be called normally on IE, and the use of apply here is just to show it's possible?

Yes, and yes. That particular example was aimed squarely at the "is it a real function" part of the linked question.

And, I assume from the linked question that this will fail if IE's console is closed when it runs, so log won't work even after the console opens, correct?

Correct. As explained in my answer on that question, the console object is not exposed until the first time the developer tools are opened for a particular tab. Most developers use a console shim, in which case the Function#bind approach becomes a little obsolete because you may as well use the Function#apply.apply method.

What is the purpose of converting arguments to an array in this case?

There isn't one, it's redundant. Unless it's a custom log implementation, in which case the developer may have a reason to convert an arguments object to an array.

And does prototype serve a purpose in the above examples, or are we just being pedantic...

Well, yes and no. Some developer may have unwittingly changed Function.call to a custom function or value. Of course, they could break Function.prototype.call too, but this is far less likely to happen by accident.

Answer 6

I like to use:

'console' in window && console.log("Boom!");

It works in all browsers and is easy to understand.