Refactor error parsing to no longer include response on all errors

It only includes the response on errors when it can't parse the json. And
it includes the original response now, not a POJO.

Author: chadly

README.md

@@ -234,36 +234,6 @@ const MyBanana = ({ id, authToken = "mytoken" }) => {
 
 This will make a `GET` request adding an `Authorization` header with the value `Bearer mytoken`. `bearerToken` can also be a `Promise`, a `function`, or a `function` that returns a `Promise` (an `async function`) and the hook will wait for the `bearerToken` to resolve before making the request.
 
-## Utility Functions
-
-The package includes some other utility functions that can be used outside the context of a hook.
-
-### `checkStatus(response)`
-
-[Read here](https://github.com/github/fetch#handling-http-error-statuses) for the inspiration for this function. It will reject fetch requests on any non-2xx response. It differs from the example in that it will try to parse a JSON body from the non-200 response and will set any `message` field (if it exists) from the JSON body as the error message. The fetch hooks use this internally.
-
-```js
-import { checkStatus } from "react-fetch-hooks";
-
-//given a 400 Bad Request response with a JSON body of:
-//{ "message": "Invalid arguments. Try again.", "someOtherThing": 42 }
-
-fetch("/data", {
-	method: "GET",
-	headers: {
-		Accept: "application/json"
-	}
-})
-.then(checkStatus)
-.catch(err => {
-	console.log(err.message); //Invalid Arguments. Try again.
-	console.log(err.response.statusText); //Bad Request
-	console.log(err.response.jsonBody); //{ "message": "Invalid arguments. Try again.", "someOtherThing": 42 }
-});
-```
-
-It will try to look for a `message` field first, and then an `exceptionMessage` falling back to the `statusText` if neither one exist or if the response body is not JSON.
-
 ## Build/Run Locally
 
 After cloning this repo, run:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-fetch-hooks",
-  "version": "2.4.0",
+  "version": "3.0.0",
   "description": "A set of react hooks to work with the fetch API and gracefully parse & deal with HTTP errors",
   "keywords": [
     "react",

src/check-status.js

@@ -1,7 +1,7 @@
 import { useCallback } from "react";
-import checkStatus from "./check-status";
 import { isFunction } from "lodash";
 import pojoHeaders from "./pojo-headers";
+import extractErrorMessage from "./extract-error-message";
 
 const useFetchFn = ({
 	refreshInterval,
@@ -23,34 +23,40 @@ const useFetchFn = ({
 			}
 
 			async function doFetch() {
-				let _headers, _body, _status, _statusText;
+				let response, headers, body, status, statusText;
 
 				try {
 					const parsedOpts = await prepareHeaders(opts, reqBody);
 
-					let _response = await fetch(url, parsedOpts);
-					_headers = pojoHeaders(_response.headers);
-					_status = _response.status;
-					_statusText = _response.statusText;
-
-					_response = await checkStatus(_response);
-
-					if (_status != 204) {
-						_body = await _response.json();
+					response = await fetch(url, parsedOpts);
+
+					headers = pojoHeaders(response.headers);
+					status = response.status;
+					statusText = response.statusText;
+
+					const isSuccessful = response.status >= 200 && response.status < 300;
+
+					if (isSuccessful) {
+						if (status != 204) {
+							body = await response.json();
+						} else {
+							// for 204 No Content, just return null data
+							body = null;
+						}
+
+						onFetchResults({
+							body: body,
+							headers: headers,
+							status: status,
+							statusText: statusText,
+							timer: resetDelay || refreshInterval
+						});
 					} else {
-						// for 204 No Content, just return null data
-						_body = null;
+						const parsedResult = await parseJSONError(response);
+						onFetchFail({ ...parsedResult, headers, status, statusText });
 					}
-
-					onFetchResults({
-						body: _body,
-						headers: _headers,
-						status: _status,
-						statusText: _statusText,
-						timer: resetDelay || refreshInterval
-					});
 				} catch (ex) {
-					onFetchFail(ex);
+					onFetchFail({ error: ex, body, headers, status, statusText });
 				}
 			}
 		},
@@ -59,6 +65,32 @@ const useFetchFn = ({
 		[refreshInterval, resetDelay, url, JSON.stringify(opts)] // eslint-disable-line react-hooks/exhaustive-deps
 	);
 
+async function parseJSONError(response) {
+	let body;
+
+	try {
+		body = await response.json();
+	} catch {
+		// there was an error trying to parse the JSON body (maybe it's not JSON?)
+		// just ignore it and return an error with the original response without a parsed body
+		let error = new Error(
+			response.statusText ||
+				`Request failed with status code ${response.status}`
+		);
+
+		error.response = response;
+		return { error };
+	}
+
+	let msg = extractErrorMessage(body);
+	if (!msg) msg = response.statusText;
+
+	let error = new Error(msg);
+	error.response = response;
+
+	return { error, body };
+}
+
 async function prepareHeaders(itemToFetch, reqBody) {
 	let { bearerToken, ...opts } = itemToFetch || {};
 

src/fetch-fn.js

@@ -1,4 +1,3 @@
-export checkStatus from "./check-status";
 export useFetch from "./use-fetch";
 export useLazyFetch from "./lazy-fetch";
 export extractErrorMessage from "./extract-error-message";

src/index.js

@@ -51,11 +51,11 @@ const useRequestInitialState = () => {
 					return {
 						...state,
 						isFetching: false,
-						error: action.payload,
-						headers: action.payload?.response?.headers,
-						body: action.payload?.response?.body,
-						status: action.payload?.response?.status,
-						statusText: action.payload?.response?.statusText
+						error: action.payload.error,
+						headers: action.payload.headers,
+						body: action.payload.body,
+						status: action.payload.status,
+						statusText: action.payload.statusText
 					};
 
 				case "reset":