How do I make Apollo Client tell me where in my code the error happened?

Question

I'm learning React/Apollo and when I introduce bugs I get the typical red exceptions in my Chrome console. However, with Apollo, it doesn't tell me where in my code the error began as it does in React or other frameworks. When working with hooks that fire off queries in multiple components it makes it exceedingly slow to find the source of the issue.

Do you use any tricks to debug your Apollo code or can you improve the error feedback in some way?

Here's what I see:

ApolloError.ts:46 Uncaught (in promise) Error: GraphQL error: User is not authenticated
    at new ApolloError (ApolloError.ts:46)
    at QueryManager.ts:1241
    at Object.next (Observable.js:322)
    at notifySubscription (Observable.js:135)
    at onNotify (Observable.js:179)
    at SubscriptionObserver.next (Observable.js:235)
    at observables.ts:12
    at Set.forEach (<anonymous>)
    at Object.next (observables.ts:12)
    at notifySubscription (Observable.js:135)
    at onNotify (Observable.js:179)
    at SubscriptionObserver.next (Observable.js:235)
    at httpLink.ts:142

score 0 · Answer 1 · answered Apr 25 '20 at 01:32

First, I'd like to address the specific error you're seeing in your question.

User is not authenticated would indicate to me that this is not an issue on the client side (most likely) and you are trying to make a query that requires authentication. The reason you aren't authenticated might have something to do with the client, but it's going to be pretty much impossible for any frontend framework to tell you where that issue is.

As far as general techniques for debugging apollo-client issues go? Well, when using @apollo/react-hooks, you will get feedback about errors from the value's the hook returns directly. For example, with the useQuery hook:


const Employee = () => {
    const { data, loading, error } = useQuery(LOAD_EMPLOYEE_DATA_QUERY);

    if (error) {
        console.error(error);

        throw error;
    }

   // ...
}

If something went wrong, either on the client or the server, you would get feedback about that in the error object. This makes it fairly straightforward to debug.

Sometimes, things aren't so simple though. The next place I usually look to when there are apollo-client issues are the Apollo dev tools. It will show you what queries were made and their results.

Finally, if that doesn't work, then I would start digging through the network tab for XHR requests to /(insert your graphql endpoint here). If there is red, then you should look at the console output from your server.

Hope that this helps!

score 0 · Answer 2 · answered Dec 05 '21 at 00:20

Those errors are actually when you run ApolloClient.query() and have uncaught errors.

This is what I did to handle it. (But ideally you would use useQuery) instead

const apiClient = new ApolloClient({
  ... // Your ApolloClient options
});

const originalQuery = apiClient.query;
apiClient.query = (...args) => {
  // Get the original stack trace instead to figure out where our uncaught error is
  const stackTrace = new Error().stack;
  return originalQuery(...args).catch(e => {
    e.stack = stackTrace;
    throw e;
  });
};

This way when I get a stack trace it'll actually be where I used this particular Query()

How do I make Apollo Client tell me where in my code the error happened?

2 Answers2