Declarative UI Recovery via Class Error Boundaries

import React, { Component } from 'react';
 
class SafeBoundary extends Component {
  state = { hasError: false, error: null };
 
  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }
 
  componentDidCatch(error, errorInfo) {
    console.error('Uncaught runtime error:', error, errorInfo.componentStack);
  }
 
  resetError = () => {
    this.setState({ hasError: false, error: null });
  };
 
  render() {
    if (this.state.hasError) {
      return (
        <div role="alert">
          <p>Something went wrong: {this.state.error?.message}</p>
          <button onClick={this.resetError}>Retry Action</button>
        </div>
      );
    }
    return this.props.children;
  }
}
 
export default SafeBoundary;