1 files changed, 20 insertions, 14 deletions
diff --git a/web_src/js/features/common-fetch-action.ts b/web_src/js/features/common-fetch-action.ts
index 9359713454..a372216ae6 100644
--- a/web_src/js/features/common-fetch-action.ts
+++ b/web_src/js/features/common-fetch-action.ts
@@ -5,7 +5,7 @@ import {confirmModal} from './comp/ConfirmModal.ts';
 import type {RequestOpts} from '../types.ts';
 import {ignoreAreYouSure} from '../vendor/jquery.are-you-sure.ts';
 
-const {appSubUrl, i18n} = window.config;
+const {appSubUrl} = window.config;
 
 // fetchActionDoRedirect does real redirection to bypass the browser's limitations of "location"
 // more details are in the backend's fetch-redirect handler
@@ -23,11 +23,20 @@ function fetchActionDoRedirect(redirect: string) {
 }
 
 async function fetchActionDoRequest(actionElem: HTMLElement, url: string, opt: RequestOpts) {
+  const showErrorForResponse = (code: number, message: string) => {
+    showErrorToast(`Error ${code || 'request'}: ${message}`);
+  };
+
+  let respStatus = 0;
+  let respText = '';
   try {
     hideToastsAll();
     const resp = await request(url, opt);
-    if (resp.status === 200) {
-      let {redirect} = await resp.json();
+    respStatus = resp.status;
+    respText = await resp.text();
+    const respJson = JSON.parse(respText);
+    if (respStatus === 200) {
+      let {redirect} = respJson;
       redirect = redirect || actionElem.getAttribute('data-redirect');
       ignoreAreYouSure(actionElem); // ignore the areYouSure check before reloading
       if (redirect) {
@@ -38,22 +47,19 @@ async function fetchActionDoRequest(actionElem: HTMLElement, url: string, opt: R
       return;
     }
 
-    if (resp.status >= 400 && resp.status < 500) {
-      const data = await resp.json();
+    if (respStatus >= 400 && respStatus < 500 && respJson?.errorMessage) {
       // the code was quite messy, sometimes the backend uses "err", sometimes it uses "error", and even "user_error"
       // but at the moment, as a new approach, we only use "errorMessage" here, backend can use JSONError() to respond.
-      if (data.errorMessage) {
-        showErrorToast(data.errorMessage, {useHtmlBody: data.renderFormat === 'html'});
-      } else {
-        showErrorToast(`server error: ${resp.status}`);
-      }
+      showErrorToast(respJson.errorMessage, {useHtmlBody: respJson.renderFormat === 'html'});
     } else {
-      showErrorToast(`server error: ${resp.status}`);
+      showErrorForResponse(respStatus, respText);
     }
   } catch (e) {
-    if (e.name !== 'AbortError') {
-      console.error('error when doRequest', e);
-      showErrorToast(`${i18n.network_error} ${e}`);
+    if (e.name === 'SyntaxError') {
+      showErrorForResponse(respStatus, (respText || '').substring(0, 100));
+    } else if (e.name !== 'AbortError') {
+      console.error('fetchActionDoRequest error', e);
+      showErrorForResponse(respStatus, `${e}`);
     }
   }
   actionElem.classList.remove('is-loading', 'loading-icon-2px');