Line number and source file hidden behind ConsoleOutputAppender. in Kotlin/JS

[er453r]

When using Kotlin/JS in the browser, the console output hides the true location of the logged line and always outputs:
ConsoleOutputAppender.kt:8 INFO: [] Log test!

I know this is how browser console works, and I have tried various ways to mitigate it (like inlining) but have not found a way to fix this.

Does any one know a hack around this, or am I using the library wrong?

[github-actions]

Thank you for reporting an issue. See the wiki for documentation and slack for questions.

[er453r]

Just wanted to let you know that I have found an elegant way to do this (an agnostic example here, sorry, I do not have any serious time for a PR). The whole thing is a trick using kotlin external class and binding to console.log in js world.

external class Logger {
    @JsName("ktjsloggerinfo")
    fun info(message: String)

    @JsName("ktjsloggerwarn")
    fun warn(message: String)

    @JsName("ktjsloggererror")
    fun error(message: String)

    @JsName("ktjsloggerenabled")
    var enabled: Boolean
}

@JsName("window")
external val logger: Logger

@Suppress("UnusedReceiverParameter")
fun Logger.init() {
    js("window.ktjsloggerenabled = true")

    js(
        """
    Object.defineProperty(window, "ktjsloggerinfo", {
        get: function () {
            return ktjsloggerenabled ? console.log.bind(window.console, '%c%s%c  [INFO] %c%s', 'color:dimgrey;', new Date().toISOString(), 'color:initial;', 'color:initial;') : function(){}
        }
    })
"""
    )

    js(
        """
    Object.defineProperty(window, "ktjsloggerwarn", {
        get: function () {
            return ktjsloggerenabled ? console.log.bind(window.console, '%c%s%c  [WARN] %c%s', 'color:dimgrey;', new Date().toISOString(), 'color:gold;', 'color:initial;') : function(){}
        }
    })
"""
    )

    js(
        """
    Object.defineProperty(window, "ktjsloggererror", {
        get: function () {
            return ktjsloggerenabled ? console.log.bind(window.console, '%c%s%c [ERROR] %c%s', 'color:dimgrey;', new Date().toISOString(), 'color:lightcoral;', 'color:initial;') : function(){}
        }
    })
"""
    )
}

Then you can just use it like this:

logger.init() // you only need to do this once before use - this could be automated inside level logic

logger.info("This is an info test") // no need to bind to class /line- since js console does this for us!
logger.warn("This is a warning test")
logger.error("This is an error test")