fix(runtime): add request info to HttpError

Author: ddadaal

.changeset/chilly-garlics-remain.md

@@ -0,0 +1,5 @@
+---
+"@ddadaal/next-typed-api-routes-runtime": patch
+---
+
+add request info to HttpError

example/src/pages/errors.ts

@@ -0,0 +1,3 @@
+import { type HttpError } from "@ddadaal/next-typed-api-routes-runtime";
+
+export const formatHttpErrors = (e: HttpError[]) => JSON.stringify(e);

example/src/pages/index.tsx

@@ -1,6 +1,8 @@
+import { failEvent, HttpError } from "@ddadaal/next-typed-api-routes-runtime/lib/client";
 import type { NextPage } from "next";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { api } from "src/apis/api";
+import { formatHttpErrors } from "src/pages/errors";
 
 export const ZodRouteTestDiv = () => {
 
@@ -93,6 +95,36 @@ export const AjvRouteTestDiv = () => {
   );
 };
 
+export const FailEventTestDiv = () => {
+
+  const [errors, setErrors] = useState<HttpError[]>([]);
+
+  useEffect(() => {
+    const handler = (e: HttpError) => {
+      setErrors((errors) => [...errors, e]);
+    };
+    failEvent.register(handler);
+    return () => failEvent.unregister(handler);
+  }, []);
+
+
+  return (
+    <div id="errors">
+      <button onClick={async () => {
+        await api.zodRoute({ body: { error: true }, query: { test: "123" } });
+      }}>
+        Call Error zodRoute
+      </button>
+      {errors.length > 0 ? (
+        <div>
+          {formatHttpErrors(errors)}
+        </div>
+      ) : undefined}
+    </div>
+  );
+
+};
+
 const Home: NextPage = () => {
 
 
@@ -108,6 +140,9 @@ const Home: NextPage = () => {
       <div>
         <TypeboxRouteTestDiv />
       </div>
+      <div>
+        <FailEventTestDiv />
+      </div>
     </div>
   );
 };

example/tests/apis.test.ts

@@ -1,4 +1,6 @@
+import { HttpError } from "@ddadaal/next-typed-api-routes-runtime";
 import { expect, test } from "@playwright/test";
+import { formatHttpErrors } from "src/pages/errors";
 
 import { api } from "../src/apis/api";
 
@@ -71,7 +73,7 @@ test("should call login", async () => {
 });
 
 test("should validate email", async () => {
-  const resp = await api.login({ query: { password: "123", username: "123" } }) 
+  const resp = await api.login({ query: { password: "123", username: "123" } })
     .httpError(400, (err: any) => {
       expect(err.code).toBe("QUERY_VALIDATION_ERROR");
       return err;
@@ -104,3 +106,20 @@ test("should handle error in browser", async ({ page }) => {
 
   expect(await text?.innerText()).toBe("401 NotExists");
 });
+
+test("should handle event", async ({ page }) => {
+  await page.goto("http://localhost:3000");
+
+  await page.click("#errors button");
+
+  const text = await page.waitForSelector("#errors > div");
+
+  expect(await text?.innerText()).toBe(formatHttpErrors([
+    new HttpError(404, { error: "123" }, JSON.stringify({ error: "123" }), {
+      method: "POST",
+      url: "/api/zodRoute/123",
+      body: { error: true },
+      query: {},
+    }),
+  ]));
+});

packages/runtime/src/fetch/HttpError.ts

@@ -1,19 +1,28 @@
+import { HttpMethod } from "./fetch";
+
 export const FETCH_ERROR = -2;
 export const TYPE_ERROR = -1;
 
+export interface OriginalRequest {
+  method: HttpMethod;
+  url: string;
+  query?: unknown;
+  body?: unknown;
+  headers?: Record<string, string>;
+}
+
 /** A unified class for all errors */
 export class HttpError<T = any> {
-  data: T;
-  status: number;
-  text?: string;
 
   /** A Server Error */
   get isFetchError() { return this.status === FETCH_ERROR; }
   get isTypeError() { return this.status === TYPE_ERROR; }
 
-  constructor(status: number, data: T, text?: string) {
-    this.data = data;
-    this.status = status;
-    this.text = text;
+  constructor(
+    public status: number,
+    public data: T,
+    public text?: string,
+    public request?: OriginalRequest,
+  ) {
   }
 }

packages/runtime/src/fetch/fetch.ts

@@ -1,7 +1,7 @@
 import type { Querystring } from "../types/request";
 import type { AnySchema, SuccessResponse } from "../types/schema";
 import { failEvent, finallyEvent, prefetchEvent, successEvent } from "./events";
-import { FETCH_ERROR, HttpError, TYPE_ERROR } from "./HttpError";
+import { FETCH_ERROR, HttpError, OriginalRequest, TYPE_ERROR } from "./HttpError";
 import { parseQueryToQuerystring } from "./parseQueryToQuerystring";
 
 function isServer() {
@@ -65,12 +65,15 @@ implements PromiseLike<SuccessResponse<T>> {
 
   private promise: Promise<Response>;
   private httpErrorHandler: Map<number, (error: any) => unknown>;
+  private request: OriginalRequest;
 
   constructor(
     promise: Promise<Response>,
+    request: OriginalRequest,
   ) {
     this.promise = promise;
     this.httpErrorHandler = new Map();
+    this.request = request;
   }
 
   then<TSuc = SuccessResponse<T>, TRej = never>(
@@ -93,8 +96,9 @@ implements PromiseLike<SuccessResponse<T>> {
             throw resp;
           }
         } else {
+
           const text = await resp.text();
-          const payload = new HttpError(resp.status, tryParseJson(text), text);
+          const payload = new HttpError(resp.status, tryParseJson(text), text, this.request);
 
           const handler = this.httpErrorHandler.get(resp.status);
 
@@ -119,10 +123,10 @@ implements PromiseLike<SuccessResponse<T>> {
         };
 
         if (r.name === "FetchError") {
-          const payload = new HttpError(FETCH_ERROR, r);
+          const payload = new HttpError(FETCH_ERROR, r, undefined, this.request);
           failEvent.execute(payload);
         } else if (r instanceof TypeError) {
-          const payload = new HttpError(TYPE_ERROR, r);
+          const payload = new HttpError(TYPE_ERROR, r, undefined, this.request);
           failEvent.execute(payload);
         }
 
@@ -192,7 +196,11 @@ export function jsonFetch<T extends AnySchema>(
     },
     body: isForm ? (info.body as any) : JSON.stringify(info.body),
     signal,
-  }));
+  }), {
+    method: info.method ?? "GET", url: info.url,
+    body: info.body, headers: info.headers,
+    query: info.query,
+  });
 }
 
 export type JsonFetch = typeof jsonFetch;