Next.js Discord

Discord Forum

Custom Error Pages Not Loading

Unanswered
Asian paper wasp posted this in #help-forum
Open in Discord
Avatar
Asian paper waspOP
We have an API that responds with specific JSON data fields that denote an error or problem with the API. All of them response with a status of 200. In our old React app, they just built a page called /error, and used that. Now, in our new and improved Next.js app, v13 TS React with pages router, they want to retain the same logic.

I have a page called error.tsx, but it doesn't load anything. From what I've read, _error is reserved, but it doesn't mention error.

Am I missing something?

17 Replies

Avatar
Asian paper waspOP
Also, we're getting weird TS error that our global page wrapper can't be found. It works on other pages just fine. If I close VS code and reopen it, the TS error goes away for awhile. Then I make a change to the page, and it comes back.

I'm pretty sure these two are connected.
Image
Avatar
Asian paper waspOP
Same is happening on our custom 404 page.
Avatar
Asian paper waspOP
Right now, we're just getting a blank page.
Avatar
Asian paper waspOP
No clue what is happening here.
Avatar
Asian paper waspOP
Still working through this one. Starting to look like it's not possible to have a page called /error.
Avatar
Somali
Docs say you can just define a page called _error to override the default one. Have you tried that?

https://nextjs.org/docs/pages/building-your-application/routing/custom-error
Avatar
Asian paper waspOP
I don't see that working with status code 200.
Responses received from the API are all a status 200 with a JSON object like below. 
// codes received look like A,B,C,D,E,F,G
{
  status: "A"
}
The new /error page is to provide details specific to codes B,C,D,E,F,G
Avatar
Somali
What happens when you create the _error page and redirect the user to /error instead?
Avatar
Asian paper waspOP
Well, it's not a new page. The current app uses an /error page, and we're just trying to retain it to keep logic of the app the same.
Avatar
Somali
Try renaming to /_error
Avatar
Asian paper waspOP
The /error page is still blank.
Maybe I don't understand what you're saying. I renamed the page file from error.tsx to _error.tsx. With this in place, navigating to /error still returns a blank page.

I'm trying to figure out how to force a 500 error to see if the page loads.
Avatar
Somali
You can always make a fetch request to an incorrect URL to force a 500 error code
I’d try this in a production build otherwise Next.js might just show you where the error is located and nothing more.
Avatar
Asian paper waspOP
The problem has been resolved. The problem was presented in two places. 
// problem 1 - remove the path alias
// bad 
import { PortalTemplate } from '@/components/templates';
// good 
import { PortalTemplate } from '../components/templates';

// problem 2 - remove inline <style> tag