nicer-log's Introduction

Nicer-log

A nicer replacement of console.log.

Used by Shopee ISFE Team and Shopee React Native Team.

Prints log with color group labels
Logs the status of Promises or asynchronous functions
Filters logs in Developer Tools, OR
Filters logs by whitelist / blacklist
Can be removed completely in production by using Babel/TypeScript transformers

Install

npm install --save nicer-log

Usage

Print a log

import nicerLog from "nicer-log";
const log = nicerLog("App");

log("Initializing...");

Log Promises

import nicerLog from "nicer-log";
import { fetchUserInfo } from "./api";
const log = nicerLog("User");

const promise = fetchUserInfo();
log.async("Fetching user info", promise);

Filter logs

Just use built-in filter features to temporarily filter logs.

Setup whitelist or blacklist

import { setNicerLogBlacklist, setNicerLogWhitelist } from "nicer-log";

setNicerLogWhitelist(["App", "User", "DashboardReducer"]);
setNicerLogBlacklist(["User"]);

Remove nicer-log in Production

nicer-log provides plugins to remove nicer-log for Babel and TypeScript.

Using Babel

Install the babel plugin

npm install --save-dev nicer-log-remover-babel

Edit your .babelrc to enable the plugin

{
  "plugins": ["module:nicer-log-remover-babel"]
}

Using TypeScript

Install the TypeScript plugin

npm install --save-dev nicer-log-remover-typescript

tsc doesn't seem to support custom transformers yet. You might want to use the transformer with third-party loaders. Config for webpack and ts-loader for example:

const nicerLogRemover = require("nicer-log-remover-typescript").default;

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "ts-loader",
        options: {
          getCustomTransformers() {
            return {
              before: [nicerLogRemover]
            };
          }
        }
      }
    ]
  }
  // ...
};