Console logs are not always well structured and eye-pleasing. Unpleasant and messy console takes away from the bliss of a developer. I recently came across a package named which does exactly this — making consoles meaningful and elegant. consola It has browser support, pausing and resuming logs, prompt support and . other useful features Installation You can install it by using , or . npm yarn pnpm npm i consola Trying it out Spin up a new and start exploring. node/express app Basics For a quick hands on experience, in your node application, throw an explicit error and then log it with the help of . consola import { consola } from "consola"

try {
    throw Error("Unexpected error")
} catch (error) {
    consola.error(error)
}

consola.error("Error...")
consola.info("Info...")
consola.warn("Warning...")
consola.log("Logged...") New Instance You can create a new consola instance with the help of the method and use that instead of the default global instance. createConsola import { createConsola } from "consola"

const logger = createConsola({
    level: 0, // error/fatal logs
    fancy: true,
    formatOptions: {
        date: true,
        columns: 20
    },
})

logger.info("Info...") // this WON'T work
logger.error("Error...") // this will work Set the log to selectively allow only certain types of logs. of means only and logs are logged. The default log level is 3. level Log level 0 FATAL ERROR Reporters Reporters are representations of logs in the terminal. Consola (v3.2.3) provides 3 out of the box, namely, , and . They are configured based on log levels on the global instance. reporters basic fancy browser consola To add a custom reporter to your newly created instance, you can use the property which is an array of reporters. reporters import { LogLevels, consola, createConsola } from "consola"

const infoLogger = createConsola({
    fancy: true,
    formatOptions: {
        date: true,
        columns: 20
    },
    reporters: [
        {
            log: (log) => {
                if (log.level === LogLevels.info) {
                    consola.info(JSON.stringify({
                        date: new Date().toLocaleString("default", { dateStyle: "full" }),
                        logs: new Array().concat(log.args.map((l, i) => `${l}${i < log.args.length - 1 ? `,` : ``}`)).join(" "),
                    }, null, 4))
                } else {
                    consola.error(
                        new Error("invalid log method")
                    )
                }
            }
        }
    ]
}) Now, when you use any logging method on this instance, it will only log for the method and throw an error for other methods. You just created a custom info message logger which you can further modify however you want. info // for the above instance
infoLogger.error("Won't work") ❌
infoLogger.info("Will work") ✔️ Multiple reporters per instance are also supported allowing you to separate logs into desired representations. reporters: [
    {
        log: (log) => {
            if (log.level === LogLevels.info) {
                consola.info(JSON.stringify({
                    date: new Date().toLocaleString("default", { dateStyle: "full" }),
                    logs: new Array().concat(log.args.map((l, i) => `${l}${i < log.args.length - 1 ? `,` : ``}`)).join(" "),
                }, null, 4))
            } else {
                consola.error(
                    new Error("invalid log method")
                )
            }
        }
    },
    {
        log: (log) => {
            createConsola({
                fancy: true,
                formatOptions: {
                    date: false
                }
            }).log(log)
        }
    }
] Methods such as , and are available to handle reporters for an instance. addReporter setReporters removeReporter Wrapping native method with instance console consola Doing so will redirect all the native calls to the specified instance. console.log consola infoLogger.wrapConsole()
// consola instance `infoLogger` will print the table
console.table(["Info", "Second Info"]) will restore the native functionality of and won't redirect to consola instance. restoreConsole console.log There are several util methods present in which you can use to further customize the logs. consola/utils Prompts Prompts are supported in consola with the help of , a tool to build command-line apps. Check this out for some . clack prompt examples in consola Conclusion Correctly and elegantly representing console logs is an important task if you want to improve and helps you with just that. developer productivity consola Also published . here

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This story will praise and/or roast a product, company, service, game, or anything else people like to review on the Internet.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Making Your Console Logs Elegant With Consola

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Anthropic’s New Protocol Wants to Be the HTTP of AI

Business Trends and Gamer Behavior in Esports on PC and Console

Discovering the Console in JavaScript

I made a discovery: SVG and SVG animations in the browser console are possible!

Return of the Consoles: Recreating Pokémon in Python

Art of Console Logs ✏️📈

Anthropic’s New Protocol Wants to Be the HTTP of AI

Business Trends and Gamer Behavior in Esports on PC and Console

Discovering the Console in JavaScript

I made a discovery: SVG and SVG animations in the browser console are possible!

Return of the Consoles: Recreating Pokémon in Python

Art of Console Logs ✏️📈

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps