What can and can't an Error Boundary catch?

import React, { Component, useState, useEffect } from "react";

class Boundary extends Component {
  state = { error: null };
  static getDerivedStateFromError(error) { return { error }; }
  render() {
    if (this.state.error) {
      return (
        <div style={bad}>
          <strong style={{ color: "#a33" }}>✅ boundary caught it:</strong>{" "}
          {this.state.error.message}
          <div><button onClick={() => this.setState({ error: null })}>reset</button></div>
        </div>
      );
    }
    return this.props.children;
  }
}

function Subject({ mode, onEscaped }) {
  const [asyncError, setAsyncError] = useState(null);

  // THE BRIDGE: an error caught asynchronously and re-thrown during render is
  // back inside the window a boundary can see.
  if (asyncError) throw asyncError;

  // ✅ CAUGHT — render is inside the window.
  if (mode === "render") throw new Error("thrown during render");

  // ✅ CAUGHT — effects run during the commit, with React on the stack.
  useEffect(() => {
    if (mode === "effect") throw new Error("thrown inside useEffect");
  }, [mode]);

  // ❌ NOT CAUGHT — the timer fires on a later tick with no React frame below.
  useEffect(() => {
    if (mode !== "timer") return;
    const t = setTimeout(() => {
      try {
        throw new Error("thrown inside setTimeout");
      } catch (e) {
        onEscaped("setTimeout: " + e.message + " — the boundary never saw this");
      }
    }, 50);
    return () => clearTimeout(t);
  }, [mode, onEscaped]);

  return (
    <div style={ok}>
      <div>rendering normally (mode: {mode || "idle"})</div>
      {/* ❌ NOT CAUGHT — React has finished rendering by the time this runs. */}
      <button onClick={() => {
        try {
          throw new Error("thrown in an event handler");
        } catch (e) {
          onEscaped("handler: " + e.message + " — the boundary never saw this");
        }
      }}>
        throw in a handler
      </button>{" "}
      <button onClick={() => {
        // The same handler error, BRIDGED into render.
        setAsyncError(new Error("handler error, bridged into render"));
      }}>
        throw in a handler, bridged
      </button>
    </div>
  );
}

const ok = { border: "1px solid #cde3cd", background: "#f2f9f2", borderRadius: 8, padding: 12 };
const bad = { border: "1px solid #e0b4b4", background: "#fdf0f0", borderRadius: 8, padding: 12 };

export default function App() {
  const [mode, setMode] = useState("");
  const [escaped, setEscaped] = useState([]);
  const note = (s) => setEscaped((l) => [s, ...l].slice(0, 4));

  return (
    <div style={{ padding: 24, fontFamily: "system-ui", lineHeight: 1.6, maxWidth: 560 }}>
      <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 10 }}>
        <button onClick={() => setMode("render")}>throw in render</button>
        <button onClick={() => setMode("effect")}>throw in useEffect</button>
        <button onClick={() => setMode("timer")}>throw in setTimeout</button>
        <button onClick={() => { setMode(""); setEscaped([]); }}>reset all</button>
      </div>

      <Boundary key={mode}>
        <Subject mode={mode} onEscaped={note} />
      </Boundary>

      <div style={{ marginTop: 10, fontSize: 13 }}>
        <strong>escaped the boundary:</strong>
        <pre style={{ background: "#f6f6f8", padding: 8, borderRadius: 6, fontSize: 12, minHeight: 60 }}>
{escaped.length ? escaped.join("\n") : "(nothing yet)"}
        </pre>
      </div>

      <p style={{ fontSize: 13, color: "#666" }}>
        Render and effect errors reach the boundary. The handler and timer
        errors do not — they are caught locally here only so the demo survives;
        without that they would go straight to the global handler. The last
        button shows the bridge: store the error, throw it during render, and
        it becomes catchable.
      </p>
    </div>
  );
}