fix: hide Test ErrorBoundary button in production and improve claude CLI error handling

- Hide the Test ErrorBoundary button in production builds by checking process.env.NODE_ENV
- Add better error handling for missing claude CLI command with helpful installation instructions
- Add tests for ENOENT error handling in claude-code integration

Fixes #6218

Author: roomote

src/integrations/claude-code/__tests__/run.spec.ts

@@ -289,4 +289,94 @@ describe("runClaudeCode", () => {
 		consoleErrorSpy.mockRestore()
 		await generator.return(undefined)
 	})
+
+	test("should handle ENOENT error with helpful message", async () => {
+		const { runClaudeCode } = await import("../run")
+
+		// Mock execa to throw ENOENT error
+		const enoentError = new Error("spawn claude ENOENT") as any
+		enoentError.code = "ENOENT"
+		mockExeca.mockImplementationOnce(() => {
+			throw enoentError
+		})
+
+		const options = {
+			systemPrompt: "You are a helpful assistant",
+			messages: [{ role: "user" as const, content: "Hello" }],
+		}
+
+		const generator = runClaudeCode(options)
+
+		// Try to consume the generator
+		try {
+			await generator.next()
+			expect.fail("Should have thrown an error")
+		} catch (error: any) {
+			expect(error.message).toContain("Claude CLI command not found")
+			expect(error.message).toContain("Please ensure the Claude CLI is installed")
+			expect(error.message).toContain("https://github.com/anthropics/claude-cli")
+		}
+
+		// Clean up
+		await generator.return(undefined)
+	})
+
+	test("should handle ENOENT error with custom path in message", async () => {
+		const { runClaudeCode } = await import("../run")
+
+		// Mock execa to throw ENOENT error
+		const enoentError = new Error("spawn /custom/claude ENOENT") as any
+		enoentError.code = "ENOENT"
+		mockExeca.mockImplementationOnce(() => {
+			throw enoentError
+		})
+
+		const options = {
+			systemPrompt: "You are a helpful assistant",
+			messages: [{ role: "user" as const, content: "Hello" }],
+			path: "/custom/claude",
+		}
+
+		const generator = runClaudeCode(options)
+
+		// Try to consume the generator
+		try {
+			await generator.next()
+			expect.fail("Should have thrown an error")
+		} catch (error: any) {
+			expect(error.message).toContain("Claude CLI command not found at '/custom/claude'")
+		}
+
+		// Clean up
+		await generator.return(undefined)
+	})
+
+	test("should rethrow non-ENOENT errors unchanged", async () => {
+		const { runClaudeCode } = await import("../run")
+
+		// Mock execa to throw a different error
+		const otherError = new Error("Some other error")
+		mockExeca.mockImplementationOnce(() => {
+			throw otherError
+		})
+
+		const options = {
+			systemPrompt: "You are a helpful assistant",
+			messages: [{ role: "user" as const, content: "Hello" }],
+		}
+
+		const generator = runClaudeCode(options)
+
+		// Try to consume the generator
+		try {
+			await generator.next()
+			expect.fail("Should have thrown an error")
+		} catch (error: any) {
+			expect(error.message).toBe("Some other error")
+			expect(error.message).not.toContain("Claude CLI command not found")
+		}
+
+		// Clean up
+		await generator.return(undefined)
+	})
 })

src/integrations/claude-code/run.ts

@@ -144,22 +144,35 @@ function runProcess({
 		args.push("--model", modelId)
 	}
 
-	const child = execa(claudePath, args, {
-		stdin: "pipe",
-		stdout: "pipe",
-		stderr: "pipe",
-		env: {
-			...process.env,
-			// Use the configured value, or the environment variable, or default to CLAUDE_CODE_DEFAULT_MAX_OUTPUT_TOKENS
-			CLAUDE_CODE_MAX_OUTPUT_TOKENS:
-				maxOutputTokens?.toString() ||
-				process.env.CLAUDE_CODE_MAX_OUTPUT_TOKENS ||
-				CLAUDE_CODE_DEFAULT_MAX_OUTPUT_TOKENS.toString(),
-		},
-		cwd,
-		maxBuffer: 1024 * 1024 * 1000,
-		timeout: CLAUDE_CODE_TIMEOUT,
-	})
+	let child
+	try {
+		child = execa(claudePath, args, {
+			stdin: "pipe",
+			stdout: "pipe",
+			stderr: "pipe",
+			env: {
+				...process.env,
+				// Use the configured value, or the environment variable, or default to CLAUDE_CODE_DEFAULT_MAX_OUTPUT_TOKENS
+				CLAUDE_CODE_MAX_OUTPUT_TOKENS:
+					maxOutputTokens?.toString() ||
+					process.env.CLAUDE_CODE_MAX_OUTPUT_TOKENS ||
+					CLAUDE_CODE_DEFAULT_MAX_OUTPUT_TOKENS.toString(),
+			},
+			cwd,
+			maxBuffer: 1024 * 1024 * 1000,
+			timeout: CLAUDE_CODE_TIMEOUT,
+		})
+	} catch (error: any) {
+		if (error.code === "ENOENT") {
+			throw new Error(
+				`Claude CLI command not found at '${claudePath}'. ` +
+					`Please ensure the Claude CLI is installed and available in your system PATH. ` +
+					`You can install it from https://github.com/anthropics/claude-cli or ` +
+					`specify a custom path in the extension settings.`,
+			)
+		}
+		throw error
+	}
 
 	// Prepare stdin data: Windows gets both system prompt & messages (avoids 8191 char limit),
 	// other platforms get messages only (avoids Linux E2BIG error from ~128KiB execve limit)

webview-ui/src/components/settings/About.tsx

@@ -110,10 +110,12 @@ export const About = ({ telemetrySetting, setTelemetrySetting, className, ...pro
 					</Button>
 
 					{/* Test button for ErrorBoundary - only visible in development */}
-					<Button variant="destructive" onClick={triggerTestError} className="w-auto">
-						<TriangleAlert className="p-0.5" />
-						Test ErrorBoundary
-					</Button>
+					{process.env.NODE_ENV !== "production" && (
+						<Button variant="destructive" onClick={triggerTestError} className="w-auto">
+							<TriangleAlert className="p-0.5" />
+							Test ErrorBoundary
+						</Button>
+					)}
 				</div>
 			</Section>
 		</div>