All Errors Catched

[timsuchanek]

When using the connect method from react-apollo, all errors that occur in one of the child components, are catched by apollo and fail silently.

Development gets nearly impossible then.

Any ideas why that could be the case?
Using apollo-client 0.3.5 and react-apollo 0.3.3

Thanks!

[jbaxleyiii]

@johnthepink didn't you run into this case as well?

[jbaxleyiii]

@timsuchanek do you have some code I can use to replicate and write a test? Where is the child component failing and what is react-apollo doing?

[jbaxleyiii]

As soon as I can replicate I'll fix ASAP!

[jbaxleyiii]

For instance:

  it('doesn\'t catch all errors of children ', () => {
    const store = createStore(() => ({ }));
    const query = gql`
      query people {
        allPeople(first: 1) {
          people {
            name
          }
        }
      }
    `;

    const data = {
      allPeople: {
        people: [
          {
            name: 'Luke Skywalker',
          },
        ],
      },
    };

    const networkInterface = mockNetworkInterface({
      request: { query },
      result: { data },
    });

    const client = new ApolloClient({
      networkInterface,
    });

    const mapQueriesToProps = () => ({
      errorTest: {
        query,
      },
    });

    let fail: any;

    class ErrorChild2 extends React.Component<any, any> {
      render(){
        return (
          <div>
            {(() => {
              return fail.test.foobar;
            })()}
            <Passthrough {...this.props} />;
          </div>
        )
      }
    }

    class ErrorChild1 extends React.Component<any, any> {
      render(){
        return fail.test.foobar;;
      }
    }

    @connect({ mapQueriesToProps })
    class Container1 extends React.Component<any, any> {
      render() {
        return <ErrorChild1 {...this.props} />;
      }
    };

    @connect({ mapQueriesToProps })
    class Container2 extends React.Component<any, any> {
      render() {
        return <ErrorChild2 {...this.props} />;
      }
    };

    const mountMethod1 = () => {
      return mount(
        <ProviderMock store={store} client={client}>
          <Container1 pass='through' baz={50} />
        </ProviderMock>
      );
    }

    const mountMethod2 = () => {
      return mount(
        <ProviderMock store={store} client={client}>
          <Container2 pass='through' baz={50} />
        </ProviderMock>
      );
    }

    expect(mountMethod1).to.throw;
    expect(mountMethod2).to.throw;

  });

Correctly passes? So two different error types both throw correctly

[timsuchanek]

Hmm of course when I try to create a minimal example, also all errors throw correctly.

So I am using this boilerplate: https://github.com/graphcool-examples/react-apollo-todo-example

Probably some other side effects are involved in interfering the proper error propagation.

My conclusion was that the problem should be react-apollo when I substituted the connect method with the one from react-redux. Then all errors threw again correctly.

As soon as I have a reproducible example, I'll post it here

[johnthepink]

@timsuchanek I have been running in to this issue as well. I'll do some digging.

[johnthepink]

@timsuchanek would you be willing to share the class that isn't throwing errors in your app?

[johnthepink]

@timsuchanek it looks like our issue didn't have to do with react-apollo, but with react's error reporting directly. In certain cases, React swallows exceptions and doesn't report them.

Here is the open issue on the react repo facebook/react#2461

For our project, I added react-transform-catch-errors, and altered our babel settings, and now we have the errors that you would expect on components using connect and the children of those components.

I know you mentioned you were using that boilerplate. It doesn't look like it includes a way to deal with catching the errors in react lifecycle functions. So maybe that will help?

[timsuchanek]

Hey guys, thanks for the input so far!
I still can't figure out a reproducible example, but this is my quick fix, using it in the render() method of my connect'ed component:

    if (this.props.data.errors) {
      console.error(this.props.data.errors.stack);
    }

[stubailo]

This gist could help from @jlevycpa: https://gist.github.com/jlevycpa/d681974915b8ccec10d378a4736af24c

[jlevycpa]

Here is a repro that should help. See the Readme for details. I've never put something like this together before so any feedback is appreciated.

https://github.com/jlevycpa/apollo-error-repro