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.