rinshad-react-guard/src/components/Error500.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, { useEffect } from "react";
import "../error.css";
import error500 from "../assets/under_maintenance.svg";

const Error500 = ({ onBackToHome }) => {
  useEffect(() => {
    window.history.pushState(null, "", window.location.href);
    window.onpopstate = function () {
      window.history.go(1);
    };
  }, []);

  const errorKey = "rinshadReactGuardAlert";
  const errorMessage = sessionStorage.getItem(errorKey);

  const containerStyle = {
    width:
      typeof window !== "undefined"
        ? window.innerWidth ||
          document.documentElement?.clientWidth ||
          document.body?.clientWidth ||
          "100%"
        : "100%",
    height:
      typeof window !== "undefined"
        ? window.innerHeight ||
          document.documentElement?.clientHeight ||
          document.body?.clientHeight ||
          "100%"
        : "100%",
  };

  return (
    <div className="error-container" style={containerStyle}>
      <div className="error-content">
        <div className="error-500">
          <img
            src={error500}
            alt="Error 500"
            className="error-500-img error-img"
          />
          <h1 className="title">500</h1>
        </div>
        <div className="error-message">
          <h4 style={{ margin: 0 }}>Something went Wrong!</h4>
          <p>Please contact admin for help.</p>
          <a href="/" className="back-home" onClick={onBackToHome}>
            Back to home
          </a>
        </div>
      </div>
    </div>
  );
};

export default Error500;