Handling runtime errors in React

Introduction

Handling runtime errors helps your app stay working even if something goes wrong. It shows friendly messages instead of breaking.

When fetching data from the internet that might fail

When a user inputs unexpected or wrong data

When a part of your app might crash due to bugs

When you want to show a fallback UI instead of a broken screen

Syntax

React

import React, { Component } from 'react';

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

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

  componentDidCatch(error, errorInfo) {
    // You can log the error here
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

Error boundaries must be class components in React.

They catch errors in their child components during rendering.

Examples

This component throws an error when rendered.

React

function BuggyComponent() {
  throw new Error('Bug!');
  return <div>Won't render</div>;
}

A simple fallback UI to show when an error happens.

React

import React from 'react';

function ErrorFallback() {
  return <h2>Oops! Something went wrong.</h2>;
}

Basic error boundary that shows a message if a child throws an error.

React

import React, { Component } from 'react';

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

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

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

Sample Program

This example shows an error boundary catching an error from a child component. Instead of crashing, it shows a friendly message.

React

import React, { Component } from 'react';
import { createRoot } from 'react-dom/client';

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

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

  componentDidCatch(error, errorInfo) {
    console.log('Error caught:', error.message);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

function BuggyComponent() {
  throw new Error('Bug!');
  return <div>This will not render</div>;
}

function App() {
  return (
    <ErrorBoundary>
      <BuggyComponent />
    </ErrorBoundary>
  );
}

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);

Important Notes

Error boundaries do not catch errors inside event handlers.

Use error boundaries to improve user experience by showing fallback UI.

Summary

Error boundaries catch errors in child components during rendering.

They help keep your app running and show friendly messages.

They must be class components in React.