feat: Add error console to MCP servers - Edited with Roo Code and Anthropic Claude 3.5 (#2722)

Co-authored-by: cte <[email protected]>

Author: robertheadley

package-lock.json

@@ -370,7 +370,7 @@
 		"@aws-sdk/client-bedrock-runtime": "^3.779.0",
 		"@google/genai": "^0.12.0",
 		"@mistralai/mistralai": "^1.3.6",
-		"@modelcontextprotocol/sdk": "^1.7.0",
+		"@modelcontextprotocol/sdk": "^1.9.0",
 		"@types/clone-deep": "^4.0.4",
 		"@types/pdf-parse": "^1.1.4",
 		"@types/tmp": "^0.2.6",

package.json

@@ -541,6 +541,7 @@ export class McpHub {
 					disabled: config.disabled,
 					source,
 					projectPath: source === "project" ? vscode.workspace.workspaceFolders?.[0]?.uri.fsPath : undefined,
+					errorHistory: [],
 				},
 				client,
 				transport,
@@ -567,13 +568,31 @@ export class McpHub {
 		}
 	}
 
-	private appendErrorMessage(connection: McpConnection, error: string) {
+	private appendErrorMessage(connection: McpConnection, error: string, level: "error" | "warn" | "info" = "error") {
 		const MAX_ERROR_LENGTH = 1000
-		const newError = connection.server.error ? `${connection.server.error}\n${error}` : error
-		connection.server.error =
-			newError.length > MAX_ERROR_LENGTH
-				? `${newError.substring(0, MAX_ERROR_LENGTH)}...(error message truncated)`
-				: newError
+		const truncatedError =
+			error.length > MAX_ERROR_LENGTH
+				? `${error.substring(0, MAX_ERROR_LENGTH)}...(error message truncated)`
+				: error
+
+		// Add to error history
+		if (!connection.server.errorHistory) {
+			connection.server.errorHistory = []
+		}
+
+		connection.server.errorHistory.push({
+			message: truncatedError,
+			timestamp: Date.now(),
+			level,
+		})
+
+		// Keep only the last 100 errors
+		if (connection.server.errorHistory.length > 100) {
+			connection.server.errorHistory = connection.server.errorHistory.slice(-100)
+		}
+
+		// Update current error display
+		connection.server.error = truncatedError
 	}
 
 	/**

src/services/mcp/McpHub.ts

@@ -1,8 +1,15 @@
+export type McpErrorEntry = {
+	message: string
+	timestamp: number
+	level: "error" | "warn" | "info"
+}
+
 export type McpServer = {
 	name: string
 	config: string
 	status: "connected" | "connecting" | "disconnected"
 	error?: string
+	errorHistory?: McpErrorEntry[]
 	tools?: McpTool[]
 	resources?: McpResource[]
 	resourceTemplates?: McpResourceTemplate[]
@@ -55,6 +62,11 @@ export type McpToolCallResponse = {
 				data: string
 				mimeType: string
 		  }
+		| {
+				type: "audio"
+				data: string
+				mimeType: string
+		  }
 		| {
 				type: "resource"
 				resource: {

src/shared/mcp.ts

@@ -36,6 +36,7 @@
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
 		"cmdk": "^1.0.0",
+		"date-fns": "^4.1.0",
 		"debounce": "^2.1.1",
 		"fast-deep-equal": "^3.1.3",
 		"fzf": "^0.5.2",

webview-ui/package-lock.json

@@ -0,0 +1,32 @@
+import { useMemo } from "react"
+import { formatRelative } from "date-fns"
+
+import type { McpErrorEntry } from "@roo/shared/mcp"
+
+type McpErrorRowProps = {
+	error: McpErrorEntry
+}
+
+export const McpErrorRow = ({ error }: McpErrorRowProps) => {
+	const color = useMemo(() => {
+		switch (error.level) {
+			case "error":
+				return "var(--vscode-testing-iconFailed)"
+			case "warn":
+				return "var(--vscode-charts-yellow)"
+			case "info":
+				return "var(--vscode-testing-iconPassed)"
+		}
+	}, [error.level])
+
+	return (
+		<div className="text-sm bg-vscode-textCodeBlock-background border-l-2 p-2" style={{ borderColor: color }}>
+			<div className="mb-1" style={{ color }}>
+				{error.message}
+			</div>
+			<div className="text-xs text-vscode-descriptionForeground">
+				{formatRelative(error.timestamp, new Date())}
+			</div>
+		</div>
+	)
+}

webview-ui/package.json

@@ -29,6 +29,7 @@ import { Tab, TabContent, TabHeader } from "../common/Tab"
 import McpToolRow from "./McpToolRow"
 import McpResourceRow from "./McpResourceRow"
 import McpEnabledToggle from "./McpEnabledToggle"
+import { McpErrorRow } from "./McpErrorRow"
 
 type McpViewProps = {
 	onDone: () => void
@@ -42,6 +43,7 @@ const McpView = ({ onDone }: McpViewProps) => {
 		enableMcpServerCreation,
 		setEnableMcpServerCreation,
 	} = useExtensionState()
+
 	const { t } = useAppTranslation()
 
 	return (
@@ -330,6 +332,9 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM
 								{t("mcp:tabs.resources")} (
 								{[...(server.resourceTemplates || []), ...(server.resources || [])].length || 0})
 							</VSCodePanelTab>
+							<VSCodePanelTab id="errors">
+								{t("mcp:tabs.errors")} ({server.errorHistory?.length || 0})
+							</VSCodePanelTab>
 
 							<VSCodePanelView id="tools-view">
 								{server.tools && server.tools.length > 0 ? (
@@ -372,6 +377,23 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM
 									</div>
 								)}
 							</VSCodePanelView>
+
+							<VSCodePanelView id="errors-view">
+								{server.errorHistory && server.errorHistory.length > 0 ? (
+									<div
+										style={{ display: "flex", flexDirection: "column", gap: "8px", width: "100%" }}>
+										{[...server.errorHistory]
+											.sort((a, b) => b.timestamp - a.timestamp)
+											.map((error, index) => (
+												<McpErrorRow key={`${error.timestamp}-${index}`} error={error} />
+											))}
+									</div>
+								) : (
+									<div style={{ padding: "10px 0", color: "var(--vscode-descriptionForeground)" }}>
+										{t("mcp:emptyState.noErrors")}
+									</div>
+								)}
+							</VSCodePanelView>
 						</VSCodePanels>
 
 						{/* Network Timeout */}

webview-ui/src/components/mcp/McpErrorRow.tsx

@@ -19,11 +19,14 @@
 	},
 	"tabs": {
 		"tools": "Eines",
-		"resources": "Recursos"
+		"resources": "Recursos",
+		"errors": "Errors"
 	},
 	"emptyState": {
 		"noTools": "No s'han trobat eines",
-		"noResources": "No s'han trobat recursos"
+		"noResources": "No s'han trobat recursos",
+		"noLogs": "No s'han trobat registres",
+		"noErrors": "No s'han trobat errors"
 	},
 	"networkTimeout": {
 		"label": "Temps d'espera de xarxa",

webview-ui/src/components/mcp/McpView.tsx

@@ -19,11 +19,14 @@
 	},
 	"tabs": {
 		"tools": "Tools",
-		"resources": "Ressourcen"
+		"resources": "Ressourcen",
+		"errors": "Fehler"
 	},
 	"emptyState": {
 		"noTools": "Keine Tools gefunden",
-		"noResources": "Keine Ressourcen gefunden"
+		"noResources": "Keine Ressourcen gefunden",
+		"noLogs": "Keine Logs gefunden",
+		"noErrors": "Keine Fehler gefunden"
 	},
 	"networkTimeout": {
 		"label": "Netzwerk-Timeout",