How to differentiate different server side errors to show an error UI to the user

Unanswered

Southeastern blueberry bee posted this in #help-forum

Southeastern blueberry beeOP

2023-09-18T11:33:26.000Z

I have some routes that need to call the backend for getting some data, i forward the token of the user, but if the token is expired, it will cause a 403 error, i want to be able to show the user different error messages depending on the status code of such request (if there is), how could i do it?

17 Replies

Southeastern blueberry beeOP

2023-09-18T11:34:22.000Z

And also, i have a global-error.tsx file that seems to never be caught, i still get the default next.js error, i'm using the app router obviously

@Southeastern blueberry bee And also, i have a global-error.tsx file that seems to never be caught, i still get the default next.js error, i'm using the app router obviously

Clown

2023-09-18T11:38:52.000Z

Where is the error being thrown?

Root layout/template error do not get caught in error.js

@Clown Root layout/template error do not get caught in error.js

Southeastern blueberry beeOP

2023-09-18T11:39:25.000Z

But global-error.tsx should catch all

at least that's what is written in the documentation

Clown

2023-09-18T11:39:35.000Z

Also error.js recieves the the error so you can do whatever you want with it

@Southeastern blueberry bee But global-error.tsx should catch all

Clown

2023-09-18T11:39:51.000Z

Where is your global-error placed?

Southeastern blueberry beeOP

2023-09-18T11:40:01.000Z

root folder (src/app/global-error.tsx)

Clown

2023-09-18T11:40:17.000Z

Hmm...

Does it have the html tag?

Southeastern blueberry beeOP

2023-09-18T11:40:28.000Z

export default function GlobalError({error, reset}: ErrorProps) {
    return (
        <html>
        <body>
        <Navbar/>
        <Page crop style={{gap: "1rem"}}>
            <Header>
                {`C'Ã¨ stato un errore durante il caricamento della pagina`}
            </Header>
            <div style={{margin: "2rem"}}>
                <p>{error.message}</p>
                {//@ts-ignore
                    error.digest && <p>Code: ({error.digest})</p>
                }
            </div>
            <Link href={"/"}>Torna alla home</Link>
        </Page>
        <Footer/>
        </body>
        </html>
    )
}

Clown

2023-09-18T11:41:47.000Z

Have you tried using error.js in combination with this?

Southeastern blueberry beeOP

2023-09-18T11:42:14.000Z

not yet, i was trying to get some info on how to structure the error component properly first

Clown

2023-09-18T11:44:52.000Z

Try using error.js then in conjunction

IMO it might be because its just a part of your application that is error-ring out and not the entire layout which is why this is happening

So nextjs just uses its own error