Learnings from LFX Mentorship Program @ CNCF — Jaeger

Starting this journey was both exciting and fulfilling — and now, here I am at the finish line, having successfully completed the LFX Mentorship Program and reflecting on the experience through this blog. The past three months have been incredible — surpassing my expectations in so many ways.

About Jaeger — Distributed Tracing Platform

Jaeger is an open-source distributed tracing system originally developed by Uber Technologies. It helps monitor and troubleshoot complex microservices architectures by visualizing request flows.

What is Jaeger-UI?

Jaeger UI is the web-based user interface of the Jaeger tracing system. It allows users to visualize, search, and analyze trace data collected from microservices. Integrated tightly with Jaeger’s backend, the UI fetches and displays trace information, enabling developers to identify performance bottlenecks and understand service dependencies in real time.

What were the project expectations?

The project was aimed at:

• Replacing the deprecated charts library react-vis to display the Scatter Plot on Trace Search Page, Service Performance Monitor views on Monitor tab, and Operation Metrics Table on Monitor tab.

Scatter Plot

SPM View

Operations Table

• Replacing the deprecated graphs library react-vis-force with plexusto display the Force Directed Graph. It should be able display a large number of services (3000+)

Force Directed Graph

• Merging the UI of Force Directed Graph and Directed Acyclic Graph into one canvas.

What is plexus?

Plexus is a JavaScript/TypeScript visualization library developed by the Jaeger UI team. Think of it like another npm package for displaying large graphs. It provides flexible, interactive graph rendering components used to display complex data relationships, such as service dependency graphs in distributed tracing. Plexus powers parts of the Jaeger UI, especially for rendering trace graphs and dependency diagrams, making tracing data easier to interpret.

Roadmap 🚗

• recharts is a fairly popular library for displaying beautiful charts. After some careful thoughts, I decided to move forward with this and replaced the existence of react-vis with recharts .

Scatter Plot (Jaeger-UI, after the migration)

SPM View

Operations Table

• How I replaced the Force Directed Graph built with react-vis-force with plexus ? This required a lot of changes internally in the plexus library to add support for sFDP layout engine.

I have built a beautiful illustration to explain it more easily:

How the System Architecture page now looks like:

Hierarchical Layout

Force Directed Layout

What was the most challenging part?

• Working on a large codebase with legacy tests and components requires a lot of careful code changes. You changed one line of code and there you go with fixing 10 unit tests.
• Adding the SFDP layout support to plexus required numerous iterations and benchmarks to verify if the layout is able to render large number of nodes effeciently. I used a 100K trace dataset to build a large graph to verify the changes. The dataset is available at: https://zenodo.org/records/13956078 The function to generate service dependency array from traces data is available at: https://github.com/jaegertracing/jaeger-ui/blob/main/scripts/utils/parse-traces.js

A huge thanks to my mentors, Yuri Shkuro and Jonah Kowall, who ensured that no question went unanswered. Those weekly sync-ups really helped a lot.