Brolog is Logger for Angular in Browser like Npmlog.
- Out-of-Box Browser Support.(with
<script src='//unpkg.com/brolog'></script>) - Out-of-Box Angular & SystemJS Support.(See: brolog-angular-demo project)
- Npmlog compatible interface.(i.e.
log.verbose('Brolog', 'Hello, %s', 'world!'')) - Native TypeScript Support.(With typings)
- Node.js Support.(Node.js example)
- Support show real line number in browser console.
We enabled this in Chrome DevTools via blackboxing a bit ago.What I really get frustrated by is that I cannot wrap console.* and preserve line numbers
Brolog implementes Loggable:
interface Loggable {
error (moduleName: string, message: string, ...args: any[]): void
warn (moduleName: string, message: string, ...args: any[]): void
info (moduleName: string, message: string, ...args: any[]): void
verbose (moduleName: string, message: string, ...args: any[]): void
silly (moduleName: string, message: string, ...args: any[]): void
}You can import and use it by:
import { Loggable } from 'brolog'Here's two example:
- First example to demo easy to use in browser, and how it looks like npmlog.
- Second example to demo integrate with angular DI & SystemJS.
You can enable Brolog in your page by simple add the following script tag.
<script src="//unpkg.com/brolog"></script><html>
<head>
<script src="//unpkg.com/brolog"></script>
</head>
<body>
<h1>Brolog in Browser Demo</h1>
<script>
var log = Brolog.instance('verbose')
log.info('Test', '123 info message')
log.verbose('Test', '123 verbose message')
log.silly('Test', '123 silly message(should not appear)')
</script>
</body>
</html>Link: Brolog Live demo
Brolog is written mainly for act as a logger with Angular. Here's how to Inject Brolog in Angular.
- install brolog
$ npm install brolog --save
...- setup SystemJS
System.config({
map: {
brolog: 'node_modules/brolog/bundles/brolog.js'
}
})- import
import { Brolog } from 'brolog'- inject to @NgModule
providers: [
Brolog,
]- inject to constructor
class LogApp {
constructor(
private log: Brolog
) {}
}- log
class LogApp {
testLog() {
this.log.verbose('Brolog', 'test log:%s', 123)
// this will log to browser console
}
}More details, please see the brolog-angular-demo git repository at here.
Link: Brolog ♥ Angular Live demo
Get a out-of-the-box log instance to use it directly.
import { log } from 'brolog'If fhe environment variable BROLOG_LEVEL is set, that will be used to set log.level() for the global Brolog instance log.
import { Brolog } from 'brolog'
const log = new Brolog()
// additional stuff ---------------------------+
// message ----------+ |
// prefix ----+ | |
// level -+ | | |
// v v v v
log.info('fyi', 'I have a kitty cat: %j', myKittyCat)- {String} 'silent' | 'error' | 'warn' | 'info' | 'verbose' | 'silly'
The level to display logs at. Any logs at or above this level will be
displayed. The special level silent will prevent anything from being
displayed ever.
-
level{String} The level to emit the message at -
prefix{String} A string prefix. Set to "" to skip. -
message...Arguments toutil.format
Emit a log message at the specified level.
For example,
- log.silly(prefix, message, ...)
- log.verbose(prefix, message, ...)
- log.info(prefix, message, ...)
- log.warn(prefix, message, ...)
- log.error(prefix, message, ...)
Example:
-
Shell
BROLOG_PREFIX="(Contact|Puppet)" node wechaty.js -
This will equals to set by code API:
log.prefix(/^(Contact|Puppet)$/)
Brolog comes with well test suit to ensure the behavior is expected.
$ npm run unit
...Unite Test Suite: link
$ npm run e2e
...End to End Test Suite: link
P.S. running E2E test is based on brolog demo project: git repository
- ES Module support
- export
Loggableinterface
- Update to use Chatie DevOps toolsets.
- Upgrade TypeScript, ESLint, RollUp, etc.
- Enable GitHub Actions.
- Fix browser broken problem caused by the
rollupbehavior change. (#69) - Node.js: Add environment variable
BROLOG_PREFIXto set theprefixfilter of globalloginstance. - Browser: Add URL parameter variable
BROLOG_PREFIXto set theprefixfilter of globalloginstance.
- Continuous Deployment to
brolog@nextwhen the minor version in SemVer is odd(development release). - Node.js: Add environment variable
BROLOG_LEVELto set the loglevel of globalloginstance. - Browser: Add URL parameter variable
BROLOG_LEVELto set the loglevel of globalloginstance.
- Add
Brolog.enableLogging()method for:-
falsefor disable logging -
truefor enable logging -
printTextFunc: (text: string)for enable logging to a function.
-
- Support for creating individual instances.(We only have one singleton instance before)
Compatible with AOT & WebPack with Angular v4
- Rewrite from JavaScript to TypeScript
- Add UMD/AMD/System Module support
- Add a new method:
enableLogging()to get/set logger
- added timestamp to log output
- fix CI back to work
- added CD to auto deploy source code to NPM after passed CI
- added End to End test with Angular
- supported include by
scripttag - full support unpkg.com
- added Unit Test
- supported Angular Dependency Injection
- supported show real line number by set blackbox
- added TypeScript definition file
- supported work with SystemJS & Angular
- JavaScript Modules & Build Tools - YouTube
- Writing Declaration Files
- Angular Dependency injection tokens
- Angular 2 Errors
- ES6 vs ES2015 - What to call a JavaScript version?
- Code & Docs © 2017 Huan LI <zixia@zixia.net>
- Code released under the Apache-2.0 License
- Docs released under Creative Commons