Use ErrorResponse (#69)

Author: KyleJune

README.md

@@ -1,7 +1,7 @@
 # Udibo React App
 
-[![release](https://img.shields.io/badge/release-0.14.0-success)](https://github.com/udibo/react_app/releases/tag/0.14.0)
-[![deno doc](https://doc.deno.land/badge.svg)](https://deno.land/x/udibo_react_app@0.14.0)
+[![release](https://img.shields.io/badge/release-0.15.0-success)](https://github.com/udibo/react_app/releases/tag/0.15.0)
+[![deno doc](https://doc.deno.land/badge.svg)](https://deno.land/x/udibo_react_app@0.15.0)
 [![CI/CD](https://github.com/udibo/react_app/actions/workflows/main.yml/badge.svg)](https://github.com/udibo/react_app/actions/workflows/main.yml)
 [![codecov](https://codecov.io/gh/udibo/react_app/branch/main/graph/badge.svg?token=G5XCR01X8E)](https://codecov.io/gh/udibo/react_app)
 [![license](https://img.shields.io/github/license/udibo/react_app)](https://github.com/udibo/react_app/blob/main/LICENSE)
@@ -31,13 +31,13 @@ Apps are created using [React Router](https://reactrouter.com),
 
 This module has 2 entry points.
 
-- [mod.tsx](https://deno.land/x/udibo_react_app@0.14.0/mod.tsx): For use in code
+- [mod.tsx](https://deno.land/x/udibo_react_app@0.15.0/mod.tsx): For use in code
   that will be used both on the server and in the browser.
-- [server.tsx](https://deno.land/x/udibo_react_app@0.14.0/server.tsx): For use
+- [server.tsx](https://deno.land/x/udibo_react_app@0.15.0/server.tsx): For use
   in code that will only be used on the server.
 
 You can look at the [examples](#examples) and
-[deno docs](https://deno.land/x/udibo_react_app@0.14.0) to learn more about
+[deno docs](https://deno.land/x/udibo_react_app@0.15.0) to learn more about
 usage.
 
 ### Examples

deno.lock

@@ -1,4 +1,10 @@
-import { HttpError, HttpErrorOptions, isHttpError } from "x/http_error/mod.ts";
+import {
+  ErrorResponse,
+  HttpError,
+  HttpErrorOptions,
+  isErrorResponse,
+  isHttpError,
+} from "x/http_error/mod.ts";
 import {
   ComponentType,
   createContext,
@@ -19,7 +25,7 @@ import type {
 
 import { isDevelopment } from "./env.ts";
 
-export { HttpError, isHttpError };
+export { ErrorResponse, HttpError, isErrorResponse, isHttpError };
 export type { ErrorBoundaryProps, FallbackProps, HttpErrorOptions };
 
 /**

error.tsx

@@ -5,7 +5,7 @@
     "x/oak/": "https://deno.land/x/oak@v12.5.0/",
     "x/esbuild/": "https://deno.land/x/esbuild@v0.15.10/",
     "x/esbuild_deno_loader/": "https://deno.land/x/esbuild_deno_loader@0.6.0/",
-    "x/http_error/": "https://deno.land/x/http_error@0.5.0/",
+    "x/http_error/": "https://deno.land/x/http_error@0.6.0/",
     "npm/react": "https://esm.sh/react@18.2.0?target=deno&pin=v126",
     "npm/react/jsx-runtime": "https://esm.sh/react@18.2.0/jsx-runtime?target=deno&pin=v126",
     "npm/react/jsx-dev-runtime": "https://esm.sh/react@18.2.0/jsx-dev-runtime?target=deno&pin=v126",

example/deno.lock

@@ -7,6 +7,7 @@ import {
 
 import { AppContext } from "../context.ts";
 import { Post } from "../models/posts.ts";
+import { ErrorResponse, isErrorResponse } from "../../error.tsx";
 
 const parseResponse = async (response: Response) => {
   let data;
@@ -15,7 +16,10 @@ const parseResponse = async (response: Response) => {
   } catch (e) {
     throw new HttpError(response.status, "Invalid response");
   }
-  if (response.status !== 200) throw data;
+  if (isErrorResponse(data)) throw ErrorResponse.toError(data);
+  if (response.status >= 400) {
+    throw new HttpError(response.status, "Invalid response");
+  }
   return data;
 };
 
@@ -39,10 +43,7 @@ export function getPosts() {
         })
         .catch((error: unknown) => {
           setPosts(null);
-          const options = error && typeof error === "object"
-            ? error as HttpErrorOptions
-            : {};
-          setError(new HttpError(options));
+          setError(HttpError.from(error));
         });
     }
   }, []);
@@ -68,10 +69,7 @@ export function getPost(id: number) {
         })
         .catch((error: unknown) => {
           setPost(null);
-          const options = error && typeof error === "object"
-            ? error as HttpErrorOptions
-            : {};
-          setError(new HttpError(options));
+          setError(HttpError.from(error));
         });
     }
   }, []);

example/import_map.json

@@ -5,7 +5,7 @@
     "x/oak/": "https://deno.land/x/oak@v12.5.0/",
     "x/esbuild/": "https://deno.land/x/esbuild@v0.15.10/",
     "x/esbuild_deno_loader/": "https://deno.land/x/esbuild_deno_loader@0.6.0/",
-    "x/http_error/": "https://deno.land/x/http_error@0.5.0/",
+    "x/http_error/": "https://deno.land/x/http_error@0.6.0/",
     "npm/react": "https://esm.sh/react@18.2.0?target=deno&pin=v126",
     "npm/react/jsx-runtime": "https://esm.sh/react@18.2.0/jsx-runtime?target=deno&pin=v126",
     "npm/react/jsx-dev-runtime": "https://esm.sh/react@18.2.0/jsx-dev-runtime?target=deno&pin=v126",

example/services/posts.tsx

@@ -36,7 +36,9 @@ import {
 export {
   AppErrorBoundary,
   DefaultErrorFallback,
+  ErrorResponse,
   HttpError,
+  isErrorResponse,
   isHttpError,
   NotFound,
   useAutoReset,

import_map.json

@@ -24,7 +24,12 @@ import {
 } from "npm/react-router-dom";
 import serialize from "npm/serialize-javascript";
 
-import { AppErrorContext, HttpError, isHttpError } from "./error.tsx";
+import {
+  AppErrorContext,
+  ErrorResponse,
+  HttpError,
+  isHttpError,
+} from "./error.tsx";
 import {
   AppEnvironment,
   createAppContext,
@@ -576,7 +581,7 @@ export function generateRouter(
         response.status = error.status;
         const extname = path.extname(request.url.pathname);
         if (error.status !== 404 || extname === "") {
-          response.body = HttpError.json(error);
+          response.body = new ErrorResponse(error);
         }
       }
     });