Improved UI toasting of API errors (#293)

Toast messages now do the following:

1. Account for different json structures when extracting message
2. Do not allow the pages to hand when error occurs
3. Fade in and out, lasting no longer than five seconds when displayed
4. Displays Axios error message instead of basic HTTP response

---------

Signed-off-by: “khandrew-redhat” <“khandrew@redhat.com”>
Co-authored-by: “khandrew-redhat” <“khandrew@redhat.com”>

Author: khandrew-redhat

.gitignore

@@ -1,2 +1,3 @@
 .idea
+**/.DS_Store
 backend/ocpperf.toml

backend/scripts/version.py

@@ -10,9 +10,8 @@
 from pathlib import Path
 import subprocess
 import sys
-from typing import Optional
-
 import tomllib
+from typing import Optional
 
 
 def do(cmd: list[str]) -> list[str]:

frontend/package-lock.json

@@ -2,7 +2,6 @@ import * as API_ROUTES from "@/utils/apiConstants";
 import * as TYPES from "./types.js";
 
 import API from "@/utils/axiosInstance";
-import { showFailureToast } from "./toastActions.js";
 
 export const setLastUpdatedTime = () => ({
   type: TYPES.SET_LAST_UPDATED_TIME,
@@ -20,6 +19,7 @@ export const fetchAggregatorVersion = () => async (dispatch) => {
       });
     }
   } catch (error) {
-    dispatch(showFailureToast());
+    // Error handling is done automatically by axios interceptor
+    console.error('Failed to fetch aggregator version:', error);
   }
 };

frontend/src/actions/headerActions.js

@@ -16,7 +16,6 @@ import {
 import API from "@/utils/axiosInstance";
 import { cloneDeep } from "lodash";
 import { setLastUpdatedTime } from "./headerActions";
-import { showFailureToast } from "@/actions/toastActions";
 import { OTHERS } from "@/assets/constants/jobStatusConstants";
 
 export const fetchQuayJobsData = () => async (dispatch) => {
@@ -256,7 +255,8 @@ export const fetchGraphData = (uuid) => async (dispatch, getState) => {
       }
     }
   } catch (error) {
-    dispatch(showFailureToast());
+    // Error handling is done automatically by axios interceptor
+    console.error('Failed to fetch aggregator version:', error);
   }
   dispatch({ type: TYPES.GRAPH_COMPLETED });
 };

frontend/src/actions/quayActions.js

@@ -7,6 +7,7 @@ import {
 import { useDispatch, useSelector } from "react-redux";
 
 import { hideToast } from "@/actions/toastActions";
+import "./index.less";
 
 const ToastComponent = () => {
   const { alerts } = useSelector((state) => state.toast);
@@ -15,15 +16,32 @@ const ToastComponent = () => {
   const removeToast = (key) => {
     dispatch(hideToast(key));
   };
+
+  // Different timeout durations based on alert type
+  const getTimeoutDuration = (variant) => {
+    switch (variant) {
+      case 'success':
+        return 2500; // Success messages can disappear quickly
+      case 'info':
+        return 3000; // Info messages - standard duration
+      case 'warning':
+        return 4000; // Warnings need a bit more time
+      case 'danger':
+        return 4500; // Error messages need more time to read
+      default:
+        return 3000; // Default fallback
+    }
+  };
   return (
-    <AlertGroup isToast>
+    <AlertGroup isToast className="fast-fade-toast-group">
       {alerts.map((item) => (
         <Alert
           variant={AlertVariant[item.variant]}
           title={item.title}
           key={item.key}
-          timeout={true}
+          timeout={getTimeoutDuration(item.variant)}
           onTimeout={() => removeToast(item.key)}
+          className="fast-fade-toast"
           actionClose={
             <AlertActionCloseButton
               title={item.title}

frontend/src/components/organisms/ToastComponent/index.jsx

@@ -0,0 +1,101 @@
+// Assisted-by: Cursor AI
+// Toast animation styles for faster, smoother notifications
+
+.fast-fade-toast-group {
+  // Ensure proper z-index for toasts
+  z-index: 9999;
+  
+  // Animation for toast group
+  .pf-c-alert-group__item {
+    animation: slideInRight 0.3s ease-out;
+    transition: all 0.3s ease-out;
+  }
+}
+
+.fast-fade-toast {
+  // Faster transitions for all toast interactions
+  transition: all 0.3s ease-out !important;
+  
+  // Smoother entrance animation
+  animation: slideInRight 0.3s ease-out;
+  
+  // Override PatternFly's default fade-out animation to be faster
+  &.pf-m-fadeout {
+    animation: fadeOutRight 0.3s ease-in forwards !important;
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  
+  // Hover effects for better UX
+  &:hover {
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+    transform: translateY(-1px);
+  }
+}
+
+// Keyframes for smooth animations
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes fadeOutRight {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+
+// Additional improvements for toast appearance
+.fast-fade-toast {
+  // Slightly more compact padding for quicker reading
+  .pf-c-alert__title {
+    font-weight: 600;
+    margin-bottom: 4px;
+  }
+  
+  // Better spacing for message content
+  p {
+    margin: 2px 0;
+    line-height: 1.4;
+  }
+  
+  // Smoother close button interaction
+  .pf-c-button.pf-m-plain {
+    transition: all 0.2s ease;
+    
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+      transform: scale(1.1);
+    }
+  }
+}
+
+// Responsive behavior for mobile
+@media (max-width: 768px) {
+  .fast-fade-toast-group {
+    // Ensure toasts are readable on mobile
+    .pf-c-alert-group__item {
+      margin: 0 8px;
+    }
+  }
+  
+  .fast-fade-toast {
+    // Slightly smaller on mobile
+    font-size: 0.9rem;
+    
+    .pf-c-alert__title {
+      font-size: 1rem;
+    }
+  }
+}

frontend/src/components/organisms/ToastComponent/index.less

@@ -0,0 +1,161 @@
+import { describe, it, expect, test } from "vitest";
+
+import {
+  extractErrorMessage,
+} from "../errorUtils";
+
+// Test the error priority logic that would be used in axios interceptor
+const mockErrorPrioritization = (axiosMessage, responseData, status = 500) => {
+  const responseMessage = extractErrorMessage(responseData, status);
+  
+  // Use response message if available, otherwise fall back to axios message
+  const extractedMessage = responseMessage || axiosMessage;
+  
+  if (extractedMessage) {
+    return { 
+      message: extractedMessage, 
+      source: responseMessage ? 'Response data extraction' : 'Axios error message' 
+    };
+  }
+  
+  return { message: null, source: 'none' };
+};
+
+describe("extractErrorMessage", () => {
+  // Status code based enhanced messages (any text gets enhanced for these status codes)
+  test.each([
+    ["Internal Server Error", 500, "A backend service is temporarily unavailable."],
+    ["Erreur interne du serveur", 500, "A backend service is temporarily unavailable."], // French
+    ["Custom 500 error", 500, "A backend service is temporarily unavailable."],
+    ["Bad Gateway", 502, "Unable to connect to backend service. Please try again in a moment."],
+    ["Proxy Error", 502, "Unable to connect to backend service. Please try again in a moment."],
+    ["Service Unavailable", 503, "The service is temporarily overloaded or under maintenance. Please try again later."],
+    ["Temporarily Unavailable", 503, "The service is temporarily overloaded or under maintenance. Please try again later."],
+    ["Gateway Timeout", 504, "The request timed out while connecting to external services. Please try again."],
+    ["Request Timeout", 504, "The request timed out while connecting to external services. Please try again."]
+  ])('enhances any plain text for status %d: "%s" -> enhanced message', (input, status, expected) => {
+    expect(extractErrorMessage(input, status)).toBe(expected);
+  });
+
+  // Non-enhanced status codes return original text
+  test.each([
+    ["Custom server error", 400, "Custom server error"],
+    ["Not Found", 404, "Not Found"],
+    ["Unauthorized", 401, "Unauthorized"],
+    ["  Whitespace trimmed  ", 422, "Whitespace trimmed"]
+  ])('returns original text for non-enhanced status %d: "%s"', (input, status, expected) => {
+    expect(extractErrorMessage(input, status)).toBe(expected);
+  });
+
+  // FastAPI error formats
+  test.each([
+    [{ detail: { message: "Custom error message" } }, 400, "Custom error message"],
+    [{ detail: { error: "Error object format" } }, 422, "Error object format"],
+    [{ detail: "String detail format" }, 400, "String detail format"],
+    [{ error: "Direct error key format" }, 400, "Direct error key format"],
+    [{ message: "Generic message field" }, 400, "Generic message field"]
+  ])('extracts from various JSON formats', (input, status, expected) => {
+    expect(extractErrorMessage(input, status)).toBe(expected);
+  });
+
+  // Null/invalid inputs
+  test.each([
+    [null], [undefined], [{}], [123], [[]], [""], ["   "], [{ detail: [] }]
+  ])('returns enhanced message for status 500 even with unparseable data: %s', (input) => {
+    expect(extractErrorMessage(input, 500)).toBe("A backend service is temporarily unavailable.");
+  });
+
+  it("handles validation errors with field paths", () => {
+    const result = extractErrorMessage({
+      detail: [
+        { msg: "Field required", loc: ["query", "start_date"] },
+        { msg: "ensure this value is greater than 0", loc: ["query", "size"] },
+      ],
+    }, 422);
+    expect(result).toContain("Multiple validation errors");
+    expect(result).toContain("Field required");
+    expect(result).toContain("greater than 0");
+  });
+
+  it("handles single validation error with nested path", () => {
+    const result = extractErrorMessage({
+      detail: [{ msg: "Field is required", loc: ["query", "start_date", "nested"] }],
+    }, 422);
+    expect(result).toBe("Field is required (start_date.nested)");
+  });
+});
+
+
+describe("Error Prioritization Logic", () => {
+  test.each([
+    ["Request failed with status code 422", { detail: { message: "Database connection timeout" } }, "Database connection timeout", "Response data extraction"],
+    ["Request failed with status code 500", "Internal Server Error", "A backend service is temporarily unavailable.", "Response data extraction"],
+    ["Network Error", "Internal Server Error", "A backend service is temporarily unavailable.", "Response data extraction"],
+    ["Connection refused to database server", "Internal Server Error", "A backend service is temporarily unavailable.", "Response data extraction"],
+    ["timeout of 5000ms exceeded", "Internal Server Error", "A backend service is temporarily unavailable.", "Response data extraction"],
+    [null, { detail: { message: "Specific error" } }, "Specific error", "Response data extraction"],
+    [undefined, "Internal Server Error", "A backend service is temporarily unavailable.", "Response data extraction"],
+    ["Network Error", { random: "data" }, "A backend service is temporarily unavailable.", "Response data extraction"],
+    ["", "Internal Server Error", "A backend service is temporarily unavailable.", "Response data extraction"]
+  ])('prioritization: axios="%s" response=%j -> message="%s" source="%s"', (axiosMessage, responseData, expectedMessage, expectedSource) => {
+    const result = mockErrorPrioritization(axiosMessage, responseData, responseData && typeof responseData === 'object' && responseData.detail ? 422 : 500);
+    expect(result.message).toBe(expectedMessage);
+    expect(result.source).toBe(expectedSource);
+  });
+
+  it("prefers validation errors over axios messages", () => {
+    const result = mockErrorPrioritization(
+      "Request failed with status code 422",
+      { detail: [{ msg: "Field required", loc: ["query", "start_date"] }] },
+      422
+    );
+    
+    expect(result).toEqual({
+      message: "Field required (start_date)",
+      source: "Response data extraction"
+    });
+  });
+});
+
+describe("Integration Tests - Full Error Handling Flow", () => {
+  const mockFullErrorHandling = (status, data, url, axiosMessage) => {
+    // Note: Current implementation shows toasts for ALL status codes (400-599)
+    const responseMessage = extractErrorMessage(data, status);
+    
+    // Use response message if available, otherwise fall back to axios message
+    const extractedMessage = responseMessage || axiosMessage;
+    const messageSource = responseMessage ? 'Response data extraction' : 'Axios error message';
+
+    return {
+      showToast: true, // Now shows for all HTTP errors
+      message: extractedMessage,
+      source: messageSource
+    };
+  };
+
+  test.each([
+    [500, "Internal Server Error", "/api/v1/telco/filters", "Request failed with status code 500", "A backend service is temporarily unavailable.", "Response data extraction"],
+    [422, { detail: [{ msg: "Field required", loc: ["query", "start_date"] }] }, "/api/v1/ocp/jobs", "Request failed with status code 422", "Field required (start_date)", "Response data extraction"],
+    [400, { detail: { message: "Invalid date range" } }, "/api/v1/quay/jobs", "Request failed with status code 400", "Invalid date range", "Response data extraction"],
+    [404, { detail: "Not found" }, "/api/v1/ocp/jobs", "Request failed with status code 404", "Not found", "Response data extraction"]
+  ])('status %d with %j -> message="%s" source="%s"', (status, data, url, axiosMessage, expectedMessage, expectedSource) => {
+    const result = mockFullErrorHandling(status, data, url, axiosMessage);
+    
+    expect(result).toEqual({
+      showToast: true,
+      message: expectedMessage,
+      source: expectedSource
+    });
+  });
+
+  it("handles enhanced error messages", () => {
+    const result = mockFullErrorHandling(
+      504,
+      "Gateway Timeout",
+      "/api/v1/ols/jobs",
+      "timeout of 30000ms exceeded"
+    );
+    
+    expect(result.message).toBe("The request timed out while connecting to external services. Please try again.");
+  });
+});