fix: prevent [object Object] rendering in 25 frontend components
Replace direct {error} JSX rendering with typeof check + .message fallback.
When error is an object (not a string), React showed [object Object].
Now renders error.message or fallback string.
This commit is contained in:
@@ -113,7 +113,7 @@ export function AddressList({ entityType, entityId }: AddressListProps) {
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="p-3 text-sm text-red-700 bg-red-50 rounded-lg">{error}</div>
|
||||
<div className="p-3 text-sm text-red-700 bg-red-50 rounded-lg">{typeof error === "string" ? error : (error as any)?.message || "Ein Fehler ist aufgetreten"}</div>
|
||||
)}
|
||||
|
||||
{showForm && (
|
||||
|
||||
@@ -179,7 +179,7 @@ export function ChatWindow({ sessionId, agentId, className, compact }: ChatWindo
|
||||
</div>
|
||||
)}
|
||||
<ActivityIndicator status={activity} />
|
||||
{error && <div className="mb-4 text-sm text-red-600">{error}</div>}
|
||||
{error && <div className="mb-4 text-sm text-red-600">{typeof error === "string" ? error : (error as any)?.message || "Ein Fehler ist aufgetreten"}</div>}
|
||||
</div>
|
||||
<div className={clsx('border-t border-secondary-200', compact ? 'p-2' : 'p-4')}>
|
||||
<div className="flex items-end gap-2">
|
||||
|
||||
@@ -347,7 +347,7 @@ export function SessionList({ activeSessionId, onSelectSession, isSidebar, class
|
||||
|
||||
return (
|
||||
<div className={clsx('flex flex-col h-full', className)}>
|
||||
{error && <div className="p-2 text-xs text-red-600">{error}</div>}
|
||||
{error && <div className="p-2 text-xs text-red-600">{typeof error === "string" ? error : (error as any)?.message || "Ein Fehler ist aufgetreten"}</div>}
|
||||
<div
|
||||
className="flex-1 overflow-y-auto p-2"
|
||||
onContextMenu={(e) => {
|
||||
|
||||
@@ -138,7 +138,7 @@ export function IcsControls({ calendar, onImported }: IcsControlsProps) {
|
||||
)}
|
||||
{error && (
|
||||
<span className="text-xs text-danger-700" data-testid="ics-error">
|
||||
{error}
|
||||
{typeof error === "string" ? error : (error as any)?.message || "Ein Fehler ist aufgetreten"}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -112,7 +112,7 @@ export function ResourceBooking({ entry, resources, onBooked }: ResourceBookingP
|
||||
className="text-xs text-danger-700 bg-danger-50 border border-danger-200 rounded-md p-2"
|
||||
data-testid="resource-error"
|
||||
>
|
||||
{error}
|
||||
{typeof error === "string" ? error : (error as any)?.message || "Ein Fehler ist aufgetreten"}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -141,7 +141,7 @@ export function SharingSettings({ calendar }: SharingSettingsProps) {
|
||||
className="text-xs text-danger-700 bg-danger-50 border border-danger-200 rounded-md p-2"
|
||||
data-testid="sharing-error"
|
||||
>
|
||||
{error}
|
||||
{typeof error === "string" ? error : (error as any)?.message || "Ein Fehler ist aufgetreten"}
|
||||
</div>
|
||||
)}
|
||||
{message && (
|
||||
|
||||
@@ -212,7 +212,7 @@ export function TaskDetailPanel({ entry, onClose, onChanged }: TaskDetailPanelPr
|
||||
className="text-sm text-danger-700 bg-danger-50 border border-danger-200 rounded-md p-2"
|
||||
data-testid="task-detail-error"
|
||||
>
|
||||
{error}
|
||||
{typeof error === "string" ? error : (error as any)?.message || "Ein Fehler ist aufgetreten"}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -583,7 +583,7 @@ function PolicyForm({ initial, entityType, onSave, onCancel }: PolicyFormProps)
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<p className="text-sm text-danger-600" role="alert">
|
||||
{error}
|
||||
{typeof error === "string" ? error : (error as any)?.message || "Ein Fehler ist aufgetreten"}
|
||||
</p>
|
||||
)}
|
||||
|
||||
|
||||
@@ -90,7 +90,7 @@ export function AskKnowledge() {
|
||||
})}
|
||||
</div>
|
||||
|
||||
{error && <p className="text-sm text-danger-600" role="alert">{error}</p>}
|
||||
{error && <p className="text-sm text-danger-600" role="alert">{typeof error === "string" ? error : (error as any)?.message || "Ein Fehler ist aufgetreten"}</p>}
|
||||
|
||||
{loading && (
|
||||
<div className="flex items-center justify-center py-10" role="status" aria-label={t('common.loading')}>
|
||||
|
||||
@@ -236,7 +236,7 @@ export function KnowledgeGraph() {
|
||||
)}
|
||||
{!loading && error && (
|
||||
<div className="py-8 text-center">
|
||||
<p className="text-danger-600 text-sm mb-4">{error}</p>
|
||||
<p className="text-danger-600 text-sm mb-4">{typeof error === "string" ? error : (error as any)?.message || "Ein Fehler ist aufgetreten"}</p>
|
||||
<Button variant="secondary" onClick={() => void load()}>
|
||||
{t('common.retry')}
|
||||
</Button>
|
||||
|
||||
@@ -552,7 +552,7 @@ export function MessageSidebar() {
|
||||
<p className="text-sm text-secondary-400 text-center py-4">Laden...</p>
|
||||
)}
|
||||
{error && (
|
||||
<p className="text-sm text-red-500 text-center py-2">{error}</p>
|
||||
<p className="text-sm text-red-500 text-center py-2">{typeof error === "string" ? error : (error as any)?.message || "Ein Fehler ist aufgetreten"}</p>
|
||||
)}
|
||||
{!loading && conversations.length === 0 && !error && (
|
||||
<p className="text-sm text-secondary-400 text-center py-4">Keine Konversationen</p>
|
||||
|
||||
@@ -103,7 +103,7 @@ export function LabelManager() {
|
||||
if (error) {
|
||||
return (
|
||||
<div className="p-4 bg-danger-50 border border-danger-200 rounded-md" role="alert" data-testid="label-manager-error">
|
||||
<p className="text-sm text-danger-700">{error}</p>
|
||||
<p className="text-sm text-danger-700">{typeof error === "string" ? error : (error as any)?.message || "Ein Fehler ist aufgetreten"}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -93,7 +93,7 @@ export function PgpSettings() {
|
||||
if (error) {
|
||||
return (
|
||||
<div className="p-4 bg-danger-50 border border-danger-200 rounded-md" role="alert" data-testid="pgp-settings-error">
|
||||
<p className="text-sm text-danger-700">{error}</p>
|
||||
<p className="text-sm text-danger-700">{typeof error === "string" ? error : (error as any)?.message || "Ein Fehler ist aufgetreten"}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -153,7 +153,7 @@ export function RuleEditor({ accountId }: { accountId: string }) {
|
||||
if (error) {
|
||||
return (
|
||||
<div className="p-4 bg-danger-50 border border-danger-200 rounded-md" role="alert" data-testid="rule-editor-error">
|
||||
<p className="text-sm text-danger-700">{error}</p>
|
||||
<p className="text-sm text-danger-700">{typeof error === "string" ? error : (error as any)?.message || "Ein Fehler ist aufgetreten"}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -134,7 +134,7 @@ export function SignatureManager() {
|
||||
if (error) {
|
||||
return (
|
||||
<div className="p-4 bg-danger-50 border border-danger-200 rounded-md" role="alert" data-testid="signature-manager-error">
|
||||
<p className="text-sm text-danger-700">{error}</p>
|
||||
<p className="text-sm text-danger-700">{typeof error === "string" ? error : (error as any)?.message || "Ein Fehler ist aufgetreten"}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -66,7 +66,7 @@ export function TemplatePicker({ onSelect }: TemplatePickerProps) {
|
||||
if (error) {
|
||||
return (
|
||||
<div className="p-4 bg-danger-50 border border-danger-200 rounded-md" role="alert" data-testid="template-picker-error">
|
||||
<p className="text-sm text-danger-700">{error}</p>
|
||||
<p className="text-sm text-danger-700">{typeof error === "string" ? error : (error as any)?.message || "Ein Fehler ist aufgetreten"}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -106,7 +106,7 @@ export function CsvImportDialog({ open, onClose, onSuccess }: CsvImportDialogPro
|
||||
aria-label="CSV-Datei auswählen"
|
||||
data-testid="csv-file-input"
|
||||
/>
|
||||
{error && <p className="mt-2 text-sm text-danger-600" role="alert">{error}</p>}
|
||||
{error && <p className="mt-2 text-sm text-danger-600" role="alert">{typeof error === "string" ? error : (error as any)?.message || "Ein Fehler ist aufgetreten"}</p>}
|
||||
</div>
|
||||
|
||||
{previewData && previewData.rows.length > 0 && (
|
||||
|
||||
@@ -43,7 +43,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||
/>
|
||||
{error && (
|
||||
<p id={errorId} className="mt-1 text-sm text-danger-600" role="alert">
|
||||
{error}
|
||||
{typeof error === "string" ? error : (error as any)?.message || "Ein Fehler ist aufgetreten"}
|
||||
</p>
|
||||
)}
|
||||
{helperText && !error && (
|
||||
|
||||
@@ -54,7 +54,7 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
|
||||
</select>
|
||||
{error && (
|
||||
<p id={errorId} className="mt-1 text-sm text-danger-600" role="alert">
|
||||
{error}
|
||||
{typeof error === "string" ? error : (error as any)?.message || "Ein Fehler ist aufgetreten"}
|
||||
</p>
|
||||
)}
|
||||
{helperText && !error && (
|
||||
|
||||
@@ -180,7 +180,7 @@ export function WikiBrowser({ selectedArticleId, onSelectArticle }: WikiBrowserP
|
||||
<Loader2 className="animate-spin h-6 w-6 text-primary-500" aria-hidden="true" />
|
||||
</div>
|
||||
)}
|
||||
{!loading && error && <p className="text-sm text-danger-600 p-3">{error}</p>}
|
||||
{!loading && error && <p className="text-sm text-danger-600 p-3">{typeof error === "string" ? error : (error as any)?.message || "Ein Fehler ist aufgetreten"}</p>}
|
||||
{!loading && !error && (
|
||||
<>
|
||||
<button
|
||||
|
||||
@@ -135,7 +135,7 @@ export function AiChatPanel({ windowTitle, windowType }: AiChatPanelProps) {
|
||||
<div className="flex-1 flex items-center justify-center p-4 text-center">
|
||||
<div>
|
||||
<Sparkles className="w-8 h-8 text-secondary-300 mx-auto mb-2" />
|
||||
<p className="text-sm text-secondary-500">{error}</p>
|
||||
<p className="text-sm text-secondary-500">{typeof error === "string" ? error : (error as any)?.message || "Ein Fehler ist aufgetreten"}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -180,7 +180,7 @@ export function AiChatPanel({ windowTitle, windowType }: AiChatPanelProps) {
|
||||
</div>
|
||||
)}
|
||||
{error && (
|
||||
<div className="text-xs text-danger-600 px-2 py-1">{error}</div>
|
||||
<div className="text-xs text-danger-600 px-2 py-1">{typeof error === "string" ? error : (error as any)?.message || "Ein Fehler ist aufgetreten"}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -547,7 +547,7 @@ function JsonField({ label, value, onChange }: JsonFieldProps) {
|
||||
/>
|
||||
{error && (
|
||||
<p className="mt-1 text-sm text-danger-600" role="alert">
|
||||
{error}
|
||||
{typeof error === "string" ? error : (error as any)?.message || "Ein Fehler ist aufgetreten"}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user