m-web-logger

A simple logger util for web development (browser-only).

A practice for decorators(experimental) in TypeScript. (ChatGPT can easily do better than this, sad story)

install

npm install m-web-logger

Log types & default setting

m-logger has 5 levels, you can pass it by url query parameter, default is slient.

log levels are below:

• slient: no log (for production)
• error: only error log
• warn: includes warning, error
• info: includes warning, error, info
• all: includes warning, error, info, log

you can also change the level by setting each logger instance, or use label filter.

Priority comparison: global filter > label filter > instance's level > default log level

Setting

Check browser demo by npm run dev.

browser's log level setting is controlled by url query parameter log_level.

For example: {your-web-location}?log_level=${level}. you can change default level by change level

you can also filter log info by url query parameter label_filter, this will filter some logs, and only output the logs that contain the filter string in the label.

Usage

• create a logger

  // es module
  import { Logger, LogLevel } from "m-web-logger";
  
  // umd from browser window
  // const { MLogger } = window;
  // const { Logger, LogLevel } = MLogger;
  
  // default usage
  const logger = new Logger();
  // or pass label or level to it
  const logger1 = new Logger({
    label: "some-module",
    level: LogLevel.warn,
  });

• basic use

  logger.log(1);
  logger.info(1, 2);
  logger.warn(1, 2, 3);
  logger.error(1, 2, 3, 4);
  
  const obj = { a: "hello world" };
  logger.log(obj);
  logger.info(1, obj);
  logger.warn(1, 2, obj);
  logger.error(1, 2, 3, obj);

• setting a label for bug trace

  you can define a label for more-specific log information.

  logger.setLabel("define-label");
  logger.log(obj);
  logger.info(1, obj);
  logger.warn(1, 2, obj);
  logger.error(1, 2, 3, obj);

• setting level for filter

  you can change log url params or use setLevel method to filter log information.

  // change the url params log to `error`
  // or use setLevel
  logger.setLevel(LogLevel.error);
  logger.log(obj); // filtered
  logger.info(1, obj); // filtered
  logger.warn(1, 2, obj); // filtered
  logger.error("after set-lelve, you can only see error log");

• Global Filter

  /**
   * global filter.
   */
  const filter_logger = new Logger({
    label: "global-filter-log",
  });
  
  Logger.filter = (config, ...args) => {
    if (config.label === "global-filter-log") {
      return true;
    }
    return false;
  };
  
  filter_logger.log("I can log");
  labelLogger.log("I can not");

• Use Interceptor

  you can use Interceptor function to get log event.

  const logger1 = new Logger({
    label: "interceptor-log",
  });
  const logger2 = new Logger({
    label: "some-module",
  });
  // catch logger event here
  Logger.useInterceptor((config, ...args) => {
    const { instance, level } = config;
    // get 'some-module' error-event
    if (instance.label === "some-module" && level === LogLevel.error) {
      logger1.warn("Interceptor get [some-module] error event. do something");
    }
  });
  logger2.error("some error event;");

Development

# for browser
npm run dev

Build

npm run build