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:
@@ -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("");
|
||||
|
@@ -35,6 +35,7 @@ export const MCPManager: React.FC<MCPManagerProps> = ({
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [toast, setToast] = useState<{ message: string; type: "success" | "error" } | null>(null);
|
||||
|
||||
|
||||
// Load servers on mount
|
||||
useEffect(() => {
|
||||
loadServers();
|
||||
|
@@ -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);
|
||||
}
|
||||
|
Reference in New Issue
Block a user