rinshad-react-guard/src/components/ErrorBoundary.jsx

A robust React error boundary solution developed by [rinshad.com](https://rinshad.com) to elegantly handle runtime errors in React applications. Instead of showing the dreaded white screen of death, this library captures errors and displays a user-friendl

import React, { useState, useEffect } from "react";
import Error500 from "./Error500";

export const ErrorBoundaryHandler = ({ onError, excludedKeywords }) => {
  useEffect(() => {
    const handleError = (event) => {
      if (event.error && event.error.message) {
        const errorMessage = event.error.message.toLowerCase();
        if (
          !excludedKeywords.some((keyword) =>
            errorMessage.includes(keyword.toLowerCase())
          )
        ) {
          onError(event.error.message);
        }
      }
    };

    window.addEventListener("error", handleError);
    return () => window.removeEventListener("error", handleError);
  }, [onError, excludedKeywords]);

  return null;
};

const ErrorBoundary = ({ children, excludedKeywords = [] }) => {
  const [hasError, setHasError] = useState(false);
  const errorKey = "rinshadReactGuardAlert";

  const errorHandler = (errorMessage) => {
    console.error("Error caught by ErrorBoundary:", errorMessage);
    setHasError(true);
    sessionStorage.setItem(errorKey, errorMessage);
  };

  const handleBackToHome = () => {
    sessionStorage.removeItem(errorKey);
    setHasError(false);
  };

  return (
    <React.Fragment>
      {hasError ? <Error500 onBackToHome={handleBackToHome} /> : children}
      <ErrorBoundaryHandler
        onError={errorHandler}
        excludedKeywords={excludedKeywords}
      />
    </React.Fragment>
  );
};

export default ErrorBoundary;