Handling Errors Gracefully with Apollo Client in React

Error handling is a crucial aspect of building robust React applications, especially when dealing with GraphQL operations through Apollo Client. Let’s dive into some effective strategies for handling errors that will help create a better user experience.

Understanding Apollo Error Types

When working with Apollo Client, we typically encounter two main types of errors: network errors and GraphQL errors. Network errors occur when the request fails to reach the server, while GraphQL errors happen when the server successfully processes the request but returns an error in the response.

Implementing Error Boundaries

Error boundaries act as a safety net for your React application. They catch JavaScript errors anywhere in their child component tree and log these errors while displaying a fallback UI. This prevents the entire app from crashing when something goes wrong.

Let’s explore some practical implementations that make error handling both effective and user-friendly:

Network Error Handling

Network errors can occur for various reasons - poor internet connectivity, server downtime, or timeout issues. It’s essential to handle these gracefully to maintain a smooth user experience.

function ProductList() {
  const { loading, error, data } = useQuery(GET_PRODUCTS, {
    onError: (error) => {
      // Custom error logging
      console.error('Network error:', error);
      // Trigger retry logic or show user-friendly message
    }
  });

  if (error?.networkError) {
    return <ErrorMessage message="Unable to connect to the server. Please check your internet connection." />;
  }

  // Rest of the component logic
}

GraphQL Error Handling

GraphQL errors are more specific and often contain valuable information about what went wrong during the query or mutation execution.

function UserProfile() {
  const { loading, error, data } = useQuery(GET_USER_PROFILE, {
    errorPolicy: 'all', // Handle both network and GraphQL errors
  });

  if (error?.graphQLErrors) {
    return error.graphQLErrors.map(({ message }, i) => (
      <ErrorMessage key={i} message={`Error: ${message}`} />
    ));
  }

  // Component rendering logic
}

Best Practices for Error Handling

1. Use Error Policies: Configure how Apollo Client handles different types of errors using errorPolicy options.
2. Implement Retry Logic: Add retry mechanisms for temporary failures using exponential backoff.
3. Provide Clear Feedback: Always show user-friendly error messages instead of technical details.
4. Log Errors Properly: Maintain comprehensive error logs for debugging and monitoring.

Advanced Error Handling Techniques

Consider implementing these advanced techniques for more robust error handling:

const ErrorLink = new ApolloLink((operation, forward) => {
  return forward(operation).map(response => {
    if (response.errors) {
      // Handle specific error cases
      response.errors.forEach(err => {
        if (err.extensions?.code === 'UNAUTHENTICATED') {
          // Trigger re-authentication flow
        }
      });
    }
    return response;
  });
});

Remember to always test your error handling implementation thoroughly. Edge cases and unexpected errors often reveal themselves during real-world usage.