When Non-OK Response Received from fetch, throw an error including the response

AUTHORS

@@ -12,6 +12,7 @@ David Glasser <glasser@meteor.com>
 Dominic Watson <intellix@gmail.com>
 Dhaivat Pandya <dhaivat@meteor.com>
 Dhaivat Pandya <dhaivatpandya@gmail.com>
+Doug Swain <pseudoramble@gmail.com>
 Google Inc.
 Ian Grayson <ian133@gmail.com>
 Ian MacLeod <ian@nevir.net>

CHANGELOG.md

@@ -12,6 +12,7 @@ Expect active development and potentially significant breaking changes in the `0
 - expose partial in ObservableQuery#currentResult [PR #1097](https://github.com/apollostack/apollo-client/pull/1097)
 - Calculate `loading` from `networkStatus`. [PR #1202](https://github.com/apollostack/apollo-client/pull/1202)
 - Fix typings error with `strictNullChecks` [PR #1188](https://github.com/apollostack/apollo-client/pull/1188)
+- Add IResponse to NetworkErrors [PR #1199](https://github.com/apollostack/apollo-client/issues/1199)
 - Gracefully handle `null` GraphQL errors. [PR #1208](https://github.com/apollostack/apollo-client/pull/1208)
 - *Breaking:* Remove undocumented `resultBehaviors` feature. [PR #1173](https://github.com/apollostack/apollo-client/pull/1173)
 

src/errors/HttpNetworkError.ts

@@ -0,0 +1,26 @@
+export interface Response {
+  status: number;
+  statusText?: string;
+}
+
+export default class HttpNetworkError extends Error {
+  public readonly response: Response;
+  public readonly request: any;
+  public readonly message: string;
+
+  constructor({
+    response,
+    request = {},
+    message,
+  }: {
+    response: Response,
+    request?: any,
+    message?: string,
+  }) {
+    const defaultMessage = `Network request failed with status ${response.status} - "${response.statusText}"`;
+    super(message || defaultMessage);
+
+    this.response = response;
+    this.request = request;
+  }
+}

src/transport/batchedNetworkInterface.ts

@@ -16,6 +16,8 @@ import {
   QueryBatcher,
 } from './batching';
 
+import HttpNetworkError from '../errors/HttpNetworkError';
+
 import { assign } from '../util/assign';
 
 // An implementation of the network interface that operates over HTTP and batches
@@ -64,12 +66,19 @@ export class HTTPBatchedNetworkInterface extends HTTPFetchNetworkInterface {
       Promise.all(middlewarePromises).then((requestsAndOptions: RequestAndOptions[]) => {
         return this.batchedFetchFromRemoteEndpoint(requestsAndOptions)
           .then(result => {
+            const httpResponse = result as IResponse;
+
+            if (!httpResponse.ok) {
+              throw new HttpNetworkError({
+                request: requestsAndOptions,
+                response: httpResponse,
+              });
+            }
+
             // XXX can we be stricter with the type here?
             return result.json() as any;
           })
           .then(responses => {
-
-
             if (typeof responses.map !== 'function') {
               throw new Error('BatchingNetworkInterface: server response is not an array');
             }

src/transport/networkInterface.ts

@@ -10,6 +10,8 @@ import { print } from 'graphql-tag/printer';
 import { MiddlewareInterface } from './middleware';
 import { AfterwareInterface } from './afterware';
 
+import HttpNetworkError from '../errors/HttpNetworkError';
+
 /**
  * This is an interface that describes an GraphQL document to be sent
  * to the server.
@@ -181,7 +183,18 @@ export class HTTPFetchNetworkInterface implements NetworkInterface {
         response: response as IResponse,
         options,
       }))
-      .then(({ response }) => (response as IResponse).json())
+      .then(({ response }) => {
+        const httpResponse = response as IResponse;
+
+        if (!httpResponse.ok) {
+          throw new HttpNetworkError({
+            request,
+            response: httpResponse,
+          });
+        }
+
+        return httpResponse.json();
+      })
       .then((payload: ExecutionResult) => {
         if (!payload.hasOwnProperty('data') && !payload.hasOwnProperty('errors')) {
           throw new Error(

test/batchedNetworkInterface.ts

@@ -159,6 +159,25 @@ describe('HTTPBatchedNetworkInterface', () => {
       });
     });
 
+    it('should throw an HttpNetworkError when a non-200 response is received', (done) => {
+      const fakeForbiddenResponse = createMockedIResponse([], { status: 401, statusText: 'Unauthorized'});
+      const fetchFunc = () => Promise.resolve(fakeForbiddenResponse);
+
+      assertRoundtrip({
+        requestResultPairs: [{
+          request: { query: authorQuery },
+          result: authorResult,
+        }],
+        fetchFunc,
+      }).then(() => {
+        done(new Error('An HttpNetworkError should have been thrown'));
+      }).catch(err => {
+        assert.strictEqual(err.response, fakeForbiddenResponse, 'Incorrect response provided');
+        assert.equal(err.message, 'Network request failed with status 401 - "Unauthorized"', 'Incorrect message generated');
+        done();
+      });
+    });
+
     it('should return errors thrown by middleware', (done) => {
       const err = new Error('Error of some kind thrown by middleware.');
       const errorMiddleware: MiddlewareInterface = {

test/errors.ts

@@ -1,5 +1,8 @@
 import { assert } from 'chai';
 import { ApolloError } from '../src/errors/ApolloError';
+import HttpNetworkError from '../src/errors/HttpNetworkError';
+
+import { createMockedIResponse } from './mocks/mockFetch';
 
 describe('ApolloError', () => {
   it('should construct itself correctly', () => {
@@ -79,3 +82,31 @@ describe('ApolloError', () => {
     assert(apolloError.stack, 'Does not contain a stack trace.');
   });
 });
+
+describe('HttpNetworkError', () => {
+  it('should provide the given response back to the user', () => {
+    const response = createMockedIResponse({}, { status: 401, statusText: 'Unauthorized' });
+
+    const err = new HttpNetworkError({ response });
+
+    assert.deepEqual(err.response, response);
+  });
+
+  it('should provide default values for the request and message', () => {
+    const response = createMockedIResponse({}, { status: 403, statusText: 'Forbidden' });
+    const err = new HttpNetworkError({ response });
+
+    assert.isOk(err.message);
+    assert.isObject(err.request);
+  });
+
+  it('should accept a request and message if provided', () => {
+    const response = createMockedIResponse({}, { status: 403, statusText: 'Forbidden' });
+    const request = { name: 'Sample Request' };
+    const message = 'a test message';
+    const err = new HttpNetworkError({ response, request, message });
+
+    assert.equal(err.message, message);
+    assert.deepEqual(err.request, request);
+  });
+});

test/mocks/mockFetch.ts

@@ -4,6 +4,9 @@ import 'whatwg-fetch';
 // structure to the MockedNetworkInterface.
 
 export interface MockedIResponse {
+  ok: boolean;
+  status: number;
+  statusText?: string;
   json(): Promise<JSON>;
 }
 
@@ -14,8 +17,14 @@ export interface MockedFetchResponse {
   delay?: number;
 }
 
-export function createMockedIResponse(result: Object): MockedIResponse {
+export function createMockedIResponse(result: Object, options?: any): MockedIResponse {
+  const status = options && options.status || 200;
+  const statusText = options && options.statusText || undefined;
+
   return {
+    ok: status === 200,
+    status,
+    statusText,
     json() {
       return Promise.resolve(result);
     },

test/networkInterface.ts

@@ -33,6 +33,9 @@ describe('network interface', () => {
   const swapiUrl = 'http://graphql-swapi.test/';
   const missingUrl = 'http://does-not-exist.test/';
 
+  const unauthorizedUrl = 'http://unauthorized.test/';
+  const serviceUnavailableUrl = 'http://service-unavailable.test/';
+
   const simpleQueryWithNoVars = gql`
     query people {
       allPeople(first: 1) {
@@ -129,6 +132,9 @@ describe('network interface', () => {
     fetchMock.post(missingUrl, () => {
       throw new Error('Network error');
     });
+
+    fetchMock.post(unauthorizedUrl, 403);
+    fetchMock.post(serviceUnavailableUrl, 503);
   });
 
   after(() => {
@@ -428,6 +434,13 @@ describe('network interface', () => {
   });
 
   describe('making a request', () => {
+    // this is a stub for the end user client api
+    const doomedToFail = {
+      query: simpleQueryWithNoVars,
+      variables: {},
+      debugName: 'People Query',
+    };
+
     it('should fetch remote data', () => {
       const swapi = createNetworkInterface({ uri: swapiUrl });
 
@@ -447,15 +460,28 @@ describe('network interface', () => {
     it('should throw on a network error', () => {
       const nowhere = createNetworkInterface({ uri: missingUrl });
 
-      // this is a stub for the end user client api
-      const doomedToFail = {
-        query: simpleQueryWithNoVars,
-        variables: {},
-        debugName: 'People Query',
-      };
-
       return assert.isRejected(nowhere.query(doomedToFail));
     });
+
+    it('should throw an HttpNetworkError when forbidden', () => {
+      const unauthorizedInterface = createNetworkInterface({ uri: unauthorizedUrl });
+
+      return unauthorizedInterface.query(doomedToFail).catch(err => {
+        assert.isOk(err.response);
+        assert.equal(err.response.status, 403);
+        assert.equal(err.message, 'Network request failed with status 403 - "Forbidden"');
+      });
+    });
+
+    it('should throw an HttpNetworkError when service is unavailable', () => {
+      const unauthorizedInterface = createNetworkInterface({ uri: serviceUnavailableUrl });
+
+      return unauthorizedInterface.query(doomedToFail).catch(err => {
+        assert.isOk(err.response);
+        assert.equal(err.response.status, 503);
+        assert.equal(err.message, 'Network request failed with status 503 - "Service Unavailable"');
+      });
+    });
   });
 });