Error recovery with reset in NextJS - Mini Project: Build & Apply

Error Recovery with Reset in Next.js

📖 Scenario: You are building a simple Next.js app that fetches user data from an API. Sometimes the API call fails, and you want to show an error message with a button to try again. This helps users recover from errors without reloading the whole page.

🎯 Goal: Create a Next.js component that fetches user data and shows it. If an error happens, show an error message and a Reset button. When the user clicks Reset, the component tries fetching the data again.

📋 What You'll Learn

Create a state variable to hold user data

Create a state variable to hold error state

Fetch user data inside a useEffect hook

Show user data when fetched successfully

Show an error message and a Reset button if fetching fails

Reset button clears the error and retries fetching

💡 Why This Matters

🌍 Real World

Many web apps fetch data from APIs that can fail. Providing a way to recover from errors without reloading the page improves user experience.

💼 Career

Understanding error handling and recovery in React and Next.js is essential for building resilient, user-friendly web applications.

1

Set up user data and error state

Create two state variables using useState: one called user initialized to null, and one called error initialized to null.

NextJS

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

export default function UserProfile() {
  // Create user and error state variables
  
}

Need a hint?

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

2

Add a fetch trigger state

Create a state variable called fetchTrigger initialized to 0. This will help us retry fetching data when it changes.

NextJS

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

export default function UserProfile() {
  const [user, setUser] = useState(null);
  const [error, setError] = useState(null);
  // Create fetchTrigger state
  
}

Need a hint?

Use const [fetchTrigger, setFetchTrigger] = useState(0) to create a counter for retries.

3

Fetch user data with error handling

Add a useEffect hook that runs when fetchTrigger changes. Inside it, fetch from 'https://jsonplaceholder.typicode.com/users/1'. If successful, set user with the JSON data and clear error. If it fails, set error to a string message.

NextJS

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

export default function UserProfile() {
  const [user, setUser] = useState(null);
  const [error, setError] = useState(null);
  const [fetchTrigger, setFetchTrigger] = useState(0);

  // Fetch user data when fetchTrigger changes
  
}

Need a hint?

Use useEffect with fetchTrigger in the dependency array. Use fetch to get data, then update user and error accordingly.

4

Render UI with error recovery button

Render the user name if user exists. If error exists, show the error message and a button with text Reset. When the button is clicked, call setFetchTrigger with fetchTrigger + 1 to retry fetching.

NextJS

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

export default function UserProfile() {
  const [user, setUser] = useState(null);
  const [error, setError] = useState(null);
  const [fetchTrigger, setFetchTrigger] = useState(0);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users/1')
      .then((res) => {
        if (!res.ok) throw new Error('Network response was not ok');
        return res.json();
      })
      .then((data) => {
        setUser(data);
        setError(null);
      })
      .catch(() => {
        setError('Failed to load user data.');
        setUser(null);
      });
  }, [fetchTrigger]);

  // Render user name or error message with Reset button
  
}

Need a hint?

Use conditional rendering for user and error. Add a button that calls setFetchTrigger(fetchTrigger + 1) on click.