javascript 49 lines · 8 steps

How a React ErrorBoundary works

A class component that catches render errors, reports them, and shows recoverable fallback UI.

Explained by highlit

React Intermediate error-handling lifecycle-methods render-props resilience

1import { Component } from 'react';
2import { reportError } from './services/telemetry';
3 
4export class ErrorBoundary extends Component {
state = { error: null };
6 
static getDerivedStateFromError(error) {
  return { error };
}
10 
componentDidCatch(error, info) {
  reportError(error, {
    componentStack: info.componentStack,
    boundary: this.props.name ?? 'unnamed',
  });
}
17 
componentDidUpdate(prevProps) {
  if (this.state.error && prevProps.resetKey !== this.props.resetKey) {
    this.setState({ error: null });
  }
}
23 
handleRetry = () => this.setState({ error: null });
25 
render() {
  const { error } = this.state;
28 
  if (error) {
    if (typeof this.props.fallback === 'function') {
      return this.props.fallback({ error, retry: this.handleRetry });
    }
33 
    return (
      this.props.fallback ?? (
        <div role="alert" className="error-boundary">
          <h2>Something went wrong</h2>
          <p>{error.message}</p>
          <button type="button" onClick={this.handleRetry}>
            Try again
          </button>
        </div>
      )
    );
  }
46 
  return this.props.children;
}
49}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Error boundaries must be class components because they rely on lifecycle hooks React doesn't expose to hooks.
2Separate concerns: getDerivedStateFromError updates UI state while componentDidCatch handles side effects like logging.
3Accepting a function fallback and a resetKey turns a boundary into a reusable, recoverable component.

Related explainers

rust

use serde::Deserialize;
 
#[derive(Debug, Deserialize)]
#[serde(untagged)]

Parsing flexible JSON shapes with serde

deserialization enums json

Intermediate 6 steps

ruby

require "shellwords"
require "open3"
 
module Backup

Building safe shell commands in Ruby

shell-out subprocess command-injection

Intermediate 7 steps

javascript

function evaluate(expression) {
  const tokens = tokenize(expression);
  let pos = 0;

Building a recursive descent calculator

parsing recursion operator-precedence

Intermediate 8 steps

javascript

import { useState, useEffect, useCallback, useRef } from 'react';
 
const cache = new Map();
const inflight = new Map();

Building a stale-while-revalidate hook in React

caching request-deduplication custom-hooks

Advanced 10 steps

rust

use chrono::{Duration, NaiveDate};
 
#[derive(Debug)]
pub struct DateRange {

Parsing and iterating date ranges in Rust

error-handling iterators parsing

Intermediate 7 steps

javascript

import { useEffect, useRef, useState } from 'react';
 
export function useDelayedFlag(active, delay = 300) {
  const [visible, setVisible] = useState(false);