How we built dashboards with a micro-frontend & Grafana

Modern dev teams rely on data. Without analytics, how would you know if your team is improving its deployment velocity and code quality over time? At CodeRabbit, we want teams to have the data that matters when it comes to tracking their performance.

That’s why we created a unique integration with Grafana, a leading analytics platform, that provides greater visibility into your organization’s code review metrics through interactive dashboards directly in the CodeRabbit UI.

CodeRabbit, an AI-powered code reviewer, can be seamlessly installed on your git platform to review pull requests and deliver actionable insights. By embedding Grafana as a micro-frontend, we’ve made it easier for teams to understand the impact of code reviews on their organization.

In this post, we’ll cover why we decided to integrate dashboards in our application via a micro-frontend framework and how we built our Single SPA micro-frontend with the help of Qiankun.

Why use Grafana as a Single SPA micro-frontend?

When it comes to showing analytics in a single-page application, developers often face challenges. Building custom dashboards from scratch requires significant coding effort, and maintaining that code becomes a burden. Adding new metrics or dashboard panels typically involves creating new APIs and modifying frontend code, making the process slow and cumbersome.

To address these challenges, we decided to leverage Grafana as a Single SPA micro-frontend. This decision allowed us to streamline the addition of new dashboards while managing Grafana separately and deploying updates with ease. By doing so, we reduced development overhead and improved scalability.

Adding Grafana as a Single SPA micro-frontend with Qiankun

Grafana offers robust data visualization capabilities. To integrate it seamlessly into our UI, we forked Grafana, customized its dashboard page, and implemented it using Qiankun.

This micro-frontend architecture enabled us to retain the native Grafana experience while tailoring the interface to align with CodeRabbit’s needs. Micro-frontend architectures are particularly useful when integrating multiple JavaScript frontend applications, even those built with different frameworks.

After exploring various micro-frontend framework options, we chose the Qiankun micro-frontend library to implement this architecture. Qiankun, built on top of the single-spa micro-frontend framework, provides a simple API that makes it easy to manage micro-frontend architectures.

Using the Qiankun micro-frontend framework to overcome architectural challenges

Most micro-frontends are mounted in the main app based on specific routes. However, our use case required dashboards to be displayed dynamically across multiple routes and on tab changes. To achieve this, We used Qiankun’s loadMicroApp API which implements the single-spa parcel api under the hood.

This approach eliminated common limitations of micro-frontend architectures. To improve performance and faster load time. We have used caching in our Grafana proxy server.

Securing our Grafana micro-frontend with authentication

Authenticating Grafana using our UI credentials was a critical challenge. Typically, Grafana relies on an API key for access. To handle this, we created a proxy server which first authenticates a CodeRabbit user and then proxy forwards Grafana.

While this setup worked initially, it exposed a potential vulnerability: Grafana allowed any query to be sent in the request, posing a risk of data leaks.

To mitigate this, we added a validation layer that:

1. Ensures only pre-defined queries are allowed.

2. Scopes requests to specific organizations and restricts access to queries explicitly associated with dashboards.

This solution secured the Grafana micro-frontend integration by preventing unauthorized data access and ensuring a robust implementation.

The flow diagram above shows an micro-frontend architecture overview. The CodeRabbit UI mounts the Grafana dashboard using Qiankun by accessing a public micro-frontend endpoint that exports component lifecycle functions. Once mounted, all API calls to Grafana are routed through our authentication service for secure access.

Our use case for dashboards

At CodeRabbit, our goal is to demonstrate the value our product adds to an organization by providing AI-driven code reviews. To achieve this, we collect and analyze data stored in our data layer and use it to create insightful panels that tell the story of CodeRabbit's impact on our customers’ development cycle.

The dashboards include metrics such as the average number of pull requests (PRs) reviewed per day and the total number of reviews conducted by CodeRabbit. Additionally, they showcase the various language-specific tools leveraged to fine-tune reviews, offering deeper insights into how CodeRabbit adapts to diverse development environments.

These panels also highlight key contributions, such as the number of comments, suggestions, and chat conversations facilitated by CodeRabbit to improve code quality.

By integrating Grafana as a Single SPA micro-frontend, we were able to design and serve these visualizations seamlessly within the CodeRabbit UI while reducing the amount of development and maintenance work.

Benefits of Single SPA micro-frontend architecture

Integrating Grafana as a Single SPA micro-frontend architecture has transformed how we deliver analytics to our users. Since Grafana is a separate service to modify dashboards, we just have to make changes in Grafana dashboards and provision changes using Grafana Dashboard provisioning.

Using Grafana as a Qiankun and Single SPA micro-frontend in CodeRabbit has allowed us to deliver a powerful, secure, and dynamic analytics experience for our users. Looking ahead, we plan to expand our dashboard offerings and explore additional Grafana plugins to provide even more insightful analytics.

For developers looking to streamline analytics integration, we highly recommend exploring Grafana as a micro-frontend—it’s a game-changer for simplifying dashboard management and enhancing scalability.

Interested in trying out CodeRabbit? Get a free 14-day trial. Want to join our team? Check out our Careers page!