fix: add error handling capabilities (#4447)

Author: adrians5j

packages/app-page-builder-elements/src/hooks/useLoader.ts

@@ -2,21 +2,22 @@ import { useEffect, useMemo, useState, type DependencyList } from "react";
 import { createObjectHash } from "./useLoader/createObjectHash";
 import { useRenderer } from "..";
 
-export interface RendererLoader<TData = unknown> {
+export interface RendererLoader<TData = unknown, TError = unknown> {
     data: TData | null;
     loading: boolean;
     cacheHit: boolean;
     cacheKey: null | string;
+    error: null | TError;
 }
 
 export interface UseLoaderOptions {
     cacheKey?: DependencyList;
 }
 
-export function useLoader<TData = unknown>(
+export function useLoader<TData = unknown, TError = unknown>(
     loaderFn: () => Promise<TData>,
     options?: UseLoaderOptions
-): RendererLoader<TData> {
+): RendererLoader<TData, TError> {
     const { getElement, loaderCache } = useRenderer();
 
     const element = getElement();
@@ -29,15 +30,16 @@ export function useLoader<TData = unknown>(
         return loaderCache.read<TData>(cacheKey);
     }, [cacheKey]);
 
-    const [loader, setLoader] = useState<RendererLoader<TData>>(
+    const [loader, setLoader] = useState<RendererLoader<TData, TError>>(
         cachedData
             ? {
                   data: cachedData,
                   loading: false,
                   cacheHit: true,
-                  cacheKey
+                  cacheKey,
+                  error: null
               }
-            : { data: null, loading: true, cacheHit: false, cacheKey: null }
+            : { data: null, loading: true, cacheHit: false, cacheKey: null, error: null }
     );
 
     useEffect(() => {
@@ -46,15 +48,25 @@ export function useLoader<TData = unknown>(
         }
 
         if (cachedData) {
-            setLoader({ data: cachedData, loading: false, cacheKey, cacheHit: true });
+            setLoader({ data: cachedData, loading: false, cacheKey, cacheHit: true, error: null });
             return;
         }
 
-        setLoader({ data: loader.data, loading: true, cacheKey, cacheHit: false });
-        loaderFn().then(data => {
-            loaderCache.write(cacheKey, data);
-            setLoader({ data, loading: false, cacheKey, cacheHit: false });
+        setLoader({
+            data: loader.data,
+            error: loader.error,
+            loading: true,
+            cacheKey,
+            cacheHit: false
         });
+        loaderFn()
+            .then(data => {
+                loaderCache.write(cacheKey, data);
+                setLoader({ data, error: null, loading: false, cacheKey, cacheHit: false });
+            })
+            .catch(error => {
+                setLoader({ data: null, error, loading: false, cacheKey, cacheHit: false });
+            });
     }, [cacheKey]);
 
     return loader;