feat: render oops errors

src/api/services/views.ts

@@ -90,13 +90,23 @@ const fetchViewData = async (
   });
 
   if (!response.ok) {
-    const errorData = await response.json();
-    throw new Error(
-      errorData.error || `HTTP ${response.status}: ${response.statusText}`
+    const errorData = await response.json().catch(() => null);
+    throw (
+      errorData ?? {
+        message: `HTTP ${response.status}: ${response.statusText}`,
+        status: response.status,
+        statusText: response.statusText
+      }
     );
   }
 
-  return response.json();
+  const data = await response.json();
+
+  if (data && typeof data === "object" && (data as Record<string, any>).error) {
+    throw data;
+  }
+
+  return data;
 };
 
 export const getViewDataById = async (

src/pages/audit-report/components/View/View.tsx

@@ -15,6 +15,7 @@ import { ViewColumnDropdown } from "../ViewColumnDropdown";
 import useReactTablePaginationState from "@flanksource-ui/ui/DataTable/Hooks/useReactTablePaginationState";
 import ViewTableFilterForm from "./ViewTableFilterForm";
 import { queryViewTable } from "../../../../api/services/views";
+import { ErrorViewer } from "@flanksource-ui/components/ErrorViewer";
 import {
   NumberPanel,
   TablePanel,
@@ -256,11 +257,8 @@ const View: React.FC<ViewProps> = ({
       </div>
 
       {tableError && (
-        <div className="text-center text-red-500">
-          <p>
-            Error loading table data:{" "}
-            {tableError instanceof Error ? tableError.message : "Unknown error"}
-          </p>
+        <div className="mb-4">
+          <ErrorViewer error={tableError} className="max-w-4xl" />
         </div>
       )}
 

src/pages/views/ViewPage.tsx

@@ -1,5 +1,6 @@
 import React, { Suspense, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
+import { ErrorViewer } from "@flanksource-ui/components/ErrorViewer";
 import {
   getViewIdByNamespaceAndName,
   getViewIdByName
@@ -22,7 +23,7 @@ export function ViewPage() {
   }>();
   const [viewId, setViewId] = useState<string | undefined>(id);
   const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  const [error, setError] = useState<unknown | null>(null);
 
   useEffect(() => {
     if (id) {
@@ -57,9 +58,7 @@ export function ViewPage() {
 
         setViewId(fetchedId);
       } catch (err) {
-        setError(
-          `Failed to load view: ${err instanceof Error ? err.message : String(err)}`
-        );
+        setError(err ?? "Failed to load view");
       } finally {
         setIsLoading(false);
       }
@@ -78,22 +77,19 @@ export function ViewPage() {
 
   if (error) {
     return (
-      <div className="flex min-h-screen items-center justify-center">
-        <div className="text-center">
-          <div className="mb-4 text-xl text-red-500">Error</div>
-          <p className="text-gray-600">{error}</p>
-        </div>
+      <div className="flex min-h-screen items-center justify-center px-6">
+        <ErrorViewer error={error} className="w-full max-w-2xl" />
       </div>
     );
   }
 
   if (!viewId) {
     return (
-      <div className="flex min-h-screen items-center justify-center">
-        <div className="text-center">
-          <div className="mb-4 text-xl text-red-500">Error</div>
-          <p className="text-gray-600">No view identifier provided</p>
-        </div>
+      <div className="flex min-h-screen items-center justify-center px-6">
+        <ErrorViewer
+          error="No view identifier provided"
+          className="w-full max-w-2xl"
+        />
       </div>
     );
   }

src/pages/views/components/SingleView.tsx

@@ -10,6 +10,7 @@ import GlobalFiltersForm from "../../audit-report/components/View/GlobalFiltersF
 import GlobalFilters from "../../audit-report/components/View/GlobalFilters";
 import { VIEW_VAR_PREFIX } from "../constants";
 import type { ViewRef } from "../../audit-report/types";
+import { ErrorViewer } from "@flanksource-ui/components/ErrorViewer";
 
 interface SingleViewProps {
   id: string;
@@ -68,10 +69,13 @@ const SingleView: React.FC<SingleViewProps> = ({ id }) => {
     forceRefreshRef.current = false;
 
     if (result.isError) {
+      const err = result.error as any;
       toastError(
-        result.error instanceof Error
-          ? result.error.message
-          : "Failed to refresh view"
+        err?.message ||
+          err?.error ||
+          err?.detail ||
+          err?.msg ||
+          "Failed to refresh view"
       );
       return;
     }
@@ -128,14 +132,7 @@ const SingleView: React.FC<SingleViewProps> = ({ id }) => {
         onRefresh={handleForceRefresh}
         centered
       >
-        <div className="text-center">
-          <div className="mb-4 text-xl text-red-500">Something went wrong</div>
-          <p className="text-gray-600">
-            {error instanceof Error
-              ? error.message
-              : "Failed to fetch view data"}
-          </p>
-        </div>
+        <ErrorViewer error={error} className="mx-auto max-w-3xl" />
       </ViewLayout>
     );
   }
@@ -148,12 +145,10 @@ const SingleView: React.FC<SingleViewProps> = ({ id }) => {
         onRefresh={handleForceRefresh}
         centered
       >
-        <div className="text-center">
-          <div className="mb-4 text-xl text-gray-500">View not found</div>
-          <p className="text-gray-600">
-            The requested view could not be found.
-          </p>
-        </div>
+        <ErrorViewer
+          error="The requested view could not be found."
+          className="mx-auto max-w-3xl"
+        />
       </ViewLayout>
     );
   }

src/pages/views/components/ViewSection.tsx

@@ -7,6 +7,7 @@ import { Icon } from "../../../ui/Icons/Icon";
 import { usePrefixedSearchParams } from "../../../hooks/usePrefixedSearchParams";
 import { VIEW_VAR_PREFIX } from "../constants";
 import { ViewSection as Section } from "../../audit-report/types";
+import { ErrorViewer } from "@flanksource-ui/components/ErrorViewer";
 
 interface ViewSectionProps {
   section: Section;
@@ -73,8 +74,11 @@ const ViewSection: React.FC<ViewSectionProps> = ({
           </h3>
         </div>
         {isExpanded && (
-          <div id={errorContentId} className="text-red-500">
-            {error instanceof Error ? error.message : "Failed to load section"}
+          <div id={errorContentId}>
+            <ErrorViewer
+              error={error ?? "Failed to load section"}
+              className="max-w-3xl"
+            />
           </div>
         )}
       </>