1. Introduction

In this article, I’d like to introduce about some open source Javascript loggers that can be used for logging at client side. Today, Single Page Application (SPA) is being adopted and used for a lot of web applications. SPA has a many advantages such as: separating the UI and data, reducing the loading time, fast,  very good for responsive sites. With SPA, almost of the UI logic, states,..are handled at client side. When the application logic is complex, if there is any bugs or issues, it may take time to figure out and fix. To improve the situation, we can add logging at the client side to support us in quickly reproduce and fix the bugs/issues.

2. Some open source Javascript Loggers

In this section, we will get though some of the most popular open source Javascript Loggers.

2.1. Log4Javascript

log4javascript is a JavaScript logging framework based on the Java logging framework log4j

Log levels are supported: ALL, TRACE, DEBUG, INFO, WARN, ERROR, FATAL, OFF

Built-in appenders:  AlertAppender, AjaxAppender, PopUpAppender, InPageAppender, BrowserConsoleAppender

Source code: https://sourceforge.net/projects/log4javascript/

Current Version: 1.4.13

Website: http://log4javascript.org/

License: Apache License, Version 2.0

2.2. Log4js

Log4JS is also a logging class in similar spirit to Apache Logging, specifically Log4J.


Built-in appenders:   AjaxAppender, ConsoleAppender, FileAppender, JSAlertAppender, MetatagAppender, WindowsEventsAppender

Source code: https://github.com/stritti/log4js

Current Version: 1.0.0

License: Apache License, Version 2.0

2.3. LogJS

Less than than 1k compressed and minified, LogJS is a lightweight logging utility for JavaScript.

Supported levels: INFO, WARN, ERROR

Built-in appenders: CORSAppender, DOMAppender, LocalStorageAppender

Source code: https://github.com/bfattori/LogJS

Current Version: 1.2.1

License: MIT

2.4. Minilog

Minilog is a lightweight client & server-side logging with Stream-API backend.

Supported levels: DEBUG, INFO, WARN, ERROR

Appenders: Array, Console, jQuery, localStorage

Source code: https://github.com/mixu/minilog

Website: http://mixu.net/minilog/

Current Version: 3.0.0

License: MIT

2.5. JS-Logger

JS-Logger is a lightweight, unobtrusive, configurable JavaScript logger.

Supported levels : DEBUG, INFO, TIME, WARN, ERROR, OFF

Appenders:  Console

Source code: https://github.com/jonnyreeves/js-logger

Current Version: 1.2.0

License: MIT

2.6. Canadarm

Canadarm is a Javascript logger that makes it easy to send logs to a remote server.

Supported levels : DEBUG, INFO, , WARN, ERROR, FATAL

Appenders: Javascript Console, Beacon (sends log to a configured URL endpoint)

Source code: https://github.com/cerner/canadarm/

Current Version: 1.0.2

License: Apache License, Version 2.0

3. Conclusion

Client log is necessary for web applications that have complex processing at the client side.  And there are a lot of Javascript loggers as above. Before selecting the one that is suitable for our project, we should consider which type of output we that we want. For some applications, we just want the log to be printed out to console. But for some applications, we want to send the log to the server side for further analysis and processing. And in such cases, we have to select the logger that support streaming or Ajax feature. About me, I recently experienced a requirement of customer about storing the log in the Localstorage of the web browser. And when there is any issue, customer will guide the end users to get the whole Localstorage and send back to them for analysis if the issues are difficult to be reproduced.  After considering the list, we were select the LogJS finally.


0 0 vote
Article Rating