Custom Error Pages Not Loading
Unanswered
Asian paper wasp posted this in #help-forum
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
I have a page called
Am I missing something?
/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
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.
I'm pretty sure these two are connected.
Asian paper waspOP
Same is happening on our custom 404 page.
Asian paper waspOP
Right now, we're just getting a blank page.
Asian paper waspOP
No clue what is happening here.
Asian paper waspOP
Still working through this one. Starting to look like it's not possible to have a page called /error.
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
https://nextjs.org/docs/pages/building-your-application/routing/custom-error
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,GSomali
What happens when you create the _error page and redirect the user to /error instead?
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.Somali
Try renaming to /_error
Asian paper waspOP
The /error page is still blank.
Maybe I don't understand what you're saying. I renamed the page file from
I'm trying to figure out how to force a 500 error to see if the page loads.
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.
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.
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