Basic error boundary example

ErroryBoundaryDemo.jsx

import React, { useState } from 'react';

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

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

  componentDidCatch(error, info) {
    //For illustration purposes, we'll just log
    console.debug('error detected', error, info.componentStack)
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback;
    }

    return this.props.children;
  }
}

function TestComponent({ showCrash }) {

  if (showCrash) {
    throw new Error('I am broken');
  }

  return <p style={{ color: 'white' }}>Test Component</p>
}

export function App() {
  const [showCrash, setShowCrash] = useState(false);
  return (
    <>
      <ErrorBoundary fallback={<div>An error was encountered. Please try again later</div>}>
        <TestComponent showCrash={showCrash} />
        <button onClick={() => setShowCrash(true)}>Show boundary error</button>

      </ErrorBoundary>
    </>
  )
}