Merge pull request #22 from ilyalesik/improve-fetch-error

Improving useFetch error

Author: ilyalesik

README.md

@@ -6,7 +6,7 @@
 
 React hook for conveniently use Fetch API.
 
-* **Tiny** (408 B). Calculated by [size-limit](https://github.com/ai/size-limit)
+* **Tiny** (556 B). Calculated by [size-limit](https://github.com/ai/size-limit)
 * Both **Flow** and **TypeScript** types included
 
 ```javascript
@@ -54,6 +54,30 @@ const { isLoading, data } = useFetch("https://swapi.co/api/people/1", {
 
 ```
 
+### Error handling
+
+The `useFetch` hook returns an `error` field at any fetch exception. 
+The `error` field extends [Error](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error)
+and has `status` and `statusText` fields equal to [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response).
+
+```javascript
+...
+
+const Component = () => {
+  const { isLoading, data, error } = useFetch("https://swapi.co/api/people/1");
+
+  if (error) {
+    return <div>
+      <p>Code: ${error.status}</p>
+      <p>Message: ${error.statusText}</p>
+    </div>
+  }
+ 
+  ...
+};
+
+```
+ 
 ### Multiple requests
 Multiple `useFetch` in the same file/component supported:
 

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
     }