Improved API error handling (#12884)

* Improved API error handling

* Remove comment

* Fixes for playwright

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;

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;
           }
 

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();

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();