JDM170/spotizerr-dev
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): Improve API error message extraction and handling

Browse Source
This commit is contained in:
Phlogi
2025-08-23 23:25:27 +02:00
parent 3309ff3a54
commit 5b44cc2af8
1 changed files with 13 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
spotizerr-ui/src/components/config/AccountsTab.tsx
View File

@@ -53,6 +53,19 @@ function extractApiErrorMessage(error: unknown): string {
if (typeof data?.detail === "string") return data.detail; if (typeof data?.detail === "string") return data.detail;
if (typeof data?.message === "string") return data.message; if (typeof data?.message === "string") return data.message;
if (typeof data?.error === "string") return data.error; if (typeof data?.error === "string") return data.error;
// If data.error is an object, try to extract a message from it
if (typeof data?.error === "object" && data.error !== null && typeof data.error.message === "string") {
return data.error.message;
}
// If data is an object but none of the above matched, try JSON stringifying it
if (typeof data === "object" && data !== null) {
try {
return JSON.stringify(data);
} catch (e) {
// Fallback if stringify fails
return fallback;
}
}
} }
if (typeof anyErr?.message === "string") return anyErr.message; if (typeof anyErr?.message === "string") return anyErr.message;
return fallback; return fallback;
@@ -66,7 +79,6 @@ export function AccountsTab() {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const [activeService, setActiveService] = useState<Service>("spotify"); const [activeService, setActiveService] = useState<Service>("spotify");
const [isAdding, setIsAdding] = useState(false); const [isAdding, setIsAdding] = useState(false);
const [submitError, setSubmitError] = useState<string | null>(null);
const { data: credentials, isLoading } = useQuery({ const { data: credentials, isLoading } = useQuery({
queryKey: ["credentials", activeService], queryKey: ["credentials", activeService],
@@ -87,13 +99,10 @@ export function AccountsTab() {
queryClient.invalidateQueries({ queryKey: ["credentials", activeService] }); queryClient.invalidateQueries({ queryKey: ["credentials", activeService] });
queryClient.invalidateQueries({ queryKey: ["config"] }); // Invalidate config to update active Spotify account in UI queryClient.invalidateQueries({ queryKey: ["config"] }); // Invalidate config to update active Spotify account in UI
setIsAdding(false); setIsAdding(false);
setSubmitError(null);
reset(); reset();
}, },
onError: (error) => { onError: (error) => {
const msg = extractApiErrorMessage(error); const msg = extractApiErrorMessage(error);
setSubmitError(msg);
toast.error(msg);
}, },
}); });
@@ -110,7 +119,6 @@ export function AccountsTab() {
}); });
const onSubmit: SubmitHandler<AccountFormData> = (data) => { const onSubmit: SubmitHandler<AccountFormData> = (data) => {
setSubmitError(null);
addMutation.mutate({ service: activeService, data }); addMutation.mutate({ service: activeService, data });
}; };
@@ -118,11 +126,6 @@ export function AccountsTab() {
<form onSubmit={handleSubmit(onSubmit)} className="p-4 border border-line dark:border-border-dark rounded-lg mt-4 space-y-4"> <form onSubmit={handleSubmit(onSubmit)} className="p-4 border border-line dark:border-border-dark rounded-lg mt-4 space-y-4">
<h4 className="font-semibold text-content-primary dark:text-content-primary-dark">Add New {activeService === "spotify" ? "Spotify" : "Deezer"} Account</h4> <h4 className="font-semibold text-content-primary dark:text-content-primary-dark">Add New {activeService === "spotify" ? "Spotify" : "Deezer"} Account</h4>
{submitError && (
<div className="text-error-text bg-error-muted border border-error rounded p-2 text-sm">
{submitError}
</div>
)}
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<label htmlFor="accountName" className="text-content-primary dark:text-content-primary-dark">Account Name</label> <label htmlFor="accountName" className="text-content-primary dark:text-content-primary-dark">Account Name</label>