Better error management

src/components/Availability/AvailabilityCreate.tsx

@@ -14,7 +14,7 @@ import { UIAvailability } from "./types";
 import { STEPPER_DURATION } from "../../utils/constants";
 import { useAvailabilityMutation } from "./useAvailabilityMutation";
 import { AvailabilitySuccess } from "./AvailabilitySuccess";
-import { AvailabilityError } from "./AvailabilityError";
+import { ErrorPlaceholder } from "../ErrorPlaceholder/ErrorPlaceholder";
 
 type Props = {
   space: CodexNodeSpace;
@@ -39,7 +39,12 @@ export function AvailabilityCreate({ space }: Props) {
     AvailabilityForm,
     AvailabilityConfirm,
     error
-      ? () => <AvailabilityError dispatch={dispatch} error={error} />
+      ? () => (
+          <ErrorPlaceholder
+            subtitle="Error when trying to create availability."
+            error={error}
+          />
+        )
       : AvailabilitySuccess,
   ];
 

src/components/Availability/AvailabilityError.tsx

@@ -1,16 +0,0 @@
-import { Placeholder } from "@codex-storage/marketplace-ui-components";
-import { ErrorIcon } from "../ErrorIcon/ErrorIcon";
-
-type Props = {
-  error: Error;
-};
-
-export function AvailabilityError({ error }: Props) {
-  return (
-    <Placeholder
-      Icon={<ErrorIcon />}
-      title="Error"
-      subtitle={"Got an error when trying to create the availability."}
-      message={error.message}></Placeholder>
-  );
-}

src/components/Availability/AvailabilityReservations.tsx

@@ -2,8 +2,10 @@ import {
   Backdrop,
   Button,
   EmptyPlaceholder,
+  Modal,
   Placeholder,
   SpaceAllocation,
+  Spinner,
 } from "@codex-storage/marketplace-ui-components";
 import { classnames } from "../../utils/classnames";
 import "./AvailabilityReservations.css";
@@ -13,6 +15,7 @@ import { Promises } from "../../utils/promises";
 import { CodexAvailability } from "@codex-storage/sdk-js";
 import { useEffect } from "react";
 import { ErrorIcon } from "../ErrorIcon/ErrorIcon";
+import { ErrorPlaceholder } from "../ErrorPlaceholder/ErrorPlaceholder";
 
 type Props = {
   availability: CodexAvailability;
@@ -28,28 +31,41 @@ export function AvailabilityReservations({
   const queryClient = useQueryClient();
 
   useEffect(() => {
-    queryClient.invalidateQueries({ queryKey: ["reservations"] });
+    if (availability) {
+      queryClient.invalidateQueries({ queryKey: ["reservations"] });
+    }
   }, [availability]);
 
-  const { data = [], error } = useQuery({
-    queryFn: async () => {
-      const s = await CodexSdk.marketplace.reservations(availability.id);
-      return await Promises.rejectOnError(s);
+  const {
+    data = [],
+    isPending,
+    error,
+  } = useQuery({
+    queryFn: () => {
+      return CodexSdk.marketplace
+        .reservations(availability?.id)
+        .then((s) => Promises.rejectOnError(s));
     },
     queryKey: ["reservations"],
+    retry: 0,
+    staleTime: 0,
   });
 
+  if (isPending) {
+    return (
+      <Modal onClose={onClose} open={open}>
+        <Spinner />
+      </Modal>
+    );
+  }
+
   if (error) {
     return (
-      <>
-        <Backdrop open={open} onClose={onClose} removeScroll={true} />
-
-        <Placeholder
-          Icon={<ErrorIcon />}
-          title="Error"
+      <Modal onClose={onClose} open={open}>
+        <ErrorPlaceholder
           subtitle="Error when retrieving reservations."
-          message={error.message}></Placeholder>
-      </>
+          error={error}></ErrorPlaceholder>
+      </Modal>
     );
   }
 
@@ -68,9 +84,7 @@ export function AvailabilityReservations({
   const isEmpty = !!data.length;
 
   return (
-    <>
-      <Backdrop open={open} onClose={onClose} removeScroll={true} />
-
+    <Modal open={open} onClose={onClose}>
       <div
         className={classnames(["reservations"], ["reservations--open", open])}>
         <b className="reservations-title">Availability reservations</b>
@@ -87,6 +101,6 @@ export function AvailabilityReservations({
           <Button label={"Close"} variant="outline" onClick={onClose} />
         </div>
       </div>
-    </>
+    </Modal>
   );
 }

src/components/Availailibities/Availabilities.tsx

@@ -1,4 +1,5 @@
 import {
+  Placeholder,
   SpaceAllocation,
   Spinner,
 } from "@codex-storage/marketplace-ui-components";
@@ -13,10 +14,19 @@ import { AvailabilitiesTable } from "../Availability/AvailabilitiesTable";
 import { AvailabilityReservations } from "../Availability/AvailabilityReservations";
 import "./Availabilities.css";
 
+const defaultSpace = {
+  quotaMaxBytes: 0,
+  quotaReservedBytes: 0,
+  quotaUsedBytes: 0,
+  totalBlocks: 0,
+};
+
 export function Availabilities() {
   {
     const [availabilitySelected, setAvailabilitySelected] =
       useState<CodexAvailability | null>(null);
+
+    // Error will be catched in ErrorBounday
     const { data: availabilities = [], isPending } = useQuery({
       queryFn: () =>
         CodexSdk.marketplace
@@ -29,16 +39,8 @@ export function Availabilities() {
       throwOnError: true,
     });
 
-    const {
-      data: space = {
-        quotaMaxBytes: 0,
-        quotaReservedBytes: 0,
-        quotaUsedBytes: 0,
-        totalBlocks: 0,
-      },
-      isError,
-      error,
-    } = useQuery({
+    // Error will be catched in ErrorBounday
+    const { data: space = defaultSpace } = useQuery({
       queryFn: () =>
         CodexSdk.data.space().then((s) => Promises.rejectOnError(s)),
       queryKey: ["space"],

src/components/ErrorPlaceholder/ErrorPlaceholder.tsx

@@ -0,0 +1,25 @@
+import { Placeholder } from "@codex-storage/marketplace-ui-components";
+import { ErrorIcon } from "../ErrorIcon/ErrorIcon";
+
+type Props = {
+  subtitle?: string;
+  error: unknown;
+};
+
+export function ErrorPlaceholder({ subtitle, error }: Props) {
+  const message =
+    error instanceof Object && error.hasOwnProperty("message")
+      ? // @ts-ignore
+        error.message
+      : `${error}`;
+
+  console.info(message, error);
+
+  return (
+    <Placeholder
+      Icon={<ErrorIcon />}
+      title="Error"
+      subtitle={subtitle}
+      message={message}></Placeholder>
+  );
+}

src/routes/dashboard/availabilities.tsx

@@ -1,6 +1,15 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { Availabilities } from "../../components/Availailibities/Availabilities";
+import { ErrorBoundary } from "@sentry/react";
+import { ErrorPlaceholder } from "../../components/ErrorPlaceholder/ErrorPlaceholder";
 
 export const Route = createFileRoute("/dashboard/availabilities")({
-  component: Availabilities,
+  component: () => (
+    <ErrorBoundary
+      fallback={({ error }) => (
+        <ErrorPlaceholder error={error} subtitle="Cannot retrive the data." />
+      )}>
+      <Availabilities />
+    </ErrorBoundary>
+  ),
 });