sccoreui
Version:
ui-sccore
58 lines (57 loc) • 3.81 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
// import SvgComponent from "../../directives/svg-component";
// import Button from "../button/button";
const error_500_png_1 = tslib_1.__importDefault(require("../../assets/images/Error/error-500.png"));
function ErrorBoundary({ children }) {
const [hasError, setHasError] = (0, react_1.useState)(false);
(0, react_1.useEffect)(() => {
const errorHandler = (error, errorInfo) => {
if ((error === null || error === void 0 ? void 0 : error.message) ===
"ResizeObserver loop completed with undelivered notifications.") {
const resizeObserverErrDiv = document.getElementById("webpack-dev-server-client-overlay-div");
const resizeObserverErr = document.getElementById("webpack-dev-server-client-overlay");
if (resizeObserverErr) {
resizeObserverErr.setAttribute("style", "display: none");
}
if (resizeObserverErrDiv) {
resizeObserverErrDiv.setAttribute("style", "display: none");
}
}
else {
setHasError(true);
}
// You can log the error here
console.error(error, errorInfo, "error details");
};
// Add the error handler to the window object
window.addEventListener("error", errorHandler);
// Clean up the error handler
return () => {
window.removeEventListener("error", errorHandler);
};
}, []);
if (hasError) {
// Fallback UI for when an error occurs
return (
// <div role="alert" className="errorContainer bg-gray-200">
// <div className="border-round-xl"></div>
// <div className="flex flex-column gap3">
// <h5 className="text-lg text-primary-500">Tesla's Power Surge</h5>
// <h4 className="display-1 text-gray-900">Error 500</h4>
// <p>Tesla's Experiment Overloaded the System!</p>
// <p>
// In the 1890s, Tesla’s experiments caused power surges, lighting up
// entire labs—but also breaking things. Looks like our system needs a
// reset too!
// </p>
// </div>
// </div>
(0, jsx_runtime_1.jsx)("div", Object.assign({ role: "alert", className: "errorContainer bg-gray-200 h-full w-full" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-center gap-6", style: { width: "600px" } }, { children: [(0, jsx_runtime_1.jsx)("img", { className: "border-round-6 overflow-hidden max-w-15rem", src: error_500_png_1.default }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start" }, { children: [(0, jsx_runtime_1.jsx)("h5", Object.assign({ className: "text-lg text-primary-500 my-0" }, { children: "Tesla's Power Surge" })), (0, jsx_runtime_1.jsx)("h4", Object.assign({ className: "text-gray-900 mt-0 mt-8 mb-8 pb-3", style: { fontSize: "64px" } }, { children: "Error 500" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "my-0 text-left" }, { children: "Tesla's Experiment Overloaded the System!" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "my-0 text-left line-height-4" }, { children: "In the 1890s, Tesla\u2019s experiments caused power surges, lighting up entire labs\u2014but also breaking things. Looks like our system needs a reset too!" }))] }))] })) })));
}
return children;
}
exports.default = ErrorBoundary;