Error boundariesError boundaries

Crash one widget

Type a note, then press Load bad data in each.

class ErrorBoundary extends React.Component {
  state = { hasError: false, error: null }

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

  componentDidCatch(error, errorInfo) {
    console.error('Error boundary caught:', error, errorInfo)
  }

  render() {
    if (!this.state.hasError) return this.props.children
    return (
      <div className="error-fallback">
        <h2>Something went wrong</h2>
        <p>{this.state.error?.message}</p>
        <button onClick={() => this.setState({ hasError: false })}>Try again</button>
      </div>
    )
  }
}

Where the boundary goes

Pick a placement, then press Crash Revenue.

// Coarse: any throw swaps the whole app for the fallback
<ErrorBoundary>
  <App />
</ErrorBoundary>

// Fine: each independent region fails on its own
function App() {
  return (
    <>
      <Header />
      <ErrorBoundary><Balance /></ErrorBoundary>
      <ErrorBoundary><Notes /></ErrorBoundary>
      <ErrorBoundary><Revenue /></ErrorBoundary>
    </>
  )
}

Try again, broken then fixed

Tick Break the API, press Refresh, then recover.

// app/dashboard/error.tsx: the same boundary, per route segment
'use client'

export default function Error({ error, reset }) {
  return (
    <div>
      <p>{error.message}</p>
      <button onClick={() => reset()}>Try again</button>
    </div>
  )
}

Why it matters, pros and cons