Improve error handling

Author: ije

framework/react/context.ts

@@ -10,7 +10,7 @@ export const RouterContext = createContext<RouterContextProps>({
 
 export type DataContextProps = {
   dataUrl: string;
-  dataCache: Map<string, { data?: unknown; dataCacheTtl?: number; dataExpires?: number }>;
+  dataCache: Map<string, { data?: unknown; dataCacheTtl?: number; dataExpires?: number; error?: Error }>;
   ssrHeadCollection?: string[];
 };
 

framework/react/data.ts

@@ -1,27 +1,32 @@
 import { useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { FetchError } from "../../lib/helpers.ts";
 import { DataContext } from "./context.ts";
 
 export type HttpMethod = "get" | "post" | "put" | "patch" | "delete";
+
 export type UpdateStrategy<T> = "none" | "replace" | {
   optimisticUpdate?: (data: T) => T;
-  onFailure?: (error: FetchError) => void;
+  onFailure?: (error: Error) => void;
   replace?: boolean;
 };
 
-class FetchError extends Error {
-  constructor(public method: HttpMethod, public status: number, public message: string) {
-    super(message);
-  }
-}
-
 export const useData = <T = unknown>(): {
   data: T;
   isMutating?: HttpMethod;
   mutation: typeof mutation;
   reload: (signal?: AbortSignal) => Promise<void>;
 } => {
   const { dataUrl, dataCache } = useContext(DataContext);
-  const [data, setData] = useState(() => dataCache.get(dataUrl)?.data as T);
+  const [data, setData] = useState(() => {
+    const cached = dataCache.get(dataUrl);
+    if (cached) {
+      if (cached.error) {
+        throw cached.error;
+      }
+      return cached.data as T;
+    }
+    throw new Error("Data not found");
+  });
   const [isMutating, setIsMutating] = useState<HttpMethod>();
   const action = useCallback(async (method: HttpMethod, fetcher: Promise<Response>, update: UpdateStrategy<T>) => {
     const updateIsObject = update && typeof update === "object" && update !== null;
@@ -47,8 +52,7 @@ export const useData = <T = unknown>(): {
       if (optimistic && rollbackData !== undefined) {
         setData(rollbackData);
         if (update.onFailure) {
-          const error = new FetchError(method, res.status, res.statusText);
-          update.onFailure(error);
+          update.onFailure(await FetchError.fromResponse(res));
         }
       } else {
         setIsMutating(undefined);
@@ -76,12 +80,11 @@ export const useData = <T = unknown>(): {
         const dataCacheTtl = dataCache.get(dataUrl)?.dataCacheTtl;
         dataCache.set(dataUrl, { data, dataCacheTtl, dataExpires: Date.now() + (dataCacheTtl || 1) * 1000 });
         setData(data);
-      } catch (err) {
+      } catch (_) {
         if (optimistic && rollbackData !== undefined) {
           setData(rollbackData);
           if (update.onFailure) {
-            const error = new FetchError(method, res.status, err.message);
-            update.onFailure(error);
+            update.onFailure(new FetchError(500, {}, "Data must be valid JSON"));
           }
         } else {
           setIsMutating(undefined);
@@ -97,14 +100,14 @@ export const useData = <T = unknown>(): {
     try {
       const res = await fetch(dataUrl, { headers: { "Accept": "application/json" }, signal, redirect: "manual" });
       if (res.status >= 400) {
-        throw new FetchError("get", res.status, await res.text());
+        throw await FetchError.fromResponse(res);
       }
       if (res.status >= 300) {
         const redirectUrl = res.headers.get("Location");
         if (redirectUrl) {
           location.href = redirectUrl;
         }
-        return;
+        throw new FetchError(500, {}, "Missing the `Location` header");
       }
       if (res.ok) {
         const data = await res.json();
@@ -114,10 +117,10 @@ export const useData = <T = unknown>(): {
         dataCache.set(dataUrl, { data, dataExpires });
         setData(data);
       } else {
-        throw new FetchError("get", res.status, await res.text());
+        throw new FetchError(500, {}, "Data must be valid JSON");
       }
-    } catch (err) {
-      throw new FetchError("get", 0, err.message);
+    } catch (error) {
+      throw error;
     }
   }, [dataUrl]);
   const mutation = useMemo(() => {

framework/react/router.ts

@@ -1,8 +1,10 @@
 import type { FC, ReactElement, ReactNode } from "react";
-import { createElement, useCallback, useContext, useEffect, useMemo, useState } from "react";
-import { matchRoutes } from "../../lib/helpers.ts";
+import { Component, createElement, useContext, useEffect, useMemo, useState } from "react";
+import { FetchError } from "../../lib/helpers.ts";
+import type { Route, RouteMeta, RouteModule } from "../../lib/route.ts";
+import { matchRoutes } from "../../lib/route.ts";
 import { URLPatternCompat } from "../../lib/urlpattern.ts";
-import type { RenderModule, Route, RouteMeta, SSRContext } from "../../server/types.ts";
+import type { SSRContext } from "../../server/types.ts";
 import events from "../core/events.ts";
 import { redirect } from "../core/redirect.ts";
 import { DataContext, ForwardPropsContext, RouterContext } from "./context.ts";
@@ -13,22 +15,29 @@ export type RouterProps = {
 
 export const Router: FC<RouterProps> = ({ ssrContext }) => {
   const [url, setUrl] = useState(() => ssrContext?.url || new URL(window.location.href));
-  const [modules, setModules] = useState(() => ssrContext?.modules || loadSSRModulesFromTag());
+  const [modules, setModules] = useState(() => ssrContext?.routeModules || loadSSRModulesFromTag());
   const dataCache = useMemo(() => {
-    const cache = new Map<string, { data?: unknown; dataCacheTtl?: number; dataExpires?: number }>();
-    modules.forEach(({ url, data, dataCacheTtl }) => {
+    const cache = new Map<
+      string,
+      { error?: Error; data?: unknown; dataCacheTtl?: number; dataExpires?: number }
+    >();
+    modules.forEach(({ url, data, dataCacheTtl, error }) => {
       cache.set(url.pathname + url.search, {
+        error,
         data,
         dataCacheTtl,
         dataExpires: Date.now() + (dataCacheTtl || 1) * 1000,
       });
     });
     return cache;
   }, []);
-  const createDataDriver = useCallback((modules: RenderModule[]): ReactElement => {
+  const createRouteEl = (modules: RouteModule[]): ReactElement => {
+    const ErrorBoundaryHandler: undefined | FC<{ error: Error }> = ssrContext?.errorBoundaryModule?.defaultExport ||
+      // deno-lint-ignore no-explicit-any
+      (window as any).__ERROR_BOUNDARY_HANDLER;
     const currentModule = modules[0];
     const dataUrl = currentModule.url.pathname + currentModule.url.search;
-    return createElement(
+    const el = createElement(
       DataContext.Provider,
       {
         value: {
@@ -41,22 +50,22 @@ export const Router: FC<RouterProps> = ({ ssrContext }) => {
         ? createElement(
           currentModule.defaultExport as FC,
           null,
-          modules.length > 1 ? createDataDriver(modules.slice(1)) : undefined,
+          modules.length > 1 ? createRouteEl(modules.slice(1)) : undefined,
         )
         : createElement(Err, {
           status: 400,
           statusText: "missing default export as a valid React component",
         }),
     );
-  }, []);
-  const dataDirver = useMemo<ReactElement | null>(
+    if (ErrorBoundaryHandler) {
+      return createElement(ErrorBoundary, { Handler: ErrorBoundaryHandler }, el);
+    }
+    return el;
+  };
+  const routeEl = useMemo<ReactElement | null>(
     () =>
-      modules.length > 0
-        ? createDataDriver(modules)
-        : createElement(Err, { status: 404, statusText: "page not found" }),
-    [
-      modules,
-    ],
+      modules.length > 0 ? createRouteEl(modules) : createElement(Err, { status: 404, statusText: "page not found" }),
+    [modules],
   );
 
   useEffect(() => {
@@ -82,15 +91,23 @@ export const Router: FC<RouterProps> = ({ ssrContext }) => {
         return {};
       }
       if (res.status >= 400) {
-        const message = await res.text();
-        console.warn(`prefetchData: ${res.status} ${message}`);
+        const error = await FetchError.fromResponse(res);
+        dataCache.set(dataUrl, {
+          error,
+          dataExpires: Date.now() + 1000,
+        });
         return {};
       }
       if (res.status >= 300) {
         const redirectUrl = res.headers.get("Location");
         if (redirectUrl) {
           location.href = redirectUrl;
         }
+        const error = new FetchError(500, {}, "Missing the `Location` header");
+        dataCache.set(dataUrl, {
+          error,
+          dataExpires: Date.now() + 1000,
+        });
         return {};
       }
       const data = await res.json();
@@ -121,7 +138,7 @@ export const Router: FC<RouterProps> = ({ ssrContext }) => {
       const matches = matchRoutes(url, routes);
       const modules = await Promise.all(matches.map(async ([ret, meta]) => {
         const { filename } = meta;
-        const rmod: RenderModule = {
+        const rmod: RouteModule = {
           url: new URL(ret.pathname.input + url.search, url.href),
           filename,
         };
@@ -161,9 +178,28 @@ export const Router: FC<RouterProps> = ({ ssrContext }) => {
     };
   }, []);
 
-  return createElement(RouterContext.Provider, { value: { url } }, dataDirver);
+  return createElement(RouterContext.Provider, { value: { url } }, routeEl);
 };
 
+class ErrorBoundary extends Component<{ Handler: FC<{ error: Error }> }, { error: Error | null }> {
+  constructor(props: { Handler: FC<{ error: Error }> }) {
+    super(props);
+    this.state = { error: null };
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+
+  render() {
+    if (this.state.error) {
+      return createElement(this.props.Handler, { error: this.state.error });
+    }
+
+    return this.props.children;
+  }
+}
+
 function Err({ status, statusText }: { status: number; statusText: string }) {
   return createElement(
     "div",
@@ -218,7 +254,7 @@ function loadRoutesFromTag(): Route[] {
   return [];
 }
 
-function loadSSRModulesFromTag(): RenderModule[] {
+function loadSSRModulesFromTag(): RouteModule[] {
   const ROUTE_MODULES = getRouteModules();
   const el = window.document?.getElementById("ssr-modules");
   if (el) {

lib/helpers.ts

@@ -1,64 +1,30 @@
-import type { Route, RouteMeta } from "../server/types.ts";
-import { createStaticURLPatternResult, type URLPatternResult } from "./urlpattern.ts";
 import util from "./util.ts";
 
 export const builtinModuleExts = ["tsx", "ts", "mts", "jsx", "js", "mjs"];
 
-/** match routes against the given url */
-export function matchRoutes(url: URL, routes: Route[]): [ret: URLPatternResult, route: RouteMeta][] {
-  let { pathname } = url;
-  if (pathname !== "/") {
-    pathname = util.trimSuffix(url.pathname, "/");
+export class FetchError extends Error {
+  constructor(
+    public status: number,
+    public details: Record<string, unknown>,
+    message: string,
+    opts?: ErrorOptions,
+  ) {
+    super(message, opts);
   }
-  const matches: [ret: URLPatternResult, route: RouteMeta][] = [];
-  if (routes.length > 0) {
-    routes.forEach(([pattern, meta]) => {
-      const ret = pattern.exec({ host: url.host, pathname });
-      if (ret) {
-        matches.push([ret, meta]);
-        // find the nesting index of the route
-        if (meta.nesting && meta.pattern.pathname !== "/_app") {
-          for (const [p, m] of routes) {
-            const [_, name] = util.splitBy(m.pattern.pathname, "/", true);
-            if (!name.startsWith(":")) {
-              const ret = p.exec({ host: url.host, pathname: pathname + "/index" });
-              if (ret) {
-                matches.push([ret, m]);
-                break;
-              }
-            }
-          }
-        }
-      } else if (meta.nesting) {
-        const parts = util.splitPath(pathname);
-        for (let i = parts.length - 1; i > 0; i--) {
-          const pathname = "/" + parts.slice(0, i).join("/");
-          const ret = pattern.exec({ host: url.host, pathname });
-          if (ret) {
-            matches.push([ret, meta]);
-            break;
-          }
-        }
-      }
-    });
-    if (matches.filter(([_, meta]) => !meta.nesting).length === 0) {
-      for (const [_, meta] of routes) {
-        if (meta.pattern.pathname === "/_404") {
-          matches.push([createStaticURLPatternResult(url.host, "/_404"), meta]);
-          break;
-        }
-      }
-    }
-    if (matches.length > 0) {
-      for (const [_, meta] of routes) {
-        if (meta.pattern.pathname === "/_app") {
-          matches.unshift([createStaticURLPatternResult(url.host, "/_app"), meta]);
-          break;
-        }
+
+  static async fromResponse(res: Response): Promise<FetchError> {
+    let message = res.statusText;
+    let details: Record<string, unknown> = {};
+    if (res.headers.get("content-type")?.startsWith("application/json")) {
+      details = await res.json();
+      if (typeof details.message === "string") {
+        message = details.message;
       }
+    } else {
+      message = await res.text();
     }
+    return new FetchError(res.status, details, message);
   }
-  return matches;
 }
 
 /**