How do I handle 500 errors in a React app?

How do I handle 500 errors in a React app?

To handle 500 errors in a React app, you can use error boundaries and global error handling.

What are error boundaries?

Error boundaries are React components that catch JavaScript errors in their child component tree.

Can you show me an example of an error boundary?

Sure! Here's a simple example:

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

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

  componentDidCatch(error, info) {
    console.error('Error caught in ErrorBoundary:', error, info);
  }

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

You can wrap your components with this ErrorBoundary.

What should I do when a 500 error occurs?

When a 500 error occurs, you should log the error, show a user-friendly message, and possibly retry the request.