How to keep console.log line number in an wrapper function that also add an prefix text

/ December 24, 2018/ Angular, Ionic, Javascript, Programming, Typescript

Update: I have created an npm library with a better version of this idea. Take a look at it here: SaninnLogger Package!

A common problem while creating a logger function that uses console.log is that we loss the exact position where the log was called which makes it useless for debugging (specially on big code bases).

Use a logging function is really useful because it enables you to do a lot of extra things in each log call like send it to the server or append some text or even disabled it completely in a single place.

After a log of trial and error I figure out a way to make a function wrapper that uses console.log (also warn and error) without losing the line where the call was made.

SaninnLogger (Typescript)

const isDebug = true;
export class SaninnLogger {
    private logPrefix = '';
    constructor(logPrefix?: string) {
        if (logPrefix) {
            this.logPrefix = `[${logPrefix}]: `;
        }
    }

    get log(): Function {
        if (!isDebug) {
            return () => { };
        }
        const logPrefix = this.logPrefix;
        if (logPrefix.length) {
            return console.log.bind(window.console, logPrefix);    
        } else {
            return console.log.bind(window.console);    
        }
    }

   get warn(): Function {
        if (!isDebug) {
            return () => { };
        }
        const logPrefix = this.logPrefix;
        if (logPrefix.length) {
            return console.warn.bind(window.console, logPrefix);    
        } else {
            return console.warn.bind(window.console);    
        }
   }
    
    get dir(): Function {
        if (!isDebug) {
            return () => { };
        }
        const logPrefix = this.logPrefix;
        if (logPrefix.length) {
            return console.dir.bind(window.console, logPrefix);    
        } else {
            return console.dir.bind(window.console);    
        }
    }

    get error(): Function {
        if (!isDebug) {
            return () => { };
        }
        const logPrefix = this.logPrefix;
        if (logPrefix.length) {
            return console.error.bind(window.console, logPrefix);    
        } else {
            return console.error.bind(window.console);    
        }
    }

}

How to use it?

The constructor takes an optional string parameter that – if defined – will be be added as prefix of your calls.

const saninnLogger = new SaninnLogger('my-test');
    saninnLogger.log('please share this post!');

The above snippet will log: [my-test]: please share this post!

If the isDebug flag is false, it will log nothing. Obviously you have to set this in the way you need it in your application.

SaninnLogger (ES5)

var isDebug = true;
var SaninnLogger = /** @class */ (function () {
    function SaninnLogger(logPrefix) {
        this.logPrefix = '';
        if (logPrefix) {
            this.logPrefix = "[" + logPrefix + "]: ";
        }
    }
    Object.defineProperty(SaninnLogger.prototype, "log", {
        get: function () {
            if (!isDebug) {
                return function () { };
            }
            var logPrefix = this.logPrefix;
            if (logPrefix.length) {
                return console.log.bind(window.console, logPrefix);
            }
            else {
                return console.log.bind(window.console);
            }
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(SaninnLogger.prototype, "warn", {
        get: function () {
            if (!isDebug) {
                return function () { };
            }
            var logPrefix = this.logPrefix;
            if (logPrefix.length) {
                return console.warn.bind(window.console, logPrefix);
            }
            else {
                return console.warn.bind(window.console);
            }
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(SaninnLogger.prototype, "dir", {
        get: function () {
            if (!isDebug) {
                return function () { };
            }
            var logPrefix = this.logPrefix;
            if (logPrefix.length) {
                return console.dir.bind(window.console, logPrefix);
            }
            else {
                return console.dir.bind(window.console);
            }
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(SaninnLogger.prototype, "error", {
        get: function () {
            if (!isDebug) {
                return function () { };
            }
            var logPrefix = this.logPrefix;
            if (logPrefix.length) {
                return console.error.bind(window.console, logPrefix);
            }
            else {
                return console.error.bind(window.console);
            }
        },
        enumerable: true,
        configurable: true
    });
    return SaninnLogger;
}());