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

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

  componentDidCatch(error, errorInfo) {
    // Log the error to your error tracking service
    console.error('Error caught by boundary:', error, errorInfo);
  }

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

    return this.props.children;
  }
}

const DataFetching = () => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://api.example.com/data');
        setData(response.data);
      } catch (error) {
        setError(error);
        // Throw error to be caught by Error Boundary
        throw new Error('API Request failed');
      }
    };

    fetchData();
  }, []);

  if (error) {
    throw error;
  }

  return <div>{/* Render your data */}</div>;
};

const api = axios.create({
  baseURL: process.env.REACT_APP_API_URL,
  timeout: 5000,
});

api.interceptors.response.use(
  response => response,
  error => {
    // Handle global errors here
    throw error;
  }
);

const axiosRetry = require('axios-retry');

axiosRetry(api, {
  retries: 3,
  retryDelay: axiosRetry.exponentialDelay,
  retryCondition: (error) => {
    return axiosRetry.isNetworkOrIdempotentRequestError(error);
  }
});

const ErrorFallback = ({ error }) => {
  if (error.response?.status === 404) {
    return <div>The requested resource was not found.</div>;
  }

  if (error.response?.status === 403) {
    return <div>You don't have permission to access this resource.</div>;
  }

  return <div>An unexpected error occurred. Please try again later.</div>;
};