Top React Error Handling Interview Questions: Error Boundaries, Async, & Best Practices

Effective error handling is essential in React applications to ensure stability and provide a smooth user experience. In this blog post, we cover crucial React interview questions on error handling, including the use of error boundaries, managing asynchronous errors, handling errors in event handlers, and best practices for logging and user feedback. These questions offer insights into creating resilient React applications that handle unexpected issues gracefully, helping developers minimize crashes and improve debugging efficiency. Whether you're preparing for an interview or looking to enhance your React skills, this guide provides a solid foundation in error handling essentials.

1. How do you handle errors in React components?

In React, errors can be handled using:

• Error boundaries: Components that catch JavaScript errors anywhere in their child component tree, preventing the app from crashing.
• Try-catch blocks: For catching errors in asynchronous functions or code outside the render process.
• Global error handling: Using window.onerror or window.addEventListener('error') to capture unhandled errors.

2. What is an error boundary in React, and how does it work?

An error boundary is a React component that uses lifecycle methods like componentDidCatch and getDerivedStateFromError to catch errors in child components. It helps to prevent the entire app from crashing by displaying a fallback UI when an error is encountered. Error boundaries only catch errors in the render phase, not in event handlers or asynchronous code.

3. How do you create an error boundary in React?

To create an error boundary, define a class component that implements componentDidCatch and getDerivedStateFromError:

    import React, { Component } from 'react';

    class ErrorBoundary extends Component {
      constructor(props) {
        super(props);
        this.state = { hasError: false };
      }

      static getDerivedStateFromError(error) {
        return { hasError: true };
      }

      componentDidCatch(error, errorInfo) {
        console.error("Error:", error, errorInfo);
      }

      render() {
        if (this.state.hasError) {
          return <h1>Something went wrong.</h1>;
        }

        return this.props.children;
      }
    }

    export default ErrorBoundary;
  

Wrap this error boundary component around any component tree to catch errors within that scope.

4. Can functional components be used as error boundaries?

No, functional components cannot be used as error boundaries directly because they lack lifecycle methods. Error boundaries need class components to implement componentDidCatch and getDerivedStateFromError. However, with custom hooks or third-party libraries, you can manage errors in functional components.

5. How do you handle errors in asynchronous code in React?

Errors in asynchronous code can be caught with try-catch blocks within async functions. Additionally, .catch() can be used with promises to handle errors. Error boundaries don’t catch asynchronous errors, so this approach is necessary to manage async errors in React.

6. How would you handle errors in an event handler in React?

Error boundaries do not catch errors within event handlers, so these should be handled using try-catch blocks. Alternatively, errors can be passed to an error-logging service or a global state, depending on the app’s requirements.

7. How can you log errors in a React application?

Logging errors can be done using console.error for development, or by integrating error-tracking services like Sentry or LogRocket. These services capture errors with stack traces, making it easier to monitor and debug production errors. Error boundaries can also log errors in the componentDidCatch lifecycle method.

8. What are some best practices for error handling in React applications?

• Use error boundaries strategically around critical sections of the app to prevent a full crash.
• Handle async errors with try-catch and .catch() for promises.
• Log errors to track and understand issues in production with services like Sentry.
• Provide user feedback for errors to improve the user experience.