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

(Last Updated On: April 29, 2021)

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)

Ad:
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.

Ad:

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;
}());
Ad:

Spread the love
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments