https://github.com/efureev/js-logger
JS Logger for browser and etc..
https://github.com/efureev/js-logger
browser log logger logging
Last synced: 2 months ago
JSON representation
JS Logger for browser and etc..
- Host: GitHub
- URL: https://github.com/efureev/js-logger
- Owner: efureev
- Created: 2022-02-27T14:00:03.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-10-15T11:38:43.000Z (over 3 years ago)
- Last Synced: 2025-03-28T12:42:27.004Z (about 1 year ago)
- Topics: browser, log, logger, logging
- Language: TypeScript
- Homepage:
- Size: 1.2 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Browser Logger
[](https://github.com/efureev/js-logger/actions/workflows/nodejs.yml)
[](https://codecov.io/gh/efureev/js-logger)
[](https://www.npmjs.com/package/@feugene/browser-logger)
[](https://conventionalcommits.org)
## Install
```shell
yarn add @feugene/browser-logger
```
## Example in Browsers
| Chrome | Safari |
|--------------------------------|--------------------------------|
|  |  |
|  |  |
## Use
### Basic use
```js
import { BrowserLogger } from '@feugene/browser-logger'
const logger = new BrowserLogger()
// ...
logger.log('test')
logger.info('test', 'prefix', 3)
logger.error(new Message('test'))
```
### Advanced use
```js
import { Logger, ConsoleDriver, ColorCollection, LEVEL_INFO } from '@feugene/browser-logger'
const logger = new Logger(
new Logger({
driver: new ConsoleDriver(),
colors: new ColorCollection({ // colors map
black: '#000000',
red: '#EC5f67',
yellow: '#FAC863',
green: '#99C794',
blue: '#6699CC',
white: '#FFFFFF',
}),
level: LEVEL_INFO
})
)
// ...
this.logger.panel('Title', {
bgColor: 'yellow', // => '#FAC863'
color: 'teal', // => 'teal' because it absents in color map
offset: 5,
})
// ...
const msg = new Message()
msg.pushBlock(MessageBlock.instance('prefix').color('#FFF').background('#00FFAA').paddingLeft(2))
msg.pushBlock(MessageBlock.instance('Basic text', { color: this.logger.getColors() }).color('red'))
logger.log(msg)
```
### Deep Advanced use
You can use your logger-wrapper with your custom panels:
```js
import { BrowserLogger, colors } from '@feugene/browser-logger'
export default class Logger {
constructor(level) {
this.logger = BrowserLogger(level)
return new Proxy(this, {
get(target, prop) {
if (prop in target) {
return target[prop]
}
return target.logger[prop]
},
})
}
warning(text, title = '⚠️ warning', offset = 0) {
return this.logger.panel(
title,
{ bgColor: colors.orange, color: colors.white, offset },
text
)
}
info(text, title = 'info', offset = 0) {
return this.logger.panel(title, { bgColor: colors.teal, offset }, text)
}
error(text, title = '🆘 error', offset = 0) {
return this.logger.panel(
title,
{ bgColor: colors.red, color: colors.white, offset },
text
)
}
}
```
And use it:
```js
import { Message, MessageBlock, colors } from '@feugene/browser-logger'
{
// ...
this.logger = new Logger()
this.logger.warning('MessageBlock', undefined, 4)
this.logger.warning('MessageBlock', 'ALERT')
this.logger.error('MessageBlock')
this.logger.error('MessageBlock')
this.logger.info('Info', 'text')
this.logger.panel('Title', undefined, 'Post Text')
this.logger.panel('Title', {}, 'Post Text')
this.logger.panel('Title', {
bgColor: '#5FB3B3',
color: '#1B2B34',
offset: 5,
})
const colors = this.logger.getColors()
const msg = Message.instance().pushBlock(
MessageBlock.instance('panel 1', { colors: colors })
.background('green')
.borderRadius(3)
.offsetLeft(1)
.padding(2, 4),
MessageBlock.instance('panel 2')
.background(colors.get('blue'))
.offsetLeft(1)
.padding(2, 4),
MessageBlock.instance('panel 3')
.background('#000')
.color('#fff')
.borderRadius(10)
.offsetLeft(5)
.padding(2, 4),
MessageBlock.instance('4 330')
.background(colors.get('purple'))
.color('#fff')
.borderRadius(10)
.offsetLeft(5)
.padding(2, 20)
)
this.logger.log(msg)
this.logger.panel('Title', {
bgColor: '#5FB3B3',
color: 'gray',
offset: 5,
})
}
```
## Features
### Log levels
The Logger logs messages by `Log Levels`.
There are 4 message types:
- Error
- Info
- Debug
- Trace
- There are 4 log levels:
- `LEVEL_ERROR` - Log only `Error` type messages
- `LEVEL_INFO` - Log only `Error` and `Info` type messages
- `LEVEL_DEBUG` - Log only `Error`, `Info` and `Debug` type messages
- `LEVEL_TRACE` - Log only `Error`, `Info`,`Debug` and `Trace` type messages
- `LOG_ALL` - It's an alias of `LEVEL_TRACE`
You may define log level of your Logger. By default, log level is `LOG_ALL`.
You may point your own Log level:
```js
logger.setLevel(INFO | DEBUG) // will be logs only `info` & `debug` messages
```
### Methods
**Basic**
```js
const logger = new BrowserLogger(level)
logger.log()
logger.error()
logger.info()
logger.debug()
logger.trace()
```
**Panel**
```js
const logger = new BrowserLogger(level)
logger.panel(
'App',
{ bgColor: 'red', color: 'white', offset: 2 },
'description',
'error'
)
```
**Panels**
```js
const logger = new BrowserLogger(level)
logger.panels(
'info',
{ text: 'panel 1', bgColor: 'teal', color: 'yellow', borderRadius: 5 },
{ text: 'panel 2', color: 'white' },
{ text: 'panel 3', color: 'red', offset: 2, padding: 1 }
)
logger.panels(
'trace',
{
text: 'App',
bgColor: 'grayLight',
color: 'gray',
offsetLeft: 2,
borderRadius: 3,
padding: [2, 4],
},
'description'
)
```
### Debugging
```js
const defaultBlockConfig = {
offsetLeft: 1,
offsetRight: 1,
borderRadius: 3,
padding: [2, 4],
}
const panel = {
...defaultBlockConfig,
bgColor: 'gray',
color: 'white',
}
const makePanel = (text, panelConfig) => ({
text,
...panel,
...panelConfig,
})
const prefixPanels = (prefix, ...panels) => logger.panels(
prefix,
makePanel('Application', { offsetLeft: 10 }),
...panels.map((panel) => {
if (typeof panel === 'string') {
return panel
}
return {
padding: [2, 4],
...panel,
}
})
)
const names = ['first', 'second']
logger.enableDebug()
// or `logger.enableDebug({ printFragmented: true })`
// or `logger.enableDebug({ debugFn: console.log })`
// or `logger.enableDebug({ debugFn: logger.getDriver().output.log })`
prefixPanels(
'trace',
'Booter',
4,
'booted plugins',
...names.map((text) => this.logger.makeNamedPanel(text, 'tealLabel'))
)
logger.disableDebug()
```
### Return a result
```js
const list: string[] = logger.returnResult().panels('info',
{ text: 'panel 1', bgColor: 'teal', color: 'yellow', borderRadius: 5 },
{ text: 'panel 2', color: 'white' },
{ text: 'panel 3', color: 'red', offsetLeft: 2, padding: 1 }
)
list === [
'%cpanel 1%cpanel 2%cpanel 3',
'background:#5FB3B3;color:#FAC863;border-radius:5px;',
'color:#FFFFFF;',
'color:#ff000f;margin-left:20px;padding:1px;'
]
```
### Group collapsed
```js
logger.groupCollapsed(
{ text: 'Collapse panel', bgColor: 'teal', color: 'yellow', borderRadius: 5 },
['text1', 'text2']
)
```
```js
const message = Message.instance({ text: 'ERROR', color: 'red' })
message.pushBlock(
MessageBlock.instance({ text: 'Fatal Error', bgColor: 'red', color: 'white', borderRadius: 5 }),
MessageBlock.instance('description')
)
logger.groupCollapsed(message, ['text1', 'text2'])
```
**From error**
```js
const error = new Error('Custom error')
error.stack = 'line 1\nline 2'
// with stack collapsed
logger.error(
error.title,
{ text: 'Error', bgColor: 'red', borderRadius: 5 },
error
)
// or simple error
logger.error(
'Error Title',
{ text: 'Error', bgColor: 'red', borderRadius: 5 }
)
```
Example of this:
`Collapsed view`
`Expanded view`
```js
const error = new Error('Custom error')
const message = Message.instance(
this.makeBasicPanel('ERROR', 1, { color: 'red' }),
this.logger.getColors()
)
message.pushBlock(
MessageBlock.instance(
this.makeNamedPanel(title, 'red', { color: 'white' })
),
MessageBlock.instance(text, { colors: this.logger.getColors() })
)
this.logger.error(message, '', error)
```