Zippy Traces with Zipkin in your Browser

Wednesday, 19 June 2013

Last summer, we open-sourced Zipkin, a distributed tracing system that helps us gather timing and dependency data for the many services involved in managing requests to Twitter. As we continually improve Zipkin, today we’re adding a Firefox extension to Zipkin that makes it easy to see trace visualizations in your browser as you navigate your website.

This helps us see a holistic view of how an entire Twitter web page is generated from the many requests behind it. Zipkin’s web interface looks like this:

Zippy Traces with Zipkin in your Browser

By default, you choose a service you’re interested in, and Zipkin shows you the requests it traced that involved that service. Choose one and it will show you a waterfall visualization and other information. But a full web page load encompasses multiple HTTP requests and thus multiple Zipkin traces, and as a result it can be difficult to get a complete view of all the requests of a single page load in Zipkin. That’s where the extension comes in:

Zippy Traces with Zipkin in your Browser

The extension intercepts every HTTP request to a site you specify in the extension’s settings and adds special HTTP headers. Normally Zipkin selects a sample of requests to trace, but the special headers tell Zipkin that this specific request must be traced. The extension then retrieves the trace data from the Zipkin REST API and uses it to display a lightweight waterfall visualization for each request in a Firebug panel. Hovering over a segment of the waterfall shows the name of the service it represents.

Acknowledgements and Future Work

Zipkin was originally authored by Johan Oskarsson (@skr), Franklin Hu (@thisisfranklin), and Brian Degenhardt (@bmdhacks). This particular Firefox extension was authored by Isaac Sukin (@IceCreamYou). Although Zipkin was built for Twitter initially, it was designed to be used and extended by everyone. On top of that, we are working harder to make Zipkin more consumable and look forward to any contributions from the community. If you want to get involved by adding features or support browsers, please let us know on GitHub. If you find any issues, pull requests are always welcome! To stay in touch, follow @zipkinproject and join the Zipkin mailing list.