Next.js Discord

Discord Forum

How to achieve 503 status code in app route?

Answered
galu87 posted this in #help-forum
Open in Discord
Avatar
galu87OP
Hi I am struggling with 200 status code and digest error when any error has been thrown. What should i do to get 503 response status code in app directory based application?
Answered by joulev & fuma pray for Schneider
as far as i know for app router pages you cannot return any response status other than 200
View full answer

49 Replies

Avatar
SupremeDeity
503 would mean its a issue to related to the server itself or the code you wrote ig. The digest is a code which you can use to find the appropriate logs relating to the error inside the server logs(this is NOT your browser console log)
The route handlers return a response and you can simply specify the error you want to thrown inside them for ex:

new NextResponse.json({error: "error message here"}, {status:503});
Avatar
joulev & fuma pray for Schneider
as far as i know for app router pages you cannot return any response status other than 200
Answer
Avatar
SupremeDeity
You can then throw the error using throw directly where you are receiving the response.
Avatar
joulev & fuma pray for Schneider
this is a known limitation of the app router
Avatar
SupremeDeity
For server components?
Avatar
joulev & fuma pray for Schneider
yes
questions requesting non-200 status codes for not found and error pages are common here and in the repo issue tracker
and the answer has been universally 'no it's impossible'
this is due to streaming
when you throw the error on the server, the stream has already happened
the response is already returned to the browser
Avatar
SupremeDeity
Hmm... but it should work on client components iirc.
Avatar
joulev & fuma pray for Schneider
so the status cannot be changed
for pages in general, server or client
if you can, please make an example of non-200 for a page.tsx route involving client components
for route.ts, it's very easy to use custom response status
but for pages, it's impossible get 4xx or 5xx
Avatar
galu87OP
thank you
i've tried everything to achieve 503 but no success
Avatar
joulev & fuma pray for Schneider
yeah i think this is a fundamental limitation of the app router that is very hard to fix
Avatar
galu87OP
i use custom server to catch errors but it seems that nextjs somehos catches errors and not forwards further
Avatar
joulev & fuma pray for Schneider
since the app router uses streaming on a fundamental level, this is pretty much impossible to fix even in the future
yeah nextjs catches all of those errors, there is a error boundary catcher for everything
Avatar
galu87OP
it is strange - why it is not solved when it seems to be obvious 🙂
to return 503 when error occurs
we cache 200 statuses and not cache 50x
Avatar
joulev & fuma pray for Schneider
it's due to this
Avatar
galu87OP
so when anything happens in application and 200 with digest occures we cache it with no information it is error
Avatar
joulev & fuma pray for Schneider
the moment you send a request to the server, the server returns back a streaming response with 200. that happens before the server knows there is an error so you cannot change the response status afterwards
Avatar
SupremeDeity
You should still get a digest.
That digest can be used to find the error in the server logs.
Avatar
joulev & fuma pray for Schneider
well you will have to refactor this step. a lot.
because you can't rely on the headers and status to see if you should cache it now
Avatar
galu87OP
yes i know but 200 pages are cached - they acnnot revalidate asap
so solution is to parse response, find if there is "digest" phrase inside and not cache then? 😄 strange 😄
Avatar
joulev & fuma pray for Schneider
also the notion of error in nextjs is not even clear anymore. if there are two parts of the page, one part works and one part throws, is it a 500? if one part is not-found and one part throws, is it 404 or 500? it's unclear
that's just how the app router is designed
i think you're supposed to use their native caching mechanisms
rather than make your own cache because as you see it cannot integrate well with the system
their four levels of caching actually play with this very well. for example if you use ISR and the route error'd, the fallback data if any will be used
Avatar
galu87OP
caching on next side is also not good solution
when we have cloud and many instances of application
cache will be need stored on every instance
or maybe there is another solution to tell next to use redis or something like this to cache?
Avatar
joulev & fuma pray for Schneider
a workaround could be this

in all error.tsx you have, you add a meta tag to signal that there has been an error

in your caching mechanism, you parse the html response and find that meta tag. if there is, don't cache
Avatar
galu87OP
but we still have problem with setting cache even i set revalidate = 300 or other option it returns not cached version
Avatar
joulev & fuma pray for Schneider
this is similar to the digest parsing above but obviously safer; you cannot just parse the html to find the word "digest"
Avatar
galu87OP
you are right it could be better but similar of course