lines-logger

A simple browser logger that features:

• Colored tags
• Show origin source files
• Supports log levels that can be changed in runtime.

Make your logs look like this:

Installation:

With npm:

Install the logger npm install lines-logger --save.

By including a link:

<script src="https://cdn.jsdelivr.net/npm/lines-logger@{{VERSION}}/lib/browser.js"></script>

where {{VERSION}} is . e.g. https://cdn.jsdelivr.net/npm/lines-logger@1.2.0/lib/browser.js

Configuration

Create logger

If you use javascript:

var LoggerFactory = require('lines-logger').LoggerFactory; // import {LoggerFactory} from 'lines-logger';
var loggerFactory = new LoggerFactory();
var logger = loggerFactory.getLogger('tag');

If you use Typescript:

import {Logger, LoggerFactory} from 'lines-logger';

let factory: LoggerFactory = new LoggerFactory();
let logger: Logger = factory.getLogger('tag');

Log anywhere in your code:

logger.log('Hello world')(); // pay attention to () in the end. `logger.log` returns a function that should be called, thus `console.log` is called from YOUR location instead of the library.
logger.debug('My array is {}, object is {}', [1,2,3], {1:1, 2:2})();

Documentation

LoggerFactory API

LogLevel

Logger API

Best practices:

• Check vue-webpack-typescript repository for an example of project structure with lines logger.
• If you need time for your logs, modern browser provide that out of the box. E.g. in chrome you can go to preferences -> console -> Show timestamps.
• You can turn off logs for production builds, while creating logger factory new LoggerFactory('disable'); or using method setLogWarnings('disable'). E.g. for webpack you can use DefinePlugin, the example is here
• You would probably like to expose loggerFactory to global scope (window). Thus in case of troubleshooting you can go to production site and turn on logs during runtime.

  var LoggerFactory = require('lines-logger').LoggerFactory;
  var loggerFactory = new LoggerFactory();
  window.loggerFactory = loggerFactory

  Now if you need to debug your production site you can just open devtools and type loggerFactory.setLogWarnings('trace')
• If you want to intercept/mock logs for testing or any other purpose, you can pass object callbacks as a 2nd param to a loggerFactory constructor

  import { spy } from 'sinon'
  var loggerSpy = spy()
  new LoggerFactory('trace', {
  error: function () {
    loggerSpy(arguments)
  },
  warn: function () {
    loggerSpy(arguments)
  },
  trace: function () {
    loggerSpy(arguments)
  },
  debug: function () {
    loggerSpy(arguments)
  },
  log: function () {
    loggerSpy(arguments)
  }
  })

Contributions

This package uses only ts with target es5. I also added babel config, but it seems like it's redundant, so it's not used.

• yarn install - installs devDependencies. I use yarn.lock but npm work as well.
• yarn build - compiles code to ./lib directory. This build has:
  • Type definitions in index.d.ts
  • Umd version for import via script tag browser.js
  • CommonJS version for if you use bundler like webpack index.js.
• yarn test - runs mocha tests from `./test/index.ts.
• yarn lint:check - lints the src directory. Ignore the test dir.
• yarn lint:fix - automatically fixes wrong formatting in src.
• yarn publish - updates npm version