From 2f9064a5c20bda62ce8e5b94f499b78cbe638e62 Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Sat, 19 Sep 2026 16:24:22 +1000
Subject: [PATCH] Improved API error handling (#12884)

* Improved API error handling

* Remove comment

* Fixes for playwright
---
 src/frontend/src/functions/api.tsx                   | 12 ++++++++++++
 .../Index/Settings/AccountSettings/MFASettings.tsx   | 10 +++++-----
 src/frontend/tests/pages/pui_stock.spec.ts           |  5 +++++
 src/frontend/tests/pui_settings.spec.ts              |  4 ++++
 4 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/functions/api.tsx b/src/frontend/src/functions/api.tsx
index 3e8b569d7e..1a98464282 100644
--- a/src/frontend/src/functions/api.tsx
+++ b/src/frontend/src/functions/api.tsx
@@ -26,6 +26,15 @@ export function extractErrorMessage({
       error_data['non_field_errors'];
   }
 
+  // Fallback to 'errors' array
+  if (
+    !message &&
+    Array.isArray(error_data?.errors) &&
+    error_data.errors.length > 0
+  ) {
+    message = error_data.errors[0].message ?? '';
+  }
+
   // No message? Look at the response status codes
   if (!message) {
     const status = error.status ?? error.response?.status ?? null;
@@ -47,6 +56,9 @@ export function extractErrorMessage({
         case 405:
           message = t`Method not allowed`;
           break;
+        case 409:
+          message = t`Conflict`;
+          break;
         case 500:
           message = t`Internal server error`;
           break;
diff --git a/src/frontend/src/pages/Index/Settings/AccountSettings/MFASettings.tsx b/src/frontend/src/pages/Index/Settings/AccountSettings/MFASettings.tsx
index b381bc4797..ad5fae8c72 100644
--- a/src/frontend/src/pages/Index/Settings/AccountSettings/MFASettings.tsx
+++ b/src/frontend/src/pages/Index/Settings/AccountSettings/MFASettings.tsx
@@ -33,6 +33,7 @@ import { useNavigate } from 'react-router-dom';
 import { useShallow } from 'zustand/react/shallow';
 import { api, queryClient } from '../../../../App';
 import { authApi, doLogout } from '../../../../functions/auth';
+import { showApiErrorMessage } from '../../../../functions/notifications';
 import { useServerApiState } from '../../../../states/ServerApiState';
 import { useGlobalSettingsState } from '../../../../states/SettingsStates';
 import { QrRegistrationForm } from './QrRegistrationForm';
@@ -475,12 +476,11 @@ function RegisterTOTPModal({
               setSecret(error.response?.data?.meta?.secret ?? '');
               break;
             default:
-              // Any other error is unexpected
-              showNotification({
-                title: t`Error Fetching TOTP Registration`,
-                message: t`An unexpected error occurred while fetching TOTP registration data.`,
-                color: 'red'
+              showApiErrorMessage({
+                error: error,
+                title: t`Error Fetching TOTP Registration`
               });
+
               throw error;
           }
 
diff --git a/src/frontend/tests/pages/pui_stock.spec.ts b/src/frontend/tests/pages/pui_stock.spec.ts
index c8c23bd182..6065638e22 100644
--- a/src/frontend/tests/pages/pui_stock.spec.ts
+++ b/src/frontend/tests/pages/pui_stock.spec.ts
@@ -484,6 +484,11 @@ test('Stock - Return Items', async ({ browser }) => {
 
   // Location detail
   await navigate(page, 'stock/item/1253');
+
+  // Allow some settling time for this page
+  await page.waitForLoadState('networkidle');
+  await page.waitForTimeout(100);
+
   await page
     .getByRole('button', { name: 'action-menu-stock-operations' })
     .click();
diff --git a/src/frontend/tests/pui_settings.spec.ts b/src/frontend/tests/pui_settings.spec.ts
index 47edcbfcd6..ae5e4f5035 100644
--- a/src/frontend/tests/pui_settings.spec.ts
+++ b/src/frontend/tests/pui_settings.spec.ts
@@ -444,6 +444,9 @@ test('Settings - Admin - Parameter', async ({ browser }) => {
   await page.getByRole('cell', { name: 'Animals', exact: true }).waitFor();
   await page.getByText('Various animals and descriptions thereof').waitFor();
 
+  await page.waitForLoadState('networkidle');
+  await page.waitForTimeout(250);
+
   // Clean old list data if exists
   await page
     .getByRole('cell', { name: 'some list' })
@@ -538,6 +541,7 @@ test('Settings - Admin - Parameter', async ({ browser }) => {
     })
     .click();
 
+  await page.waitForLoadState('networkidle');
   await page.waitForTimeout(500);
 
   await page.getByText('Add Parameter').waitFor();