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 { 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("");
|
||||||
|
@@ -35,6 +35,7 @@ export const MCPManager: React.FC<MCPManagerProps> = ({
|
|||||||
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(() => {
|
||||||
loadServers();
|
loadServers();
|
||||||
|
@@ -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);
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user