CodeRabbitがClaude Marketplaceに登場！Claude Marketplaceの発表を読む
Gurinder Singh
June 02, 2025
6 min read
How we built dashboards with a micro-frontend & Grafanaの日本語訳です。
現代の開発チームはデータを頼りにしています。分析がなければ、チームのデプロイ速度とコード品質が時間の経過とともに改善しているかを、どうすれば把握できるでしょうか。CodeRabbitでは、チームがパフォーマンスを追跡するために重要なデータを利用できるようにしたいと考えています。
そのため、主要な分析プラットフォームであるGrafanaとの独自の連携を構築し、CodeRabbit UI内のインタラクティブなダッシュボードを通じて、組織のコードレビュー指標をより詳しく可視化しました。
AIコードレビュアーのCodeRabbitは、Gitプラットフォームへシームレスにインストールしてプルリクエストをレビューし、実行可能な知見を提供できます。Grafanaをマイクロフロントエンドとして埋め込むことで、コードレビューが組織へ与える影響をチームが理解しやすくなりました。
この記事では、ダッシュボードをマイクロフロントエンドフレームワーク経由でアプリケーションへ統合した理由と、Qiankunを使ってSingle-SPAマイクロフロントエンドを構築した方法を紹介します。
シングルページアプリケーションで分析情報を表示する際、開発者は多くの課題に直面します。カスタムダッシュボードをゼロから構築するには多くのコーディング作業が必要で、そのコードの保守が負担になります。通常、新しい指標やダッシュボードパネルを追加するには、新しいAPIの作成とフロントエンドコードの変更が必要であり、プロセスは遅く煩雑になります。
こうした課題へ対処するため、GrafanaをSingle-SPAマイクロフロントエンドとして活用することにしました。この判断により、Grafanaを別個に管理して更新を簡単にデプロイしながら、新しいダッシュボードの追加を効率化できました。その結果、開発のオーバーヘッドを減らし、スケーラビリティを高めました。
Grafanaは強力なデータ可視化機能を提供します。UIへシームレスに統合するため、Grafanaをフォークし、そのダッシュボードページをカスタマイズして、Qiankunで実装しました。
このマイクロフロントエンドアーキテクチャにより、Grafana本来の体験を維持しながら、CodeRabbitのニーズに合うようインターフェースを調整できました。マイクロフロントエンドアーキテクチャは、異なるフレームワークで構築されたものを含む、複数のJavaScriptフロントエンドアプリケーションを統合する際に特に有用です。
さまざまなマイクロフロントエンドフレームワークを検討した後、このアーキテクチャの実装にはQiankunライブラリを選びました。single-spaマイクロフロントエンドフレームワークを基盤とするQiankunは、マイクロフロントエンドアーキテクチャを簡単に管理できるシンプルなAPIを提供します。
多くのマイクロフロントエンドは、特定のルートに基づいてメインアプリへマウントされます。しかし、今回のユースケースでは、複数のルートとタブの切り替え時にダッシュボードを動的に表示する必要がありました。これを実現するため、内部でsingle-spaのparcel APIを実装するQiankunのloadMicroApp APIを使用しました。
この方法により、マイクロフロントエンドアーキテクチャによくある制約を解消しました。パフォーマンスを高め、読み込み時間を短縮するため、Grafanaのプロキシサーバーでキャッシングを使用しました。
UIの認証情報を使ってGrafanaを認証することは、重要な課題でした。通常、GrafanaはアクセスにAPIキーを使用します。これに対応するため、まずCodeRabbitユーザーを認証し、その後リクエストをGrafanaへ転送するプロキシサーバーを作成しました。
この設定は当初機能しましたが、潜在的な脆弱性が明らかになりました。Grafanaはリクエストであらゆるクエリを送信できるため、データ漏えいのリスクがありました。
これを軽減するため、次の処理を行う検証レイヤーを追加しました。
このソリューションは、不正なデータアクセスを防ぎ、堅牢な実装を確保することで、Grafanaマイクロフロントエンド連携を保護しました。
上のフロー図は、マイクロフロントエンドアーキテクチャの概要を示しています。CodeRabbit UIは、コンポーネントのライフサイクル関数をエクスポートする公開マイクロフロントエンドエンドポイントへアクセスし、Qiankunを使ってGrafanaダッシュボードをマウントします。マウント後、GrafanaへのすべてのAPI呼び出しは、安全なアクセスのため認証サービスを経由します。
CodeRabbitの目標は、AIコードレビューを提供することで製品が組織へ加える価値を示すことです。これを実現するため、データレイヤーに保存されたデータを収集、分析し、お客様の開発サイクルへCodeRabbitが与える影響を伝える、有用なパネルを作成しています。
ダッシュボードには、1日あたりにレビューしたプルリクエスト（PR）の平均数や、CodeRabbitが実施したレビューの総数などの指標が含まれます。さらに、レビューを微調整するために活用した言語固有のさまざまなツールも表示し、CodeRabbitが多様な開発環境へ適応する方法をより深く理解できるようにします。
これらのパネルは、コード品質を改善するためにCodeRabbitが支援したコメント、提案、チャットでの会話の数など、主な貢献も示します。
GrafanaをSingle-SPAマイクロフロントエンドとして統合することで、開発と保守の作業量を減らしながら、これらの可視化をCodeRabbit UI内でシームレスに設計、提供できました。
GrafanaをSingle-SPAマイクロフロントエンドアーキテクチャとして統合したことで、ユーザーへ分析情報を提供する方法が変わりました。Grafanaはダッシュボードを変更するための独立したサービスであるため、Grafanaのダッシュボードを変更し、Grafana Dashboard Provisioningを使って変更をプロビジョニングするだけです。
GrafanaをQiankunおよびSingle-SPAマイクロフロントエンドとしてCodeRabbitで使用することで、強力で安全かつ動的な分析体験をユーザーへ提供できるようになりました。今後は、さらに有用な分析情報を提供するため、ダッシュボードの種類を増やし、追加のGrafanaプラグインを検討する予定です。
分析連携を効率化したい開発者には、Grafanaをマイクロフロントエンドとして検討することを強くおすすめします。ダッシュボード管理を簡素化し、スケーラビリティを高めるうえで大きな変化をもたらします。
CodeRabbitを試してみませんか。14日間の無料トライアルを開始してください。 チームへの参加に興味がありますか。採用情報をご覧ください。
