27 - axios error and toast

src/screens/app/EditPasswordScreen/EditPasswordScreen.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import {useAuthUpdatePassword} from '@domain';
 import {zodResolver} from '@hookform/resolvers/zod';
+import {useToastService} from '@services';
 import {useForm} from 'react-hook-form';
 
 import {Button, FormPasswordInput, Screen} from '@components';
@@ -16,7 +17,12 @@ const defaultValues: EditPasswordSchema = {
 };
 
 export function EditPasswordScreen({}: AppScreenProps<'EditPasswordScreen'>) {
-  const {isLoading, updatePassword} = useAuthUpdatePassword();
+  const {showToast} = useToastService();
+  const {isLoading, updatePassword} = useAuthUpdatePassword({
+    onError: message => {
+      showToast({message, type: 'error'});
+    },
+  });
 
   const {control, formState, handleSubmit} = useForm<EditPasswordSchema>({
     resolver: zodResolver(editPasswordSchema),

src/utils/errorUtils.ts

@@ -1,3 +1,5 @@
+import axios from 'axios';
+
 type ErrorWithMessage = {
   message: string;
 };
@@ -31,7 +33,35 @@ function toErrorWithMessage(maybeError: unknown): ErrorWithMessage {
  * Reference: https://kentcdodds.com/blog/get-a-catch-block-error-message-with-typescript
  */
 function getErrorMessage(error: unknown) {
+  const axiosErrorMessage = tryGetAxiosErrorMessage(error);
+  if (axiosErrorMessage) {
+    return axiosErrorMessage;
+  }
   return toErrorWithMessage(error).message;
 }
 
+function tryGetAxiosErrorMessage(error: unknown): string | null {
+  try {
+    if (axios.isAxiosError(error)) {
+      const response = error.response;
+
+      if (response && response.data && response.data.message) {
+        return response.data.message;
+      }
+
+      if (response && response.data && Array.isArray(response.data.errors)) {
+        return response.data.errors
+          .map(
+            (errorObj: {message?: string}) =>
+              errorObj.message || 'unknown error',
+          )
+          .join(', ');
+      }
+    }
+    return null;
+  } catch (err) {
+    return null;
+  }
+}
+
 export const errorUtils = {getErrorMessage};