Surface API error message to user. Generally speaking this is not the best practice in a real app, since API error message may not be localized or could be too technical for user experince. But here it's fine.

Author: initialxy

app/components/AppAction.vue

@@ -141,7 +141,7 @@ const newTaskSubmit = async () => {
     await refreshNuxtData()
   } catch (error: any) {
     toast.add({
-      title: error.data?.message || 'Failed to create task',
+      title: getApiErrorMessage(error),
       color: 'error',
       progress: false,
     })
@@ -177,7 +177,7 @@ const newRewardSubmit = async () => {
     await refreshNuxtData()
   } catch (error: any) {
     toast.add({
-      title: error.data?.message || 'Failed to create reward',
+      title: getApiErrorMessage(error),
       color: 'error',
       progress: false,
     })

app/components/AppMenu.vue

@@ -213,7 +213,7 @@ const changeCredentialsSubmit = async () => {
     }
   } catch (error: any) {
     toast.add({
-      title: error.data?.message || 'Failed to change password',
+      title: getApiErrorMessage(error),
       color: 'error',
       progress: false,
     })

app/components/ChildView.vue

@@ -86,7 +86,7 @@ const handleCompleteTask = async (task: Task) => {
     await refreshNuxtData()
   } catch (error: any) {
     toast.add({
-      title: 'Failed to mark task as completed',
+      title: getApiErrorMessage(error),
       color: 'error',
       progress: false,
     })
@@ -111,7 +111,7 @@ const handleRejectTask = async (task: Task) => {
     await refreshNuxtData()
   } catch (error: any) {
     toast.add({
-      title: 'Failed to mark task as incomplete',
+      title: getApiErrorMessage(error),
       color: 'error',
       progress: false,
     })
@@ -146,7 +146,7 @@ const handleCompleteReward = async (reward: Reward) => {
     await refreshNuxtData()
   } catch (error: any) {
     toast.add({
-      title: 'Failed to request reward redemption',
+      title: getApiErrorMessage(error),
       color: 'error',
       progress: false,
     })
@@ -171,7 +171,7 @@ const handleRejectReward = async (reward: Reward) => {
     await refreshNuxtData()
   } catch (error: any) {
     toast.add({
-      title: 'Failed to cancel reward redemption',
+      title: getApiErrorMessage(error),
       color: 'error',
       progress: false,
     })

app/components/LoginForm.vue

@@ -117,7 +117,7 @@ const onSubmit = async () => {
     await navigateTo('/dashboard')
   } catch (error: any) {
     toast.add({
-      title: getAPIErrorMessage(error),
+      title: getApiErrorMessage(error),
       progress: false,
       color: 'error',
     })

app/components/ParentView.vue

@@ -115,7 +115,7 @@ const debouncedUpdatePoints = debounce(async (child: User, delta: number) => {
     emit('updatePoints', { childId: child.id, points: child.points })
   } catch (err) {
     console.error('Error updating points:', err)
-    toast.add({ title: 'Failed to update points', progress: false })
+    toast.add({ title: getApiErrorMessage(err), progress: false })
   }
 }, DEBOUNCE_WAIT_MS)
 

app/pages/child/[id].vue

@@ -187,7 +187,7 @@ const handleCompleteTask = async (task: Task) => {
     await refreshNuxtData()
   } catch (error: any) {
     toast.add({
-      title: 'Failed to approve task completion',
+      title: getApiErrorMessage(error),
       color: 'error',
       progress: false,
     })
@@ -212,7 +212,7 @@ const handleRejectTask = async (task: Task) => {
     await refreshNuxtData()
   } catch (error: any) {
     toast.add({
-      title: 'Failed to reject task completion',
+      title: getApiErrorMessage(error),
       color: 'error',
       progress: false,
     })
@@ -237,7 +237,7 @@ const handleDeleteTask = async (task: Task) => {
     await refreshNuxtData()
   } catch (error: any) {
     toast.add({
-      title: 'Failed to delete task',
+      title: getApiErrorMessage(error),
       color: 'error',
       progress: false,
     })
@@ -275,7 +275,7 @@ const editTaskSubmit = async () => {
     await refreshNuxtData()
   } catch (error: any) {
     toast.add({
-      title: 'Failed to update task',
+      title: getApiErrorMessage(error),
       color: 'error',
       progress: false,
     })
@@ -314,7 +314,7 @@ const handleCompleteReward = async (reward: Reward) => {
     await refreshNuxtData()
   } catch (error: any) {
     toast.add({
-      title: 'Failed to approve reward redemption',
+      title: getApiErrorMessage(error),
       color: 'error',
       progress: false,
     })
@@ -374,7 +374,7 @@ const editRewardSubmit = async () => {
     await refreshNuxtData()
   } catch (error: any) {
     toast.add({
-      title: 'Failed to update reward',
+      title: getApiErrorMessage(error),
       color: 'error',
       progress: false,
     })
@@ -399,7 +399,7 @@ const handleRejectReward = async (reward: Reward) => {
     await refreshNuxtData()
   } catch (error: any) {
     toast.add({
-      title: 'Failed to reject reward redemption',
+      title: getApiErrorMessage(error),
       color: 'error',
       progress: false,
     })
@@ -424,7 +424,7 @@ const handleDeleteReward = async (reward: Reward) => {
     await refreshNuxtData()
   } catch (error: any) {
     toast.add({
-      title: 'Failed to delete reward',
+      title: getApiErrorMessage(error),
       color: 'error',
       progress: false,
     })

app/utils/index.ts

@@ -23,6 +23,6 @@ export function capitalize(str: string): string {
   return trimmed.charAt(0).toUpperCase() + trimmed.slice(1)
 }
 
-export function getAPIErrorMessage(error: any): string {
+export function getApiErrorMessage(error: any): string {
   return error?.data?.message || 'Something went wrong'
 }