'Winston 3.0 colorize whole output on console

I am developing a Node.js application, using babel-cli as an ES6 transpiler and I am using Winston 3.0 as my logging service.

Question:

I want the whole output of the messages from the winston logger to appear in color, not just the label and the message, but the timestamp as well. I know that, in Winston 2.x that was in some ways possible (don't know how though).

I have already tried different NPM Packages like winston color and winston-console-formatter, but they don't seem to work.

I have defined my logger as follows:

    import winston from 'winston'
    
    let alignColorsAndTime = winston.format.combine(
        winston.format.colorize({
            all:true
        }),
        winston.format.label({
            label:'[LOGGER]'
        }),
        winston.format.timestamp({
            format:"YY-MM-DD HH:MM:SS"
        }),
        winston.format.printf(
            info => ` ${info.label}  ${info.timestamp}  ${info.level} : ${info.message}`
        )
    );
    
    export const logger = winston.createLogger({
        level: "debug",
        transports: [
            new (winston.transports.Console)({
                format: alignColorsAndTime
            })
        ],
    });

Still the output looks something like this:

While I'd rather have it look styled like this:

Solution 1:^[1]

Try with the code below. It will combine both formatting. It works for me.


let alignColorsAndTime = winston.format.combine(
    winston.format.colorize({
        all:true
    }),
    winston.format.label({
        label:'[LOGGER]'
    }),
    winston.format.timestamp({
        format:"YY-MM-DD HH:mm:ss"
    }),
    winston.format.printf(
        info => ` ${info.label}  ${info.timestamp}  ${info.level} : ${info.message}`
    )
);
    
export const logger = winston.createLogger({
    level: "debug",
    transports: [
        new (winston.transports.Console)({
            format: winston.format.combine(winston.format.colorize(), alignColorsAndTime)
        })
    ],
});

Note the padding has to handle the colour. Ex:


const padding= info.level.length <= 7?7:17;  //padding differently if it has colour.
${info.level.padEnd(padding,' ')}

Tested with:

"winston": "^3.1.0"

Solution 2:^[2]

simply use addColors() method

const { createLogger, format, transports, addColors } = require('winston');
const { combine, colorize, label, timestamp, json, prettyPrint, printf } = format;
require('winston-mongodb');

let myCustomFormat = format.combine(
  colorize({ all: true }),
  label({ label: '[LOGGER]' }),
  timestamp({ format: 'YY-MM-DD HH:MM:SS' }),
  printf(
    (info) =>
      ` ${info.label} ${info.timestamp}  ${info.level} : ${info.message}`
  )
);

addColors({
  info: 'bold blue', // fontStyle color
  warn: 'italic yellow',
  error: 'bold red',
  debug: 'green',
});

const logger = createLogger({
  level: 'info',
  transports: [new transports.Console({ format: combine(myCustomFormat) })],
});

This worked for me for customizing colors and font style.

Possible options from the doc are below.

Font styles: bold, dim, italic, underline, inverse, hidden, strikethrough.

Font foreground colors: black, red, green, yellow, blue, magenta, cyan, white, gray, grey.

Background colors: blackBG, redBG, greenBG, yellowBG, blueBG magentaBG, cyanBG, whiteBG

Solution 3:^[3]

This will colorize and display the times in readable format. And store all the errors into a file as well!

import { createLogger, format, transports } from 'winston'

const loggerFormat = format.combine(
  format.timestamp(),
  format.printf((info) => {
    return `${info.timestamp} - [${info.level.toUpperCase().padEnd(7)}]: ${
      info.message
    }`
  }),
  format.colorize({
    all: true,
  })
)

const logger = createLogger({
  format: loggerFormat,
  transports: [
    new transports.Console({ level: 'silly' }),
    new transports.File({ filename: 'error.log', level: 'error' }),
  ],
})

export default logger

Solution 4:^[4]

from this post https://github.com/winstonjs/winston/issues/1388

const colorizer = winston.format.colorize();

const logger = winston.createLogger({
  level: 'debug',
  format: combine(
    winston.format.timestamp(),
    winston.format.simple(),
    winston.format.printf(msg => 
      colorizer.colorize(msg.level, `${msg.timestamp} - ${msg.level}: ${msg.message}`)
    )
  ),
  transports: [
    new transports.Console(),
  ]

});

Solution 5:^[5]

another idea:

const { createLogger, format, transports } = require('winston');
const { combine, timestamp, label, printf } = format;

const colorizer = winston.format.colorize();

const logger = winston.createLogger({
    levels: {
        error: 0,
        warn: 1,
        info: 2,
        debug: 4
    },
    format: combine(
        winston.format.timestamp(),
        winston.format.simple(),
        winston.format.printf(msg =>
            colorizer.colorize(msg.level, `${msg.timestamp} - ${msg.level}: ${msg.message}`)
        )
),
    transports: [
        new (winston.transports.Console)({
            // format: winston.format.combine(winston.format.colorize(), alignColorsAndTime),
            prettyPrint: true,
            colorize: true,
            timestamp: true,

        }),
    ],
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	scytale
Solution 3	Mehedi Hasan
Solution 4	kheengz
Solution 5	Nan fish

'Winston 3.0 colorize whole output on console

Question:

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]