feat(error): add technical crash report to generic error screen

[peppescg]

Summary

Kapture.2026-05-12.at.12.33.31.mp4

• Enhance the GenericError screen with a collapsible "Show details" section that surfaces the error message, stack trace, and environment metadata (desktop/CLI versions, platform, ToolHive running status, container engine status)
• Add a one-click copy button that copies a formatted crash report to clipboard for easy pasting into GitHub issues or Slack
• Widen the error card from max-w-md to max-w-lg to accommodate technical details

Changes

File	Change
error/technical-details.tsx	New component: collapsible details with error message, metadata badges, stack trace, and copy-to-clipboard
error/generic-error.tsx	Accept error prop and render <TechnicalDetails>
error/index.tsx	Pass error through to <GenericError>
error/base-error-screen.tsx	Widen card from max-w-md to max-w-lg
error/__tests__/technical-details.test.tsx	5 unit tests covering collapsed/expanded states, clipboard copy, metadata, and graceful fallback

How it works

• Default view: "Oops, something went wrong" + "Show details" toggle — non-technical users are not overwhelmed
• Expanded view: error message with copy icon, environment metadata as badges (Desktop, CLI, Platform, ToolHive status, Engine status), full stack trace
• Copy button: copies a full crash report (timestamp, versions, platform, ToolHive/engine status, user agent, error message, stack trace) — users can paste it directly into a bug report

Closes #2210

Test plan

• pnpm run lint passes
• pnpm run type-check passes
• 23 unit tests pass (5 new + 18 existing unchanged)
• Manually verified in Electron dev build: error message displays, details expand/collapse, copy produces formatted report

🤖 Generated with Claude Code

[peppescg]

the copy to clipboard details

ToolHive Crash Report
=====================
Timestamp: 2026-05-12T10:39:05.900Z
Desktop Version: 0.0.0-dev
CLI Version: v0.27.1
Platform: darwin
ToolHive Running: no
Container Engine: available
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) ToolHive/0.0.0-dev Chrome/146.0.7680.216 Electron/41.5.0 Safari/537.36

Error: Health check failed

Stack Trace:
Error: Health check failed
    at checkHealth (http://localhost:5173/src/routes/root/guards/check-health.ts:39:9)
    at async Object.beforeLoad (http://localhost:5173/src/routes/__root.tsx?t=1778582110042:118:3)
    at async loadMatches (http://localhost:5173/@fs/Users/giuseppe/workspace/toolhive-react/.claude/worktrees/issue-2210-error-boundaries/node_modules/.vite/deps/index.dev-BVmqXupt.js?v=2939491d:1169:31)
    at async http://localhost:5173/@fs/Users/giuseppe/workspace/toolhive-react/.claude/worktrees/issue-2210-error-boundaries/node_modules/.vite/deps/index.dev-BVmqXupt.js?v=2939491d:2229:7

[Copilot]

Pull request overview

Adds a collapsible technical crash-report section to the generic error screen so users can view/copy actionable diagnostics (error message/stack + environment metadata) without overwhelming the default error UI.

Changes:

• Introduces TechnicalDetails (collapsible UI + copy-to-clipboard crash report).
• Threads an optional error through the error components to render technical details when available.
• Widens the base error card layout and adds unit tests for the new technical details behavior.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
renderer/src/common/components/error/technical-details.tsx	New collapsible technical details UI, environment probing, and crash report copy logic.
renderer/src/common/components/error/index.tsx	Passes the caught error through to GenericError.
renderer/src/common/components/error/generic-error.tsx	Accepts optional error prop and renders TechnicalDetails when present.
renderer/src/common/components/error/base-error-screen.tsx	Increases error card max width to better fit technical content.
renderer/src/common/components/error/tests/technical-details.test.tsx	Adds tests for collapsed/expanded behavior, metadata, clipboard copy, and missing stack handling.

[peppescg]

@claude succint review

[claude]

Claude finished @peppescg's task in 1m 5s —— View job

---

Succinct review

Overall this is a clean, well-tested addition. Most of the Copilot reviewer's flags are already addressed in the current code (aria-label is set, error.toString() is used everywhere, the missing-stack test uses container.querySelector('code')). A few real things to consider:

Substantive

1. Timestamp drifts on every render — renderer/src/common/components/error/technical-details.tsx:100 calls buildCrashReport in the render body, and buildCrashReport does new Date().toISOString() (utils.ts:22). Every re-render produces a new timestamp, so what the user copies is "time the component last rendered," not "time the error happened." Capture the timestamp once with useMemo/useRef, or move the build into the click handler. Fix this →

2. setTimeout can fire after unmount — technical-details.tsx:30 schedules setCopied(false) 2s later with no cleanup. If the user collapses the panel or navigates away within the window, React will warn (and in strict mode, this is a real leak). Clear the timeout in a useEffect cleanup, or guard with a ref. Fix this →

3. Stack trace uses break-all — technical-details.tsx:144. break-all will split mid-identifier, making file paths and symbols hard to read. break-words (or just whitespace-pre-wrap with horizontal scroll) is friendlier for stack traces.

Minor / nits

4. useQuery for diagnostics has no staleTime/gcTime and no enabled guard. Fine in practice (component only mounts on error), but consider staleTime: Infinity so it doesn't refetch on focus.
5. Inconsistent optional chaining: window.electronAPI?.platform (line 85) vs window.electronAPI.getToolhiveStatus() (line 61). Pick one.
6. Test at __tests__/technical-details.test.tsx:73–78 only wraps the first badge assertion in waitFor; the rest rely on React having flushed by then. Works today, but wrapping all four in the same waitFor block is more robust.
7. The Copilot suggestion about surfacing the User-Agent in the badges is reasonable but a UX call — current behavior (UA in copied report only) is defensible.

Looks good

• Promise.allSettled for diagnostics so a broken IPC channel doesn't crash the error screen itself — nice defensive choice given this renders because something already failed.

• Test coverage hits the meaningful states (collapsed, expanded, copy, copied-feedback, missing stack).

• error.toString() includes the error name (e.g. TypeError:) — Copilot's point [Task]: Add hey-api client, automate fetching the openapi.json #2 is already addressed.

• Read PR context

• Read changed files

• Post succinct review
  • branch: worktree-issue-2210-error-boundaries

[Copilot]

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 5 comments.

[samuv]

looks good!