88 lines
2.4 KiB
JavaScript
88 lines
2.4 KiB
JavaScript
|
import React from "react";
|
||
|
|
import ReactDOM from "react-dom/client";
|
||
|
|
import "./index.css";
|
||
|
|
import App from "./App";
|
||
|
|
|
||
|
|
// Error boundary component
|
||
|
|
class ErrorBoundary extends React.Component {
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
this.state = { hasError: false, error: null };
|
||
|
|
}
|
||
|
|
|
||
|
|
static getDerivedStateFromError(error) {
|
||
|
|
return { hasError: true, error };
|
||
|
|
}
|
||
|
|
|
||
|
|
componentDidCatch(error, errorInfo) {
|
||
|
|
console.error("React Error Boundary caught an error:", error, errorInfo);
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
if (this.state.hasError) {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "column",
|
||
|
|
alignItems: "center",
|
||
|
|
justifyContent: "center",
|
||
|
|
minHeight: "100vh",
|
||
|
|
padding: "20px",
|
||
|
|
fontFamily: "system-ui, -apple-system, sans-serif",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<h1 style={{ color: "#ef4444", marginBottom: "16px" }}>
|
||
|
|
Something went wrong
|
||
|
|
</h1>
|
||
|
|
<p style={{ color: "#6b7280", marginBottom: "24px" }}>
|
||
|
|
The application encountered an error. Please refresh the page.
|
||
|
|
</p>
|
||
|
|
<button
|
||
|
|
onClick={() => window.location.reload()}
|
||
|
|
style={{
|
||
|
|
padding: "12px 24px",
|
||
|
|
backgroundColor: "#3b82f6",
|
||
|
|
color: "white",
|
||
|
|
border: "none",
|
||
|
|
borderRadius: "6px",
|
||
|
|
cursor: "pointer",
|
||
|
|
fontSize: "16px",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Reload Page
|
||
|
|
</button>
|
||
|
|
{process.env.NODE_ENV === "development" && this.state.error && (
|
||
|
|
<details style={{ marginTop: "24px", maxWidth: "600px" }}>
|
||
|
|
<summary style={{ cursor: "pointer", color: "#6b7280" }}>
|
||
|
|
Error Details
|
||
|
|
</summary>
|
||
|
|
<pre
|
||
|
|
style={{
|
||
|
|
marginTop: "12px",
|
||
|
|
padding: "16px",
|
||
|
|
backgroundColor: "#f3f4f6",
|
||
|
|
borderRadius: "6px",
|
||
|
|
overflow: "auto",
|
||
|
|
fontSize: "12px",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{this.state.error.toString()}
|
||
|
|
</pre>
|
||
|
|
</details>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return this.props.children;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const root = ReactDOM.createRoot(document.getElementById("root"));
|
||
|
|
root.render(
|
||
|
|
<ErrorBoundary>
|
||
|
|
<App />
|
||
|
|
</ErrorBoundary>
|
||
|
|
);
|