plush siren
How can I make dynamic custom error page? I have made like this but it doesn't seem to work. Because the error screen is still using the default.
// app/error.tsx
"use client"; // Required for error.js to work
// @ts-nocheck
import { useEffect } from "react";
export default function Error({ error, reset }) {
// Log the error to an error reporting service if needed
useEffect(() => {
console.error("Error caught:", error);
}, [error]);
// Render a dynamic error page
return (
<html lang="en">
<body>
<div style={{ padding: "2rem", textAlign: "center" }}>
<h1>Oops! Something went wrong.</h1>
{/* Dynamically show the error message */}
<p>{error?.message || "An unknown error occurred."}</p>
{/* Provide an action to retry */}
<button
onClick={() => {
// Attempt to recover by resetting the error boundary
reset();
}}
style={{
marginTop: "1rem",
padding: "0.5rem 1rem",
background: "#0070f3",
color: "#fff",
border: "none",
borderRadius: "4px",
cursor: "pointer",
}}
>
Try Again
</button>
</div>
</body>
</html>
);
}
rugged gyro
dusk elk
