Debug logging with React


I'd like to:

  1. insert debug logging statements into my code that I want to be able to turn on and off during development; and
  2. then have these statements stripped out entirely in production.

To accomplish stripping out the logs for production, I've seen that the React project itself uses this idiom:

if ("production" !== process.env.NODE_ENV) {
    // warn or log or whatever
}

By compiling the modules with process.env.NODE_ENV set to "production" and then running the bundle through a dead code eliminator like UglifyJS, the logs will be eliminated as unreachable.

This is fine, but are there more flexible solutions? I'm thinking something like the debug() Node module, or really some even more powerful, like the Java logging APIs.

I am wondering why I'm not finding a module that combines the ("production" !== process.env.NODE_ENV) approach with debug().

var debug = function(msg) {
    if ("production" !== process.env.NODE_ENV) console.log(msg);
}
module.exports = debug;

Usage:

var debug = require("debug");
debug("some logs");

Sorry, I couldn't help myself ;). But really, there are plenty of JS logging frameworks out there (although I honestly think the solution above is simple enough that you don't need to over-complicate things).


Coming from a Java world, I was pleased to see there is a 'log4javascript' project.

http://log4javascript.org/

It has some cool stuff including a logging console with some features...

enter image description here