Error recovery with reset in NextJS

Introduction

Error recovery with reset helps your app fix problems by letting users try again without reloading the whole page.

When a part of your app crashes but you want the user to keep using other parts.

If a form submission fails and you want to let users retry easily.

When fetching data fails and you want to give users a button to reload just that data.

To avoid a full page reload after an error, keeping the app smooth and fast.

Syntax

NextJS

import React from 'react';

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

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

  resetError = () => {
    this.setState((state) => ({
      hasError: false,
      resetKey: state.resetKey + 1
    }));
  };

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <p>Something went wrong.</p>
          <button onClick={this.resetError}>Try again</button>
        </div>
      );
    }

    return (
      <div key={this.state.resetKey}>
        {this.props.children}
      </div>
    );
  }
}

This example uses a React class component's state to track errors.

The resetError method clears the error state so the component can try again.

Examples

A simple error message with a reset button that calls a reset function.

NextJS

function ErrorFallback({ reset }) {
  return (
    <div role="alert">
      <p>Oops! An error happened.</p>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

ErrorBoundary component catches errors and shows fallback UI with reset.

NextJS

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null, resetKey: 0 };
  }

  static getDerivedStateFromError(error) {
    return { error };
  }

  resetError = () => {
    this.setState((state) => ({
      error: null,
      resetKey: state.resetKey + 1
    }));
  };

  render() {
    if (this.state.error) {
      return <ErrorFallback reset={this.resetError} />;
    }

    return (
      <div key={this.state.resetKey}>
        {this.props.children}
      </div>
    );
  }
}

Sample Program

This app has a button that counts up. When it reaches 5, it crashes. The ErrorBoundary catches the crash and shows a message with a reset button. Clicking reset lets you try counting again from zero.

NextJS

import React, { useState } from 'react';

function BuggyCounter() {
  const [count, setCount] = useState(0);

  if (count === 5) {
    throw new Error('I crashed!');
  }

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

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

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

  resetError = () => {
    this.setState((state) => ({
      hasError: false,
      resetKey: state.resetKey + 1
    }));
  };

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <p>Something went wrong.</p>
          <button onClick={this.resetError}>Try again</button>
        </div>
      );
    }

    return (
      <div key={this.state.resetKey}>
        {this.props.children}
      </div>
    );
  }
}

export default function App() {
  return (
    <main>
      <h1>Error Recovery with Reset</h1>
      <ErrorBoundary>
        <BuggyCounter />
      </ErrorBoundary>
    </main>
  );
}

Important Notes

React error boundaries catch errors during rendering but not in event handlers.

Resetting error state lets users recover without reloading the page.

Next.js supports React error boundaries like this for better user experience.

Summary

Error recovery with reset helps keep your app running smoothly after a problem.

Use a reset button to let users try again without full reload.

React class components help build simple error boundaries.

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