Simple Logger Module to hide console.log in production
Logging can be very useful for debugging, but is something generally not desired while running in production. There's a number of ways to automate this, and this article displays how to build a simple module that wraps console statements and only displays logs while in development.
This module needs to:
- Provide a familiar interface to that of console.log, if not idential
- Retain line numbers and other console.x features
- Automatically hide logs in production
Here's what you need:
First off, (as in most React setups), an environment variable is setup on build:
Package.json
"scripts": {
"start": "NODE_ENV=development webpack....
...
}
The module itself wraps console.log, correctly binding to its context and exposes itself as a singleton. (This is an example of a time it is good to use a singleton):
Logger.js
const DEBUG = process.env.NODE_ENV === 'development';
class Logger {
log = DEBUG ? console.log.bind(window.console) : () => {};
}
export default new Logger();
Finally, the component that can import and use the logger as needed:
Component.js
import Logger from './logger';
Logger.log('this will only log in development environments');
This can be enhanced by wrapping debug and info methods as well, or even adding a way to send the logs to the backend.