From b0fe208399eb0d6b803f1d09856547d7cea910eb Mon Sep 17 00:00:00 2001
From: qwerty287 <80460567+qwerty287@users.noreply.github.com>
Date: Wed, 7 Aug 2024 18:47:13 +0200
Subject: [PATCH] Show error returned from API (#3980)

---
 web/src/compositions/useAsyncAction.ts | 14 ++++++++------
 web/src/lib/api/client.ts              |  9 +++++++--
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/web/src/compositions/useAsyncAction.ts b/web/src/compositions/useAsyncAction.ts
index 663c080bf..09098e9bd 100644
--- a/web/src/compositions/useAsyncAction.ts
+++ b/web/src/compositions/useAsyncAction.ts
@@ -1,10 +1,9 @@
 import { computed, ref } from 'vue';
 
-import useNotifications from '~/compositions/useNotifications';
-
-const notifications = useNotifications();
-
-export function useAsyncAction<T extends unknown[]>(action: (...a: T) => void | Promise<void>) {
+export function useAsyncAction<T extends unknown[]>(
+  action: (...a: T) => void | Promise<void>,
+  onerror: ((error: any) => void) | undefined = undefined,
+) {
   const isLoading = ref(false);
 
   async function doSubmit(...a: T) {
@@ -16,7 +15,10 @@ export function useAsyncAction<T extends unknown[]>(action: (...a: T) => void |
     try {
       await action(...a);
     } catch (error) {
-      notifications.notify({ title: (error as Error).message, type: 'error' });
+      console.error(error);
+      if (onerror) {
+        onerror(error);
+      }
     }
     isLoading.value = false;
   }
diff --git a/web/src/lib/api/client.ts b/web/src/lib/api/client.ts
index 1fd5741fd..887314654 100644
--- a/web/src/lib/api/client.ts
+++ b/web/src/lib/api/client.ts
@@ -52,14 +52,19 @@ export default class ApiClient {
     });
 
     if (!res.ok) {
+      let message = res.statusText;
+      const resText = await res.text();
+      if (resText) {
+        message = `${res.statusText}: ${resText}`;
+      }
       const error: ApiError = {
         status: res.status,
-        message: res.statusText,
+        message,
       };
       if (this.onerror) {
         this.onerror(error);
       }
-      throw new Error(res.statusText);
+      throw new Error(message);
     }
 
     const contentType = res.headers.get('Content-Type');