Skip to content

Latest commit

 

History

History
166 lines (119 loc) · 6.99 KB

README.md

File metadata and controls

166 lines (119 loc) · 6.99 KB
Raw

Log4fe

A light & configurable logger for front-end based on lajax, docs here

features

  • Auto log error when fetching static resource
  • Auto log AJAX error
  • Auto report logs to your own server
  • Report & log by level
  • Name & customize multi loggers
  • Beauty your console

install

npm i log4fe

configure

You can directly pass the URL:

import Log4fe from 'log4fe'

const log4fe = new Log4fe('<URL to report logs>')

or pass the config object:

import Log4fe from 'log4fe'

const log4fe = new Log4fe({
  url: '<URL>',
  ...
})

Log4fe Config

Name Required Type Description Default
url ✅ string The url to report logs N/A
interval ❌ number Interval for checking and reporting the log queue 5000
maxErrorReq ❌ number Limit of reporting. When the limit exceeded, reporting function will no longer work 5
showDesc ❌ boolean Whether to show the init message in console true
autoReport ❌ boolean Whether the log message will be auto pushed to the queue true
autoLogError ❌ boolean Whether log & report uncaught script error true
autoLogRejection ❌ boolean Whether log & report uncaught promise rejection true
autoLogNetwork ❌ boolean Whether log & report AJAX request true
networkLogFilter ❌ (method: string, url: string) => boolean A filter function for logging what you want () => true
outputToConsole ❌ boolean Whether show logs in console true
loggerInitOptions ❌ LoggerInitOptions The initial params for creating a new logger true

Single Logger Config

Name Required Type Description Default
name ✅ string Logger name main
enabled ❌ boolean Whether enabled when logger created, can be changed later in console main
level ❌ string Logger level, ignore lower levels info
styled ❌ boolean Whether to log with style in console true
styleCSS ❌ `string GetStyleCSSFunc` Whether to log with style in console
prefix ❌ `string GetPrefixFunc` Only work when styled set to true string before log message in console
logTime ❌ boolean Log time string before message in console true
sendToServer ❌ boolean Whether to report on this logger true 
// Type Annotation
type GetStyleCSSFunc = (colorEnum: ColorEnums) => string

type GetPrefixFunc = (
  dateStr: string,
  timeStr: string,
  loggerName: string,
  level: LoggerLevel
) => string

interface LoggerInitParam {
  name: string
  level?: LoggerLevel
  enabled?: boolean
  styled?: boolean
  styleCSS?: GetStyleCSSFunc | string
  prefix?: GetPrefixFunc | string
  logTime?: boolean
  sendToServer?: boolean
}

type LoggerInitOptions = Omit<LoggerInitParam, 'name'>

Usage

// log4fe.ts / js
import Log4fe from 'log4fe'

// Init
const log4fe = new Log4fe({
  url: '<YOUR CONFIGURED SERVER URL>',
  ... // Other config mentioned up above in `LoggerInitParam`
})

export default log4fe

// foo.ts / js
import log4fe from './log4fe.ts'

const logger = log4fe.getLogger('foo', {
  level: 'debug',
  ... // Other options mentioned up above in `LoggerInitOptions`
})

logger.debug('what you want to debug')
logger.info('what you want to log')
logger.warn('what you want to warn')
logger.error('DANGER!')

Notice & Tricks

  • Do Not support Node.js for there are plenty of better libs for logging in Node.js env

  • Do Not new multi instance for Log4fe is singleton. You can get instance by using Log4fe.getInstance() instead

  • Log4fe instance will manage every logger you created by getLogger by using a Map. Although you can set options by visit a specific logger like log4fe.getLogger('app').styled = false, the better practice may be passing a proper config object when invoke getLogger('app', APP_OPTIONS) first time

  • Frequence & Log array size may be 2 aspects to set proper interval when sending logs

  • You can customize almost details after having a glance at the interface in doc

  • Support React Native env, but currently not support auto log error and other browser-related features

  • The class Log4fe will be attatched to globalThis when instance init, for better experience when debug in console (Try type Log4fe.getInstance().list() in chrome console)

Bugs & Contribute

Bugs & feature requirement can be feedback at github

Please be sure you finished reading the doc and the bug can be reproduced. Any detail about your bug is welcomed, such as Browser version, OS, output in console, etc.

Contribute

The project is coded with Typescript

git clone [email protected]:SoraYama/log4fe.git

cd log4fe

yarn # npm i

# develop
yarn dev

Please make sure eslint works properly and feel free to submit PR :)

License

MIT