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.
Supported levels : ALL, TRACE, DEBUG, INFO, WARN, ERROR, FATAL, OFF
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.