feat(provider-settings): support viewing detailed error messages #12423
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds clickable error detail functionality to health status indicators in provider settings and model detection. Users can now click on error icons to view detailed error information in a modal dialog, addressing the issue where error messages were truncated in tooltips.
Changes:
- Changed error type from string to SerializedError throughout health check system for richer error information
- Added clickable error icons that open ErrorDetailModal with full error details
- Exported ErrorDetailModal from ErrorBlock for reuse across the application
- Fixed flex alignment properties and improved tooltip layouts
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/renderer/src/types/healthCheck.ts | Updated ApiKeyConnectivity error type from string to SerializedError |
| src/renderer/src/services/HealthCheckService.ts | Added error serialization logic to convert rejected promises to SerializedError objects |
| src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx | Made error icon clickable, added ErrorDetailModal, and serialized errors on API check failure |
| src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelListItem.tsx | Added onErrorClick callback and ErrorDetailModal integration for model list items |
| src/renderer/src/pages/home/Messages/Blocks/ErrorBlock.tsx | Exported ErrorDetailModal component for reuse |
| src/renderer/src/components/Popups/ApiKeyListPopup/hook.ts | Updated error handling to use SerializedError type |
| src/renderer/src/components/HealthStatusIndicator/useHealthStatus.tsx | Updated to access error.message from SerializedError and fixed flex alignment |
| src/renderer/src/components/HealthStatusIndicator/types.ts | Added HealthStatusIndicatorProps interface with onErrorClick callback |
| src/renderer/src/components/HealthStatusIndicator/indicator.tsx | Made error icon clickable when onErrorClick is provided and fixed flex alignment |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
src/renderer/src/components/HealthStatusIndicator/useHealthStatus.tsx
Outdated
Show resolved
Hide resolved
src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelListItem.tsx
Outdated
Show resolved
Hide resolved
src/renderer/src/components/HealthStatusIndicator/indicator.tsx
Outdated
Show resolved
Hide resolved
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 10 out of 10 changed files in this pull request and generated 1 comment.
Comments suppressed due to low confidence (1)
src/renderer/src/components/HealthStatusIndicator/indicator.tsx:53
- The "partial" status (when some API keys pass and some fail) should also support error click functionality. Currently, onErrorClick is only handled for the "error" case, but in partial failures, users would also benefit from being able to click the warning icon to see which keys failed. Consider making the ExclamationCircleFilled icon clickable when onErrorClick is provided and there are failed results.
case 'partial':
icon = <ExclamationCircleFilled />
break
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx
Outdated
Show resolved
Hide resolved
EurFelux
reviewed
Jan 12, 2026
src/renderer/src/components/HealthStatusIndicator/indicator.tsx
Outdated
Show resolved
Hide resolved
src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelListItem.tsx
Outdated
Show resolved
Hide resolved
GeorgeDong32
force-pushed
the
feature/add-error-detail-clickable
branch
2 times, most recently
from
9ca4655 to
8eabf4a
Compare
DeJeune
reviewed
Jan 17, 2026
GeorgeDong32
force-pushed
the
feature/add-error-detail-clickable
branch
from
6192c16 to
ae407d9
Compare
DeJeune
approved these changes
Jan 18, 2026
GeorgeDong32
force-pushed
the
feature/add-error-detail-clickable
branch
from
ae407d9 to
45ecdac
Compare
- Add onErrorClick callback to HealthStatusIndicator component - Make error icon clickable to show detailed error modal - Export ErrorDetailModal for reuse across components - Use SerializedError type for better error information display - Fix tooltip i18n keys and flex layout for consistent spacing
…xist - Only pass onErrorClick callback when there are failed results - Conditionally render ErrorDetailModal only when needed - Improve performance by avoiding unnecessary state for success cases
- Extract duplicated error serialization logic into serializeHealthCheckError() utility function in error.ts - Update HealthCheckService.ts, hook.ts, and ProviderSetting.tsx to use the new utility function - Fix invalid CSS values: align-items: left -> center, align: left -> flex-start - Use HealthStatus.FAILED constant instead of hardcoded 'failed' string
Change the tooltip fallback translation key from the provider API check to the models check. This ensures the displayed message matches the new i18n key and avoids showing an incorrect/provider-specific string when the API key connectivity error message is absent.
- Memoize ErrorDetailModal child components (BuiltinError, AiSdkErrorBase, TruncatedCodeViewer, AiSdkError) - Add useCallback for handleErrorClick in HealthStatusIndicator - Add useCallback for copyErrorDetails in ErrorDetailModal - Optimize ModelListItem button inline functions with useCallback
- HealthStatusIndicatorProps was only used in indicator.tsx, no need to export - Keep HealthResult in types.ts as it's used by useHealthStatus hook
- useHealthStatus depends on HealthResult from ./types - Only HealthStatusIndicatorProps belongs to indicator.tsx
- wrap healthResults in useMemo to avoid unnecessary re-renders - remove redundant ErrorDetailModal export from ErrorBlock
- Use parseDataUrl from @shared/utils instead of manual base64 detection - Replace duplicate ErrorDetailModal in ErrorBlock with the shared component - Optimize onErrorClick with useMemo for better performance
GeorgeDong32
force-pushed
the
feature/add-error-detail-clickable
branch
from
45ecdac to
c9a9bc1
Compare
kangfenmao
approved these changes
Jan 23, 2026
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What this PR does
Before this PR:
After this PR:
Fixes #12367
Why we need it and why it was done in this way
The following tradeoffs were made:
The following alternatives were considered:
Links to places where the discussion took place:
Breaking changes
Special notes for your reviewer
Checklist
Release note