2143: Handle 500 responses

Author: Ruben van Leeuwen

frontend/packages/pydantic-forms/src/core/ReactHookForm.tsx

@@ -23,31 +23,31 @@ import { useGetConfig } from './hooks';
 import { useGetZodSchema } from './hooks';
 
 export interface ReactHookFormProps {
-    handleSubmit: (fieldValues: FieldValues) => void;
-    handleCancel: () => void;
-    pydanticFormSchema?: PydanticFormSchema;
-    isLoading: boolean;
-    isFullFilled: boolean;
-    isSending: boolean;
     apiError?: string;
+    handleCancel: () => void;
+    handleSubmit: (fieldValues: FieldValues) => void;
     hasNext: boolean;
     hasPrevious: boolean;
     initialValues: FieldValues;
+    isFullFilled: boolean;
+    isLoading: boolean;
+    isSending: boolean;
+    pydanticFormSchema?: PydanticFormSchema;
     title?: string;
 }
 
 export const ReactHookForm = ({
-    handleSubmit,
+    apiError,
     handleCancel,
-    pydanticFormSchema,
-    isLoading,
+    handleSubmit,
+    hasNext,
+    hasPrevious,
+    initialValues,
     isFullFilled,
+    isLoading,
     isSending,
-    apiError,
-    initialValues,
+    pydanticFormSchema,
     title,
-    hasNext,
-    hasPrevious,
 }: ReactHookFormProps) => {
     const config = useGetConfig();
     const t = useTranslations('renderForm');
@@ -56,21 +56,21 @@ export const ReactHookForm = ({
         <div>{t('loading')}</div>
     );
 
-    const ErrorComponent = config.loadingComponent ?? <div>{t('error')}</div>;
+    const ErrorComponent = config.errorComponent ?? <div>{t('error')}</div>;
 
     const zodSchema = useGetZodSchema(
         pydanticFormSchema,
         config.componentMatcherExtender,
     );
 
-    // initialize the react-hook-form
     const reactHookForm = useForm({
         resolver: zodResolver(zodSchema),
         mode: 'all',
         values: initialValues,
     });
 
     if (apiError) {
+        console.error('API Error:', apiError);
         return ErrorComponent;
     }
 

frontend/packages/pydantic-forms/src/core/hooks/useApiProvider.tsx

@@ -59,7 +59,7 @@ export function useApiProvider(
                             data: request.data,
                         } as PydanticFormApiResponse;
                     }
-                    throw new Error('Unknown API Response' + request);
+                    throw new Error('Unknown API Response code');
                 })
                 .catch((error) => {
                     console.error('Error in useSWR api', error);