Handling runtime errors in React - Mini Project: Build & Apply

Handling runtime errors

📖 Scenario: You are building a simple React app that fetches user data from an API and displays it. Sometimes the API might fail or return an error. You want to handle these runtime errors gracefully so the app does not crash and shows a friendly message instead.

🎯 Goal: Create a React functional component that fetches user data and handles runtime errors using error boundaries and state. The app should show user names when data loads successfully, and show an error message if something goes wrong.

📋 What You'll Learn

Create a React functional component called UserList.

Use useState to hold user data and error state.

Use useEffect to fetch data from https://jsonplaceholder.typicode.com/users.

Handle fetch errors by setting an error state.

Render user names if data loads, or an error message if there is an error.

💡 Why This Matters

🌍 Real World

Handling runtime errors gracefully is important in real apps to avoid crashes and provide good user experience when things go wrong.

💼 Career

React developers must know how to manage errors and loading states to build robust, user-friendly interfaces.

1

Set up initial state variables

In the UserList component, create two state variables using useState: users initialized to an empty array, and error initialized to null.

React

import React, { useState, useEffect } from 'react';

export default function UserList() {
  // Create state variables users and error
  
}

Need a hint?

Use const [users, setUsers] = useState([]) and const [error, setError] = useState(null) inside the component.

2

Add data fetching with error handling

Inside UserList, use useEffect to fetch data from https://jsonplaceholder.typicode.com/users. If the fetch is successful, update users state with the JSON data. If an error occurs, catch it and update error state with the error message.

React

import React, { useState, useEffect } from 'react';

export default function UserList() {
  const [users, setUsers] = useState([]);
  const [error, setError] = useState(null);

  // Add useEffect to fetch user data and handle errors
}

Need a hint?

Use fetch inside useEffect. Check response.ok and throw an error if false. Use setUsers for data and setError for errors.

3

Render user list or error message

In the UserList component's return statement, render a <ul> with each user's name inside <li> if error is null. If error is not null, render a <p> element with the text Error: followed by the error message.

React

import React, { useState, useEffect } from 'react';

export default function UserList() {
  const [users, setUsers] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => setUsers(data))
      .catch(err => setError(err.message));
  }, []);

  // Render user list or error message
}

Need a hint?

Use a conditional if (error) to return an error message. Otherwise, map over users to create list items.

4

Add ARIA role and accessibility improvements

Add an aria-live="polite" attribute to the error <p> element to announce error messages to screen readers. Also, add a role="list" attribute to the <ul> element for better accessibility.

React

import React, { useState, useEffect } from 'react';

export default function UserList() {
  const [users, setUsers] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => setUsers(data))
      .catch(err => setError(err.message));
  }, []);

  // Add aria-live to error message and role to ul
}

Need a hint?

Add aria-live="polite" to the error paragraph and role="list" to the unordered list.