leumas-private-shared/src/errorBoundary.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

import React from 'react';

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

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Log the error to an error reporting service
    console.error("Error caught in ErrorBoundary:", error, errorInfo);
  }

  // Method to reload the page
  reloadPage = () => {
    window.location.reload();
  };

  render() {
    if (this.state.hasError) {
      // Custom fallback UI with a button to reload the page
      return (
        <div>
          🚫 Error with the iframe content // Invalid Content, either delete or edit the content before we can render it successfully please.
          <p className='text-blue-400'>
            Try refreshing the page if the problem persists. We're sorry for this occurrence; we are aware of the issue and will work to improve your user experience.
          </p>
          {/* Button to reload the page */}
          <button onClick={this.reloadPage} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
            Reload Page
          </button>
        </div>
      );
    }

    // Normally, just render children
    return this.props.children;
  }
}

export default ErrorBoundary;