Several error reporting issues

[dahjelle]

I think there may be several issues here; this is prompted from a discussion with @Poincare in Slack These may be separate issues; let me know if you'd prefer separate open issues for each.

Issues

1. render error reported as a networkError
2. ApolloError object does not include stack traces
3. crashReporter from store.ts not included in client.middleware()

Background

I'm using react-apollo and apollo-client with an existing Redux store, and had a situation where a Component (hooked up using connect) was throwing an error because I was trying to access a property of undefined (See line 39 below.) While this is a reduced example, trying to track down the actual error in my app was fairly difficult.

1) render error

The code below will report the 'cannot read property' error as a networkError(!) property of the ApolloError object, even though the error is in a render method. I'm not sure why that would be.

2) No stack trace on ApolloError

The ApolloError object itself doesn't have a stack trace—I have to go into the networkError property directly to access it.

3) crashReporter

While trying to create the reduced test case below, I noticed that if I let Apollo manage the Redux store, I got a separate error message with the proper stack trace, from this line. This doesn't happen if you are using an existing Redux store.

Code

import React from 'react';
import ReactDOM from 'react-dom';
import ApolloClient from 'apollo-client';
import {ApolloProvider, connect} from 'react-apollo';
import gql from 'graphql-tag';
import { createStore, combineReducers, applyMiddleware } from 'redux';

const client = new ApolloClient({
  networkInterface: {
    query: function() {
      return new Promise(function(resolve, reject) {
        return resolve({
          data: {
            test: {
              id: 1
            }
          }
        });
      });
    }
  }
});
const store = createStore(
  combineReducers({
    apollo: client.reducer(),
  }),
  applyMiddleware(client.middleware())
);

const Example = function(props) {
  if (props.myQuery.loading) {
    return <div>Loading...</div>;
  }
  if (props.myQuery.errors) {
    console.error(props.myQuery.errors.stack); // undefined
    console.error(props.myQuery.errors.networkError.stack); // correct source-mapped stack trace
    return <div>Errors!</div>;
  };
  return <h1>Hello, world!{props.myQuery.doesnt_exist.completely_undefined}</h1>; // throws an error
};

var MyComponent = connect({
  mapQueriesToProps({ownProps, state}) {
    return {
      myQuery: {
        query: gql` {
          test {id}
        }`
      }
    }
  }
})(Example);

ReactDOM.render(
  <ApolloProvider client={client} store={store}>
    <MyComponent />
  </ApolloProvider>,
  document.getElementById('body')
);

There is currently an example at http://apolloerror-example.dahjelle.c9users.io/, but I have no idea how long c9.io will let it run. :-)

[stubailo]

@dahjelle is this example something we can clone and run locally?

[dahjelle]

I put it in this GitHub repo. Should be fairly straightforward to get it going (but, then again, it's the stack I'm used to :-) ).

[stubailo]

Nice, I dig the mocked network interface! This could be a great way to distribute simple examples :]

[dahjelle]

I was pretty pumped when I realized you'd set things up to enable mocking a whole GraphQL server. 👍

[stubailo]

That's how we run all of the apollo client tests! https://github.com/apollostack/apollo-client/blob/master/test/mocks/mockNetworkInterface.ts

[Poincare]

I think (1) may be tied to one of the current issues with react-apollo, (2) is definitely fixable from apollo-client (I'll work on it) and I'll have to look more into (3) to figure out what is going on.

[Poincare]

As far as I can tell, it seems that both (1) and (3) are related to react-apollo (see this issue) since I tried and failed to reproduce them inside Apollo Client. (3) is certainly interesting - I'm not exactly sure why it is happening. Any thoughts, @stubailo?

I did fix (2) and submitted #445. However, the stack trace added will contain a reference to the ApolloError constructor which means that for most applications, you'd be better off just using the stack trace from apolloError.networkError or one of the apolloError.graphQLErrors.