Snippet

Handling Component Request Failures with Catch and Error State

Proper error handling captures failed network requests and exceptions using catch blocks, storing error messages into state to display helpful fallback feedback to users.

snippet.js

javascript

import { useState, useEffect } from 'react';
 
function DataViewer() {
  const [error, setError] = useState(null);
 
  useEffect(() => {
    fetch('https://api.example.com/invalid')
      .then((res) => {
        if (!res.ok) throw new Error('Network response was not ok');
        return res.json();
      })
      .catch((err) => {
        setError(err.message);
      });
  }, []);
 
  if (error) return <div role="alert">Error: {error}</div>;
  return <div>Content loaded</div>;
}

react

Breakdown

if (!res.ok) throw new Error('Network response was not ok');

Manually triggers an error if the HTTP response status indicates failure.

.catch((err) => { setError(err.message); });

Catches any network or parsing error and updates the error state.

if (error) return <div role="alert">Error: {error}</div>;

Renders an accessible fallback UI alert whenever an error is recorded.

Previous snippet Next snippet

More Beginner JavaScript exercises →

Handling Component Request Failures with Catch and Error State

Related