Improve fetch error

Author: ilyalesik

examples/basic/index.js

@@ -4,9 +4,9 @@ import useFetch from "../../index";
 
 
 const App = () => {
-    const {isLoading, data} = useFetch(`https://swapi.co/api/people/1`);
+    const {isLoading, data, error} = useFetch(`https://swapi.co/api/people/1`);
 
-    console.log(isLoading, data);
+    console.log(isLoading, data, error && error.status);
 
     return <div>
         <p>isLoading: {isLoading && "true" || "false"}</p>

index.d.ts

@@ -1,9 +1,14 @@
 
 declare namespace useFetch {
+    export interface UseFetchError extends Error {
+        status: number,
+        statusText: string
+    }
+
     export interface FetchResult<T> {
         data?: T,
         isLoading: boolean,
-        error?: any
+        error?: UseFetchError
     }
 
     export interface HookOptions extends RequestInit {

index.js

@@ -1,5 +1,28 @@
 var usePromise = require('./usePromise')
 
+function UseFetchError (status, statusText, message, fileName, lineNumber) {
+  var instance = new Error(message, fileName, lineNumber)
+  instance.name = 'UseFetchError'
+  instance.status = status
+  instance.statusText = statusText
+  Object.setPrototypeOf(instance, Object.getPrototypeOf(this))
+  if (Error.captureStackTrace) {
+    Error.captureStackTrace(instance, UseFetchError)
+  }
+  return instance
+}
+
+UseFetchError.prototype = Object.create(Error.prototype, {
+  constructor: {
+    value: Error,
+    enumerable: false,
+    writable: true,
+    configurable: true
+  }
+})
+
+Object.setPrototypeOf(UseFetchError, Error)
+
 function useFetch (
   path,
   options,
@@ -11,7 +34,13 @@ function useFetch (
   return usePromise(!blocked && function (p, o, s) {
     return fetch(p, o)
       .then((s && s.formatter) || (o && o.formatter) || function (response) {
-        if (!response.ok) throw Error(response.statusText)
+        if (!response.ok) {
+          throw new UseFetchError(
+            response.status,
+            response.statusText,
+            'Fetch error'
+          )
+        }
         return response.json()
       })
   },

index.js.flow

@@ -3,7 +3,10 @@
 type TUseFetchResult<T> = {
   data: ?T,
   isLoading: boolean,
-  error: mixed,
+  error?: Error & {
+      status: number,
+      statusText: string
+  }
 };
 declare function useFetch<T>(path: RequestInfo, options?: { ...RequestOptions,
   formatter?: (Response) => Promise<T>,

package.json

@@ -30,7 +30,7 @@
       "ignore": [
         "react"
       ],
-      "limit": "408 B",
+      "limit": "556 B",
       "path": "index.js",
       "running": false
     }