Fix typing, api error handling, and update tests

src/App/components/Loading/Loading.test.tsx

@@ -19,9 +19,9 @@ describe('Loading', () => {
   });
 
   test('Displays given error', () => {
-    const message = 'given error';
+    const error = { name: 'HttpError', message: 'given error', status: 0 };
     render(
-      <Loading status="error" error={{ message }}>
+      <Loading status="error" error={error}>
         {children}
       </Loading>,
     );

src/App/components/Loading/Loading.tsx

@@ -1,10 +1,10 @@
 import { FC, ReactNode } from 'react';
 import Info from '../Info';
-import type { Status, Error } from '@/types';
+import type { Status, HttpError } from '@/types';
 
 interface LoadingProps {
   status: Status;
-  error: Error | null;
+  error: HttpError | null;
   children: ReactNode;
 }
 

src/App/components/Post/useData.ts

@@ -1,12 +1,12 @@
 import { useQuery } from '@tanstack/react-query';
 import { getJson } from '@/api';
-import type { PostData } from '@/types';
+import type { PostData, HttpError } from '@/types';
 
 const fetchPostById = async (id: number) =>
   await getJson<PostData>(`posts/${id}`);
 
 const useData = (postId: number) =>
-  useQuery<PostData, Error>(['post', postId], () => fetchPostById(postId), {
+  useQuery<PostData, HttpError>(['post', postId], () => fetchPostById(postId), {
     enabled: !!postId,
   });
 

src/App/components/Posts/Posts.tsx

@@ -5,6 +5,7 @@ import css from './Posts.module.css';
 import Info from '../Info';
 import Loading from '../Loading';
 import useData from './useData';
+import { PostData } from '@/types';
 
 interface PostsProps {
   setPostId: (id: number | null) => void;
@@ -25,7 +26,7 @@ const Posts: FC<PostsProps> = ({ setPostId }) => {
             Background Updating
           </Info>
           <ul className={css.list}>
-            {data.map(({ id, title }) => (
+            {data.map(({ id, title }: PostData) => (
               <li key={id}>
                 <a
                   href="#"

src/App/components/Posts/useData.ts

@@ -1,9 +1,9 @@
 import { useQuery } from '@tanstack/react-query';
 import type { PostData } from '@/types';
-import { getJson } from '@/api';
+import { getJson, HttpError } from '@/api';
 
 const useData = () =>
-  useQuery<PostData[], Error>(['posts'], async () =>
+  useQuery<PostData[], HttpError, PostData[]>(['posts'], async () =>
     getJson<PostData[]>('posts'),
   );
 

src/api/HttpError.ts

@@ -0,0 +1,43 @@
+const getErrorMessage = (response?: Response): string => {
+  const fallbackMsg = 'an unknown error';
+
+  if (!response) {
+    return fallbackMsg;
+  }
+
+  const code = typeof response.status === 'number' ? response.status : '';
+  const status = `${code} ${response.statusText || ''}`.trim();
+  return status ? `status code ${status}` : fallbackMsg;
+};
+
+interface ErrorOptions {
+  /**
+   * Expect cause to be an Error instance
+   */
+  cause: Error;
+}
+
+/**
+ * HttpError provides a single error class to handle all failure responses
+ * from the fetch request.
+ */
+class HttpError extends Error {
+  public status: number | undefined;
+
+  constructor(response?: Response, options?: ErrorOptions) {
+    let errorMsg = 'an unknown error';
+
+    if (options?.cause.name === 'SyntaxError') {
+      errorMsg = 'an invalid json response';
+    } else {
+      errorMsg = getErrorMessage(response);
+    }
+
+    super(`Request failed with ${errorMsg}`, options);
+
+    this.name = 'HttpError';
+    this.status = response?.status;
+  }
+}
+
+export default HttpError;

src/api/api.ts

@@ -1,8 +1,6 @@
+import HttpError from './HttpError';
+
 export const API_ROOT = 'https://jsonplaceholder.typicode.com/';
-export type HttpError = Partial<Response> & {
-  status: number;
-  statusText: string;
-};
 
 type FetchArgs = Parameters<typeof globalThis.fetch>;
 
@@ -12,7 +10,7 @@ type FetchArgs = Parameters<typeof globalThis.fetch>;
 export const fetch = async <RData = unknown>(
   input: FetchArgs[0],
   init: FetchArgs[1] = {},
-) => {
+): Promise<RData> => {
   const initWithDefaults = {
     ...init,
 
@@ -26,18 +24,15 @@ export const fetch = async <RData = unknown>(
     res = await globalThis.fetch(input, initWithDefaults);
     resJson = (await res.json()) as RData;
   } catch (err: unknown) {
-    const status = 0;
-    const statusText: string =
-      (err as Error)?.message || 'Failed to fetch (unknown error)';
-    return Promise.reject<HttpError>({ status, statusText });
+    throw new HttpError(undefined, { cause: err as Error });
   }
 
   if (res.ok) {
     return resJson;
   } else {
-    return Promise.reject<HttpError>(res);
+    throw new HttpError(res);
   }
 };
 
-export const getJson = <RData = unknown>(path: string) =>
+export const getJson = <RData = unknown>(path: string): Promise<RData> =>
   fetch<RData>(`${API_ROOT}${path}`);

src/api/index.ts

@@ -1 +1,2 @@
-export { API_ROOT, fetch, getJson, type HttpError } from './api';
+export { API_ROOT, fetch, getJson } from './api';
+export { default as HttpError } from './HttpError';

src/types.ts

@@ -1,4 +1,5 @@
 import { UseQueryResult } from '@tanstack/react-query';
+export type { HttpError } from '@/api';
 
 export type Status = UseQueryResult['status'];
 
@@ -7,7 +8,3 @@ export interface PostData {
   title: string;
   body: string;
 }
-
-export type Error = {
-  message: string;
-};