Make sure useFetch rejects with an Error type. (#114)

* Make sure useFetch rejects with an Error type.

Previously, a non-ok http response would reject with the response
object. It's better for rejections to be of type Error so that the
full stack trace information is available; plus, the TypeScript type
definition assumes that the error object is always instanceof Error.

Instead, failed responses reject with a FetchError, with the
underlying Response object available as error.response.

This is a backward-incompatible change: users who expected `error` to
be of type Response now have to refer to `error.response` instead.

* FetchError: add status code to the error message.

* Define FetchError as a class, not just an interface.

This is necessary for TypeScript code to be permitted to use
FetchError as a value at runtime, e.g. to perform an `instanceof
FetchError` check.

Author: artdent

packages/react-async/src/index.d.ts

@@ -234,4 +234,8 @@ type FetchRun<T> = {
   run(): void
 }
 
+export class FetchError extends Error {
+  response: Response
+}
+
 export default Async

packages/react-async/src/index.js

@@ -1,6 +1,6 @@
 import Async from "./Async"
 export { default as Async, createInstance } from "./Async"
-export { default as useAsync, useFetch } from "./useAsync"
+export { default as useAsync, useFetch, FetchError } from "./useAsync"
 export default Async
 export { statusTypes } from "./status"
 export { default as globalScope } from "./globalScope"

packages/react-async/src/useAsync.js

@@ -154,8 +154,15 @@ const useAsync = (arg1, arg2) => {
   )
 }
 
+export class FetchError extends Error {
+  constructor(response) {
+    super(`${response.status} ${response.statusText}`)
+    this.response = response
+  }
+}
+
 const parseResponse = (accept, json) => res => {
-  if (!res.ok) return Promise.reject(res)
+  if (!res.ok) return Promise.reject(new FetchError(res))
   if (typeof json === "boolean") return json ? res.json() : res
   return accept === "application/json" ? res.json() : res
 }

packages/react-async/src/useAsync.spec.js

@@ -3,7 +3,7 @@
 import "@testing-library/jest-dom/extend-expect"
 import React from "react"
 import { render, fireEvent, cleanup } from "@testing-library/react"
-import { useAsync, useFetch, globalScope } from "./index"
+import { useAsync, useFetch, globalScope, FetchError } from "./index"
 import {
   sleep,
   resolveTo,
@@ -20,11 +20,11 @@ const abortCtrl = { abort: jest.fn(), signal: "SIGNAL" }
 globalScope.AbortController = jest.fn(() => abortCtrl)
 
 const json = jest.fn(() => ({}))
-globalScope.fetch = jest.fn(() => Promise.resolve({ ok: true, json }))
+globalScope.fetch = jest.fn()
 
 beforeEach(abortCtrl.abort.mockClear)
-beforeEach(globalScope.fetch.mockClear)
 beforeEach(json.mockClear)
+beforeEach(() => globalScope.fetch.mockReset().mockResolvedValue({ ok: true, json }))
 afterEach(cleanup)
 
 const Async = ({ children = () => null, ...props }) => children(useAsync(props))
@@ -250,4 +250,20 @@ describe("useFetch", () => {
       expect.objectContaining({ preventDefault: expect.any(Function) })
     )
   })
+
+  test("throws a FetchError for failed requests", async () => {
+    const errorResponse = { ok: false, status: 400, statusText: "Bad Request", json }
+    globalScope.fetch.mockResolvedValue(errorResponse)
+    const onResolve = jest.fn()
+    const onReject = jest.fn()
+    render(<Fetch input="/test" options={{ onResolve, onReject }} />)
+    expect(globalScope.fetch).toHaveBeenCalled()
+    await sleep(10)
+    expect(onResolve).not.toHaveBeenCalled()
+    expect(onReject).toHaveBeenCalled()
+    let [err] = onReject.mock.calls[0]
+    expect(err).toBeInstanceOf(FetchError)
+    expect(err.message).toEqual("400 Bad Request")
+    expect(err.response).toBe(errorResponse)
+  })
 })