Next.js Discord

Discord Forum

error.tsx appearance condition

Unanswered
American posted this in #help-forum
Open in Discord
AmericanOP
Hello everyone! Currently reading Nextjs docs, and I got a little bit confused, how to make error.tsx layout appear? If I have one in the root of my app folder. I tried to raise an error on click, but instead of showing error layout, I get Nextjs red error message in the bottom left of the browser window

6 Replies

Sun bear
that is how its supposed to be in development since you still want to see what error you got. In production your entire app would go blank if you hadnt added error.tsx
@Sun bear that is how its supposed to be in development since you still want to see what error you got. In production your entire app would go blank if you hadnt added error.tsx
AmericanOP
so is it corrent that in production error.tsx page will be shown when I click the button?
Sun bear
no you should see the error.tsx page layout once you get an error
Sun bear
did you check that your error.tsx is a client component?
AmericanOP
yes, it is client. That's what I'm trying to understand, in which case I can see error.tsx page
Sun bear
"use client";

import { useState } from "react";

export default function Page() {
    const [error, setError] = useState(false);

    if (error) throw new Error("this is a test error");

    return (
        <>
            <button
                onClick={() => {
                    setError(true);
                }}
            >
                Throw An Error
            </button>
        </>
    );
}


Try something like this in page.tsx