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.
This commit is contained in:
Vivek R
2025-07-31 14:22:33 +05:30
parent 5e4cbd415e
commit f08764c6ea
3 changed files with 44 additions and 0 deletions

View File

@@ -7,6 +7,7 @@ import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { SelectComponent } from "@/components/ui/select"; import { SelectComponent } from "@/components/ui/select";
import { Card } from "@/components/ui/card"; import { Card } from "@/components/ui/card";
import { api } from "@/lib/api"; import { api } from "@/lib/api";
import { useTrackEvent } from "@/hooks";
interface MCPAddServerProps { interface MCPAddServerProps {
/** /**
@@ -36,6 +37,9 @@ export const MCPAddServer: React.FC<MCPAddServerProps> = ({
const [transport, setTransport] = useState<"stdio" | "sse">("stdio"); const [transport, setTransport] = useState<"stdio" | "sse">("stdio");
const [saving, setSaving] = useState(false); const [saving, setSaving] = useState(false);
// Analytics tracking
const trackEvent = useTrackEvent();
// Stdio server state // Stdio server state
const [stdioName, setStdioName] = useState(""); const [stdioName, setStdioName] = useState("");
const [stdioCommand, setStdioCommand] = useState(""); const [stdioCommand, setStdioCommand] = useState("");
@@ -131,6 +135,12 @@ export const MCPAddServer: React.FC<MCPAddServerProps> = ({
); );
if (result.success) { if (result.success) {
// Track server added
trackEvent.mcpServerAdded({
server_type: "stdio",
configuration_method: "manual"
});
// Reset form // Reset form
setStdioName(""); setStdioName("");
setStdioCommand(""); setStdioCommand("");
@@ -185,6 +195,12 @@ export const MCPAddServer: React.FC<MCPAddServerProps> = ({
); );
if (result.success) { if (result.success) {
// Track server added
trackEvent.mcpServerAdded({
server_type: "sse",
configuration_method: "manual"
});
// Reset form // Reset form
setSseName(""); setSseName("");
setSseUrl(""); setSseUrl("");

View File

@@ -34,6 +34,7 @@ export const MCPManager: React.FC<MCPManagerProps> = ({
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [toast, setToast] = useState<{ message: string; type: "success" | "error" } | null>(null); const [toast, setToast] = useState<{ message: string; type: "success" | "error" } | null>(null);
// Load servers on mount // Load servers on mount
useEffect(() => { useEffect(() => {

View File

@@ -19,6 +19,7 @@ import {
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { api, type MCPServer } from "@/lib/api"; import { api, type MCPServer } from "@/lib/api";
import { useTrackEvent } from "@/hooks";
interface MCPServerListProps { interface MCPServerListProps {
/** /**
@@ -53,6 +54,10 @@ export const MCPServerList: React.FC<MCPServerListProps> = ({
const [testingServer, setTestingServer] = useState<string | null>(null); const [testingServer, setTestingServer] = useState<string | null>(null);
const [expandedServers, setExpandedServers] = useState<Set<string>>(new Set()); const [expandedServers, setExpandedServers] = useState<Set<string>>(new Set());
const [copiedServer, setCopiedServer] = useState<string | null>(null); const [copiedServer, setCopiedServer] = useState<string | null>(null);
const [connectedServers] = useState<string[]>([]);
// Analytics tracking
const trackEvent = useTrackEvent();
// Group servers by scope // Group servers by scope
const serversByScope = servers.reduce((acc, server) => { const serversByScope = servers.reduce((acc, server) => {
@@ -96,7 +101,18 @@ export const MCPServerList: React.FC<MCPServerListProps> = ({
const handleRemoveServer = async (name: string) => { const handleRemoveServer = async (name: string) => {
try { try {
setRemovingServer(name); setRemovingServer(name);
// Check if server was connected
const wasConnected = connectedServers.includes(name);
await api.mcpRemove(name); await api.mcpRemove(name);
// Track server removal
trackEvent.mcpServerRemoved({
server_name: name,
was_connected: wasConnected
});
onServerRemoved(name); onServerRemoved(name);
} catch (error) { } catch (error) {
console.error("Failed to remove server:", error); console.error("Failed to remove server:", error);
@@ -112,10 +128,21 @@ export const MCPServerList: React.FC<MCPServerListProps> = ({
try { try {
setTestingServer(name); setTestingServer(name);
const result = await api.mcpTestConnection(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 // TODO: Show result in a toast or modal
console.log("Test result:", result); console.log("Test result:", result);
} catch (error) { } catch (error) {
console.error("Failed to test connection:", error); console.error("Failed to test connection:", error);
trackEvent.mcpConnectionError({
server_name: name,
error_type: 'test_failed',
retry_attempt: 0
});
} finally { } finally {
setTestingServer(null); setTestingServer(null);
} }