This is the last in a series of posts on logging. The first post describes how group based logging can be a powerful tool , the second post introduces Bragi, a NodeJS logging framework , and this post discusses Bragi for the Browser

Bragi, a Javascript Logger

Last week I introduced Bragi-Node , a Javascript, NodeJS based logging library. This week I'd like to introduce the browser version of Bragi . My team and I have been using a version of this library for the past year. Next to unit tests (and in some ways even more benefical than them), group-based logging has been the most useful tool in our toolbox.

In my previous posts, I talked about some of the benefits of logging and why groups and colors are important, so I'll just briefly mention them here:

Groups

By group based logging, I mean log messages that are categorized by groups. Not levels (info, warn, error), like most logging libraries I've encountered, but groups. Filtering certain types of messages (and sending them to the console or a remote host) is possible with groups. Bragi also allows namespacing, so you can have a group, like "error:customerController:fetchUsers" - this would be interpreted as an error and it is able to be filtered.

We could log with the group "app1:component1:userId", and filter out only log messages from the app1 namespace; or even more fine-grained to show only app1:component1 messages. Or, by using regular expressions (which Bragi supports), we could show all messages that involve userId (which could be a dynamic string of the actual user's ID or whatever you'd like), by specifying to show logs from ".*:userId".

Colors

My philosophy lately has been to log everything. I liberally liter my code with log messages: every time a function is called or returned, anytime a significant bit of logic is run, etc. Of course, if there's no way to filter the logs and all messages look the same, I'd have a huge problem. It's really a data visualization problem (for me, log messages are data).

Color coding groups makes it possible to see any number of groups at once, while still gaining insight from the logs. If you enable all logs and see a color repeating over and over, it means some function or group is being called a lot. Being able to visualize that, especially when a system is running in production, is incredibly useful. Colors are a great visual cue. They can help you regain the context of how the code works by enabling all messages and tracing the flow of execution. It's easier to maintain context when different groups are easily distinguishable.

Javascript Browser Logging

Bragi itself as a library is new, but the ideas behind it are old. Improvements, suggestions, and criticisms are all welcome. Check out the browser version of Bragi on github . Or, open your console to see an example. Happy logging.