Log4fe

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

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