A simple logger for the browser, wrapping console and adding scopes, colors and emojis.

Installing

Install @stibstack/tiel with your preferred package manager.

npm install @stibstack/tiel

import createLogger and call it to create a logger instance. Names are formatted as logger:scope. This allows for finegrained enabling of logging the pieces you need to see in the console.

import { createLogger } from "@stibstack/tiel";

localStorage.setItem("DEBUG", "app:posts");
const postsLogger = createLogger("app:posts");

postsLogger.log("Hello from posts!");
// output: <app:posts> Hello from posts!

const serviceLogger = createLogger("app:bookmarks");
serviceLogger.log("Hello from bookmarks!");
// this will not output anything since there is no matching scope.

Log levels

The default LogLevel is log. You can set a higher or lower loglevel by using localStorage.setItem("LOG_LEVEL", "DEBUG")

"TRACE" | "DEBUG" | "INFO" | "LOG" | "WARN" | "ERROR";

Logger options

export type CreateLoggerOptions = {
  /**
   * Customize or disable colors for logger
   */
  color?: LoggerColor | boolean;
  /**
   * Customize or disable emoji prefix for logger
   */
  emoji?: boolean | string;
  /**
   * Custom storage interface adhering to localStorage interface for overriding the default storage
   */
  storage?: LoggerStorage;
};