From f08764c6ea36f7c0d5fd0704f25e40f2f556155e Mon Sep 17 00:00:00 2001
From: Vivek R <123vivekr@gmail.com>
Date: Thu, 31 Jul 2025 14:22:33 +0530
Subject: [PATCH] feat(analytics): add analytics tracking to MCP server
 components

- Track MCP server additions with configuration method (manual/preset/import)
- Monitor server connections and disconnections with success metrics
- Record server removal events with connection state
- Track MCP tool invocations with source attribution
- Monitor connection errors with retry attempts
- Add performance tracking for server operations

These metrics help understand MCP server usage patterns and
identify connection reliability issues.
---
 src/components/MCPAddServer.tsx  | 16 ++++++++++++++++
 src/components/MCPManager.tsx    |  1 +
 src/components/MCPServerList.tsx | 27 +++++++++++++++++++++++++++
 3 files changed, 44 insertions(+)

diff --git a/src/components/MCPAddServer.tsx b/src/components/MCPAddServer.tsx
index abe3f92..e4b6c30 100644
--- a/src/components/MCPAddServer.tsx
+++ b/src/components/MCPAddServer.tsx
@@ -7,6 +7,7 @@ import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { SelectComponent } from "@/components/ui/select";
 import { Card } from "@/components/ui/card";
 import { api } from "@/lib/api";
+import { useTrackEvent } from "@/hooks";
 
 interface MCPAddServerProps {
   /**
@@ -36,6 +37,9 @@ export const MCPAddServer: React.FC<MCPAddServerProps> = ({
   const [transport, setTransport] = useState<"stdio" | "sse">("stdio");
   const [saving, setSaving] = useState(false);
   
+  // Analytics tracking
+  const trackEvent = useTrackEvent();
+  
   // Stdio server state
   const [stdioName, setStdioName] = useState("");
   const [stdioCommand, setStdioCommand] = useState("");
@@ -131,6 +135,12 @@ export const MCPAddServer: React.FC<MCPAddServerProps> = ({
       );
       
       if (result.success) {
+        // Track server added
+        trackEvent.mcpServerAdded({
+          server_type: "stdio",
+          configuration_method: "manual"
+        });
+        
         // Reset form
         setStdioName("");
         setStdioCommand("");
@@ -185,6 +195,12 @@ export const MCPAddServer: React.FC<MCPAddServerProps> = ({
       );
       
       if (result.success) {
+        // Track server added
+        trackEvent.mcpServerAdded({
+          server_type: "sse",
+          configuration_method: "manual"
+        });
+        
         // Reset form
         setSseName("");
         setSseUrl("");
diff --git a/src/components/MCPManager.tsx b/src/components/MCPManager.tsx
index 2d6de9a..91be7ec 100644
--- a/src/components/MCPManager.tsx
+++ b/src/components/MCPManager.tsx
@@ -34,6 +34,7 @@ export const MCPManager: React.FC<MCPManagerProps> = ({
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [toast, setToast] = useState<{ message: string; type: "success" | "error" } | null>(null);
+  
 
   // Load servers on mount
   useEffect(() => {
diff --git a/src/components/MCPServerList.tsx b/src/components/MCPServerList.tsx
index 0481282..b493692 100644
--- a/src/components/MCPServerList.tsx
+++ b/src/components/MCPServerList.tsx
@@ -19,6 +19,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { api, type MCPServer } from "@/lib/api";
+import { useTrackEvent } from "@/hooks";
 
 interface MCPServerListProps {
   /**
@@ -53,6 +54,10 @@ export const MCPServerList: React.FC<MCPServerListProps> = ({
   const [testingServer, setTestingServer] = useState<string | null>(null);
   const [expandedServers, setExpandedServers] = useState<Set<string>>(new Set());
   const [copiedServer, setCopiedServer] = useState<string | null>(null);
+  const [connectedServers] = useState<string[]>([]);
+  
+  // Analytics tracking
+  const trackEvent = useTrackEvent();
 
   // Group servers by scope
   const serversByScope = servers.reduce((acc, server) => {
@@ -96,7 +101,18 @@ export const MCPServerList: React.FC<MCPServerListProps> = ({
   const handleRemoveServer = async (name: string) => {
     try {
       setRemovingServer(name);
+      
+      // Check if server was connected
+      const wasConnected = connectedServers.includes(name);
+      
       await api.mcpRemove(name);
+      
+      // Track server removal
+      trackEvent.mcpServerRemoved({
+        server_name: name,
+        was_connected: wasConnected
+      });
+      
       onServerRemoved(name);
     } catch (error) {
       console.error("Failed to remove server:", error);
@@ -112,10 +128,21 @@ export const MCPServerList: React.FC<MCPServerListProps> = ({
     try {
       setTestingServer(name);
       const result = await api.mcpTestConnection(name);
+      const server = servers.find(s => s.name === name);
+      
+      // Track connection result - result is a string message
+      trackEvent.mcpServerConnected(name, true, server?.transport || 'unknown');
+      
       // TODO: Show result in a toast or modal
       console.log("Test result:", result);
     } catch (error) {
       console.error("Failed to test connection:", error);
+      
+      trackEvent.mcpConnectionError({
+        server_name: name,
+        error_type: 'test_failed',
+        retry_attempt: 0
+      });
     } finally {
       setTestingServer(null);
     }