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
  
}

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
  
}

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
  
}

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
  
}

Hint

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

Practice

1. What is the main purpose of error recovery with reset in a Next.js app?

easy

A. To automatically fix bugs in the code

B. To allow users to recover from errors without reloading the whole page

C. To prevent any errors from ever happening in the app

D. To disable user interactions after an error occurs

Solution

1. Step 1: Understand error recovery purpose

   Error recovery with reset is designed to keep the app running smoothly by letting users try again after an error.

2. Step 2: Compare options

   Only To allow users to recover from errors without reloading the whole page describes allowing users to recover without a full page reload, which matches the concept.

3. Final Answer:

   To allow users to recover from errors without reloading the whole page -> Option B

4. Quick Check:

   Error recovery = user retry without reload [OK]

Hint: Error recovery means retry without full page reload [OK]

Common Mistakes:

• Thinking error recovery prevents all errors
• Confusing error recovery with automatic bug fixing
• Assuming error recovery disables user actions

2. Which of the following is the correct way to reset error state using React's useState in a Next.js error boundary?

easy

A. const [error, setError] = useState(null); setError(null);

B. const [error, setError] = useState(null); setError(false);

C. const [error, setError] = useState(false); setError(undefined);

D. const [error, setError] = useState(true); setError(0);

Solution

1. Step 1: Identify initial error state

   Typically, error state is initialized as null to indicate no error.

2. Step 2: Reset error state correctly

   Resetting error state to null clears the error, allowing retry. const [error, setError] = useState(null); setError(null); does this correctly.

3. Final Answer:

   const [error, setError] = useState(null); setError(null); -> Option A

4. Quick Check:

   Reset error state = setError(null) [OK]

Hint: Reset error state by setting it back to null [OK]

Common Mistakes:

• Using false or 0 instead of null to reset error
• Initializing error state with true or false incorrectly
• Confusing undefined with null for reset

3. Given this simplified error boundary code snippet in Next.js, what will be the output after clicking the reset button?

function ErrorBoundary() {
  const [error, setError] = React.useState(null);
  if (error) {
    return (
      <div>
        <p>Error occurred</p>
        <button onClick={() => setError(null)}>Reset</button>
      </div>
    );
  }
  return <p>App is running</p>;
}

medium

A. Displays 'App is running' after clicking reset button

B. Nothing changes after clicking reset button

C. Throws an error because setError is called incorrectly

D. Displays 'Error occurred' and reset button permanently

Solution

1. Step 1: Understand initial state and rendering

   Initially, error is null, so component shows 'App is running'. If error is set, it shows error message and reset button.

2. Step 2: Effect of clicking reset button

   Clicking reset calls setError(null), clearing error state, so component re-renders showing 'App is running'.

3. Final Answer:

   Displays 'App is running' after clicking reset button -> Option A

4. Quick Check:

   Reset button clears error, shows normal app [OK]

Hint: Reset button sets error to null, restoring normal view [OK]

Common Mistakes:

• Thinking reset button does not change output
• Assuming setError call causes error
• Believing error message stays after reset

4. Identify the error in this Next.js error boundary snippet and how to fix it:

function ErrorBoundary() {
  const [error, setError] = React.useState(null);
  try {
    if (error) throw new Error('Error!');
    return <p>App running</p>;
  } catch {
    return <button onClick={() => setError(false)}>Reset</button>;
  }
}

medium

A. Error should not be thrown manually in React components

B. try/catch cannot be used inside a React component

C. setError(false) should be setError(null) to reset error state

D. useState must be called outside the component

Solution

1. Step 1: Analyze error state reset

   Resetting error state with false does not match initial null state, causing logic issues.

2. Step 2: Correct reset value

   Reset should use setError(null) to clear error properly and allow retry.

3. Final Answer:

   setError(false) should be setError(null) to reset error state -> Option C

4. Quick Check:

   Reset error state must match initial null [OK]

Hint: Reset error state with null, not false [OK]

Common Mistakes:

• Using false instead of null to reset error
• Thinking try/catch is invalid in components
• Believing throwing error manually is always wrong

5. You want to build a Next.js error boundary that resets error state only when a user clicks a reset button, but also logs the error before reset. Which approach correctly combines error recovery with reset and logging?

hard

A. Use useEffect to catch errors and reset automatically without user action

B. Set error state to false on reset and log error inside render method

C. Throw errors inside the reset button click handler to trigger recovery

D. Use useState for error, catch error in try/catch, log error, then set error to null on reset button click

Solution

1. Step 1: Combine error state and logging

   Use useState to track error, catch errors with try/catch, and log them before resetting.

2. Step 2: Reset error on user action

   Reset error state to null only when user clicks reset button, ensuring controlled recovery.

3. Final Answer:

   Use useState for error, catch error in try/catch, log error, then set error to null on reset button click -> Option D

4. Quick Check:

   Error recovery with logging needs try/catch + user reset [OK]

Hint: Log error in catch, reset error on button click [OK]

Common Mistakes:

• Resetting error automatically without user control
• Throwing errors inside event handlers incorrectly
• Logging errors inside render causing repeated logs