GitHub - pgiani/clean_logs: A better console.log for the browser

README.md

console-logging

Turn your plain console from this

To this,

A wrapper around usual console.log() - This is a utility that I use along with frontend React project to visualize complex objects. You can use the console logs for debugging and easily turn them on/off by setting the logging level and have logs that are clear to read.

Usage

Install

npm i clean_logs

const logging = require("clean_logs");
const logger = logging.logger;

or ES6 import

import {LOGGING_LEVELS, logger } from 'clean_logs';

Logging Level

The use case of logger.setLevel() is in production environment, just switch the logger on/off and you have extra debug logs! So remember to include logger.xyz() during app development.

logger.setLevel(logging.LOGGING_LEVELS.CRITICAL)
logger.setLevel("CRITICAL")  // Supports string levels: CLEAR, DEBUG, DEBUGDATA, WARNING, ERROR,

// or get level from environment variable
logger.setLevel(process.env.LOGGING_LEVEL)  // process.env.LOGGING_LEVEL = "CLEAR|DEBUG|DEBUGDATA|WARNING|ERROR"

logger.error("Transaction fail, transaction id 1")  // No output

logger.setLevel(logging.LOGGING_LEVELS.ERROR)
logger.error("Transaction fail, transaction id 1")  // Output 'Transaction fail, transaction id 1'

// multi-args is supported with any combination of strings, objects, arrays or functions.
logger.error("Hi", "I am", "an error")  // Output 'Hi I am an error'

Log Formatting

You have 5 log types: clear, debug, debugdata, warning, error. They all have the same great formatting but each have some unique differences. This is how a console.log fo this.props on a React App looks

Example:

import React, { Component } from 'react';
import { LOGGING_LEVELS, logger } from 'clean_logs';

logger.setLevel(LOGGING_LEVELS.DEBUG);

class Demo extends Component {
  componentDidMount() {
    console.log(this.props);
    logger.debug('Demo Render', this.props);
  }
  render() {
    return <div>Test</div>;
  }
}

export default Demo;

logger.debug

If you pass a string as one of the parameters, clean_logs will use it as the title of the group. It groups any object or arrays. Every type is displayed with a unique color and style,

• Arrays or Objects will be grouped and the length of the objects added to the label
• Functions are DarkCyan someFuntion().
• Numbers are SaddleBrown and italic 100.
• string are blue SomeString
• undefined are Chocolate and italic UNDEFINED
• null are Brown and italic NULL
• dates are DarkGreen 10/10/2018
• moment object is ForestGreen and formated as lll 10/10/2018
• EMPTY are DeepPink EMPTY

1    logger.debug('Demo Render Title Here', this.props);
2    logger.debug(this.props, 'Demo Render Title Here');
3    logger.debug(this.props, 'Demo Render Title Here', {
4      a: 100,
5      x: 'more messages',
6    })

Lines 1 and 2 generated the same output title at the top of the group and because we only have one object or array the group is open by default.

Line 3 generates a title at the top and each object is on a separated group with a number indicating the length of the object.

logger.debugdata

Same as logger.debug but it strips out any function from the output, good for when you are debugging only the data in the console.

logger.warning logger.error

Same as logger.debug, any strings parameters will be added to the top of the group with an orange or red label, the group data will default to a close group.

The color label can be opened to show a trace for you to find out where the console.log was called from, it is not a very clean trace but I still find it useful.

License

MIT