This is a simple project built over a few days to test out tech I was unfamiliar or not terribly well versed in. The idea was to create a modular visualization of log data (HTTP 200s, 5XXs, honeypot hits) and git commits, and offer some basic alerts when something goes wrong.

A simple Node.js server is pumping out fake log data in JSON format over a websocket via This page is capturing that data and triggering page level events for every log item so that several loosely coupled modules can interact with them.

An Object Oriented Javascript library is capturing log events and storing them in its buffers. Every few seconds it draws onto a hidden canvas and then creates a PNG data URI. The PNG is appended to the 'real time' list. The idea here was to avoid having a long living canvas that had to be resized, as well as minimizing the amount of state kept within the library.

A React component is listening for honeypot requests and keeping track of the hits by IP address, geolocating them and displaying on the Google Map. The hit locations grow on the map, and the user has the ability to block each IP address. That library is here.

In addition to log events the Node server emits commit events that are displayed along the real time graph. If error levels increase significantly, the user can look to see if there's a causal relationship.

The log data is also output at the bottom of the page.

Source code available at

What happens when you let Karl Pilkington commit code? Click the 'commit code' button.

  • Lots of error condition checking
  • Finish the React panels for each commit message
  • Improve the real time graph to emphasize the differences in 200s vs 5xxs (add counts to right side of graph)
  • Create the real time chat React UI (or maybe do it in Angular)

Real Time Data


Honeypot Hits

Incoming Data