Error Boundaries

Error Boundaries — React Tutorial - HTML5ANDCSS3

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

  // Called when a child throws during render.
  static getDerivedStateFromError(error) {
    return { error }
  }

  render() {
    if (this.state.error) {
      return (
        <div style={{ border: "1px solid #fecaca", background: "#fef2f2", padding: 10, borderRadius: 8 }}>
          <strong>Something went wrong.</strong>
          <p style={{ margin: "6px 0 0", color: "#b91c1c" }}>{this.state.error.message}</p>
          <button onClick={() => this.setState({ error: null })}>Try again</button>
        </div>
      )
    }
    return this.props.children
  }
}

function Risky({ crash }) {
  if (crash) throw new Error("A component threw while rendering")
  return <p style={{ color: "#15803d" }}>Rendering normally.</p>
}

function Demo() {
  const [crash, setCrash] = React.useState(false)

  return (
    <div>
      <button onClick={() => setCrash(true)}>Make it crash</button>
      <p>The rest of the page keeps working.</p>

      <ErrorBoundary>
        <Risky crash={crash} />
      </ErrorBoundary>
    </div>
  )
}

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<Demo />)

Why a blank page

A boundary catches it

What it does not catch

Where to put them