Papertrail Knowledge Base

Log colorization

How to enable colorization and how to customize with different colors, colorize certain programs or apps, and more.

Contents

Standard Colors

Papertrail can automatically colorize the system and program name links in the Web log viewer, like this:

colorize-stamp.png

Enable it in your Profile.

To colorize text within the actual log messages, generate log messages containing ANSI escape codes. Papertrail will colorize them as shown in More colorful logging with ANSI color codes. Papertrail honors ANSI color codes regardless of user-specific colorization preferences.

With colorized logs, the event viewer looks like this:

papertrail_logs_example.jpg

You can also customize almost any aspect of the log viewer. Read on for how to colorize a specific program, a specific system, change text size, or use completely custom colors and options.

Command-Line Client

Colorization for the papertrail command-line app is part of the papertrail-cli README.

Customize colors

Background

Our goal is always to expose the right level of customization and in the correct form, and not just create options for the sake of creating options. A more complex product, or even a more sophisticated one, is not always a better one.

With colorization, there's a slippery slope between a bit of color to add contrast and enhance readability, and an end-to-end custom theme markup. Those aren't likely to let you do more with your logs, especially compared to other ways which that time (ours and yours) could be invested.

However, you might have different design taste than we do, have a specific vision in mind, or just want to tinker. That's where the customizations below come in. And if you create a CSS that others might use, or you have comments or requests, please tell us more via support@papertrailapp.com.

Install Stylish

  1. Install Stylish, a browser extension to run user-generated CSS overrides for certain URLs (often called "user styles").

  2. Enable the extension. In your browser extensions settings, add a new style that applies to URL on the domain papertrailapp.com. Add the CSS overrides (see Examples below) and press "Save."

Here's a screenshot in Chrome:

papertrail_stylish_setup.png

Examples

Colorize certain programs or systems

Make the program mysqld orange:

#event_list li[data-program="mysqld"] .program a { color: #cb4b16; }

Make any system names containing db red:

#event_list li[data-system*="db"] .system a { color: red; }

Note the *= instead of = to match substrings within the system name, rather than = for exact match. These are standard CSS attribute selectors. Any selector can be used.

Instead of changing the color of the system name, here's how to make the entire message text red on dark red (for messages from systems containing db):

#event_list li[data-system*="db"] span.message { color: red; background-color: darkred; }

Colorized based on message contents

The same technique can be applied to the data-message attribute instead of the data-system attribute. This will colorize any messages containing "OMG" dark red.

#event_list li[data-message*="OMG"] span.message { color: red; background-color: darkred; }

Change text size

Reduce the log viewer display size with:

#event_list li { font-size: 10px; }

Reduce the search box size with:

#ftr #search input.text { font-size: 12px; }

Override all colors

The log message has 4 CSS elements: timestamp, system name, program name, and message text. Override any or all of them.

Here's an example that overrides all 4 message elements for a distinctly The Matrix look:

#event_list li time { color: darkgreen; }
#event_list li .system a { color: #3a6b49; }
#event_list li .program a { color: #8ba786; }
#event_list li .message { color: green; }

which will look like:

matrix.png

Or a very bright theme:

#event_list li time { color: #cdee46; }
#event_list li .system a { color: #26d51c; }
#event_list li .program a { color: #f143cc; }
#event_list li .message { color: #3064f7; }

colorization-bright.png

We don't change these tags often, so they are reliable for use in your CSS. Most Stylish changes take effect when you press the "Save" button in its CSS editor screen.

If you create a CSS that others might use, or you have comments or requests, please tell us more via support@papertrailapp.com.

Sample markup

This is an example message that the CSS below is operating on. The CSS above matches the data-program or data-system attributes of li. It then modifies the time tag or span tags inside (based on their CSS classes).

<li data-program="sshd" data-system="www23"> 
  <time datetime="2011-08-26T21:59:09-07:00">Aug 26 21:59:09</time> 
  <span class="system"><a href="">www23</a></span> 
  <span class="program"><a href="">sshd</a>:</span> 
  <span class="message">Some message</span> 
</li> 

Credits

Thanks to Sam Stokes and Rapportive and Luke Carpenter and Ghostworks for major contributions to this. Y'all rock.