console.log(x): The way out
Tags: javascript, typescript, html, web
Published: 2020-11-25 20:45:47

Logging is a critical technique developers need to trace code problems and bugs irrespective of the language. Logs can be written to flat files (text), database tables, IDE/web browser consoles and many more.

Web developers will always find a way to forget cleaning up the console.log(x) used in JavaScript codes. To me, this smells untidiness: leaving debug data to the eyes of the public is not clean for a professional (when left intentionally).

2 years ago I came up with a technique that allow me to ignore removing logs from every single portion of my JavaScript code. Same can be implemented for any language. This is done by creating a custom log class and methods. Instead of calling console.log(x), you can do logger.log(x). On the logger class, there is a boolean variable named 'is_active =true'. On production environment, this value is set to is_active =false and all log lines will be bypassed from not being printed to console.


[View code on Github Repository](https://github.com/PrinceTegaton/js_logger)

The snippet is shown below. The overloads can be ignored.

**logger.js**
```
let is_active = true;

const logtype = {
    "default": 1,
    "info": 2,
    "warning": 3,
    "error": 4,
    "exception": 5,
    "debug": 6,
    "table": 7
};

function log(data, type = logtype.default) {
    if (!is_active) return;

    try {
        switch (type) {
            case logtype.default:
                return console.log(data);
            case logtype.info:
                return console.info(data);
            case logtype.warning:
                return console.warn(data);
            case logtype.error:
                return console.error(data);
            case logtype.exception:
                return console.exception(data);
            case logtype.debug:
                return console.debug(data);
            case logtype.table:
                return console.table(data);
        }
    } catch (ex) {
        console.log(data);
    }
}

function info(data) {
    if (is_active) console.info(data);
}

function warning(data) {
    if (is_active) console.warn(data);
}

function error(data) {
    if (is_active) console.error(data);
}

function exception(data) {
    if (is_active) console.exception(data);
}

function debug(data) {
    if (is_active) console.debug(data);
}

function table(data) {
    if (is_active) console.table(data);
}
```

**Implementation**
```
<script>
	window.onload = function () {
	log('hello world..');
	log('I have an information', logtype.info);
	log('But i must warn you', logtype.warn);
	log('About the errors you have made', logtype.error);
	log('Well, exceptions are not the end of the world', logtype.exception);
	log('And that calls for more debugging', logtype.debug);

var array = [
	{
		name: 'James',
		age: 21,
		location: 'Nigeria',
		role: 'Backend'
	}, {
		name: 'Mike',
		age: 19,
		location: 'Los Angeles',
		role: 'Frontend'
	}, {
		name: 'Parker',
		age: 26,
		location: 'London',
		role: 'Tester'
	}];

log(array, logtype.table);
	
</script>
```

The result in web browser console is seen below.

![web-console](https://dev-to-uploads.s3.amazonaws.com/i/vftnv8wy8bkmhlj18brk.png)
 
Change the variable 'is_active=false' and all log activities will be stopped.

PS: this does not mean you should not clean up logs from code