Next.js Discord

Discord Forum

Custom Error Page isn't working

Unanswered
Bigheaded ant posted this in #help-forum
Open in Discord
Bigheaded antOP
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>
  );
}

16 Replies

Bigheaded antOP
Up
Luis
Of it’s just error boundary around your page (error.tsx) it shouldn’t render <html> and <body>
If you want a global error try global-error.tsx at the root level, but this custom overlay only renders in production, in development next.js will show their overlay

https://nextjs.org/docs/app/api-reference/file-conventions/error#global-error
Then how can I make sure the display.
Luis
Build your app and try it:
“npm run build”
“npm run start”
This is the production version of your app even if it’s not deployed to a production server
@Luis Build your app and try it: “npm run build” “npm run start”
Bigheaded antOP
It's still same sir.
The display is still using the default from nextjs
Luis
Oh but you want the “not-found.tsx” file not the error.tsx or global-error.tsx
For not found error callbacks you need this

https://nextjs.org/docs/app/api-reference/file-conventions/not-found
@Luis Oh but you want the “not-found.tsx” file not the error.tsx or global-error.tsx
Bigheaded antOP
Oh so it can't be dynamically to determine the type of error in error page.
Because what I want to achieve is just make one error page handling to cover all errors.
Luis
Not sure about that honestly 😅
Bigheaded antOP
But it means that usually to deal with it, we make the not-found file and other error files separately?