Deal with json parsing error

contiamo · Aug 24, 2018 · b8b800f · b8b800f
1 parent f800395
commit b8b800f
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 6 deletions.
diff --git a/src/Get.test.tsx b/src/Get.test.tsx
@@ -124,6 +124,30 @@ describe("Get", () => {
         message: "Failed to fetch: 401 Unauthorized",
       });
     });
+
+    it("should deal with non standard server error response (nginx style)", async () => {
+      nock("https://my-awesome-api.fake")
+        .get("/")
+        .reply(200, "<html>404 - this is not a json!</html>", { "content-type": "application/json" });
+
+      const children = jest.fn();
+      children.mockReturnValue(<div />);
+
+      render(
+        <RestfulProvider base="https://my-awesome-api.fake">
+          <Get path="">{children}</Get>
+        </RestfulProvider>,
+      );
+
+      await wait(() => expect(children.mock.calls.length).toBe(2));
+      expect(children.mock.calls[1][0]).toEqual(null);
+      expect(children.mock.calls[1][1].error).toEqual({
+        data:
+          "invalid json response body at https://my-awesome-api.fake reason: Unexpected token < in JSON at position 0",
+        message:
+          "Failed to fetch: 200 OK - invalid json response body at https://my-awesome-api.fake reason: Unexpected token < in JSON at position 0",
+      });
+    });
   });
 
   describe("with custom resolver", () => {

diff --git a/src/Get.tsx b/src/Get.tsx
@@ -171,12 +171,16 @@ class ContextlessGet<TData, TError> extends React.Component<
 
     const request = new Request(`${base}${requestPath || path || ""}`, this.getRequestOptions(thisRequestOptions));
     const response = await fetch(request);
-    const data = await processResponse(response);
+    let isError = false;
+    const data = await processResponse(response).catch(e => (isError = true && e.message));
 
-    if (!response.ok) {
+    if (!response.ok || isError) {
       this.setState({
         loading: false,
-        error: { message: `Failed to fetch: ${response.status} ${response.statusText}`, data },
+        error: {
+          message: `Failed to fetch: ${response.status} ${response.statusText}${isError ? " - " + data : ""}`,
+          data,
+        },
       });
       return null;
     }

diff --git a/src/Poll.tsx b/src/Poll.tsx
@@ -208,10 +208,11 @@ class ContextlessPoll<TData, TError> extends React.Component<
     });
 
     const response = await fetch(request);
-    const data = await processResponse(response);
+    let isError = false;
+    const data = await processResponse(response).catch(e => (isError = true && e.message));
 
-    if (!this.isResponseOk(response)) {
-      const error = { message: `${response.status} ${response.statusText}`, data };
+    if (!this.isResponseOk(response) || isError) {
+      const error = { message: `${response.status} ${response.statusText}${isError ? " - " + data : ""}`, data };
       this.setState({ loading: false, lastResponse: response, data, error });
       throw new Error(`Failed to Poll: ${error}`);
     }