error.js issue
Answered
Chartreux posted this in #help-forum
ChartreuxOP
the error jsx|tsx has an error instance from prop, but when we show to the UI in production build it will get replaced with something like:
What I'm doing is fetching to external endpoints without internal api route in the Server Component.
so fetch in RSC -> pass to client component
I tried to do some research I found here similar use case https://github.com/vercel/next.js/issues/44463
if it's something to do with fetch, how can I disable this sensitive details replace message? I want to show to the UI when fetch is failing with the error.js file
version: 14.1.4
Error: An error occurred in the Server Components render. he specific message is omitted in production builds to avoid leaking sensitive details.What I'm doing is fetching to external endpoints without internal api route in the Server Component.
so fetch in RSC -> pass to client component
I tried to do some research I found here similar use case https://github.com/vercel/next.js/issues/44463
if it's something to do with fetch, how can I disable this sensitive details replace message? I want to show to the UI when fetch is failing with the error.js file
version: 14.1.4
14 Replies
@Chartreux the error jsx|tsx has an error instance from prop, but when we show to the UI in production build it will get replaced with something like:
`Error: An error occurred in the Server Components render. he specific message is omitted in production builds to avoid leaking sensitive details.`
What I'm doing is fetching to external endpoints ** without internal api route** in the Server Component.
so fetch in RSC -> pass to client component
I tried to do some research I found here similar use case https://github.com/vercel/next.js/issues/44463
if it's something to do with fetch, how can I disable this sensitive details replace message? I want to show to the UI when fetch is failing with the error.js file
version: 14.1.4
If your page is dynamic, I think you could try to catch the error on the fetch and render the UI
export default async function Page() {
try {
const res = await fetch("")
const data = await res.json()
return <UI data={data} />
} catch (error) {
console.error(error)
return <ErrorUI />
}
}ChartreuxOP
Yes page is dynamic
I see, I also had similar idea before asking the question (every page has its own
however I'm thinking this means the error.tsx can't be used to show certain error
and I don't even use token to the fetch function
I see, I also had similar idea before asking the question (every page has its own
catch)however I'm thinking this means the error.tsx can't be used to show certain error
and I don't even use token to the fetch function
Does error.tsx catch this usually ?
ChartreuxOP
in your local/dev env, yes
But not in production?
ChartreuxOP
Yep, just like error message in main text above
this is problem because dev environment gives false sense of what's production actualy looks like
it this is really how it looks like in production, then we should at least have option to kind of warn or disable options
Answer
ChartreuxOP
I see, error.js doesn't meant to handle fetching errors
it desgined to handle unexpected runtime error
and they remove the error message to prevent leaking sensitive detail, if this behaviour is not what you want, you could catch the error and render your own error component
ChartreuxOP
I see
Just another question I think the docs a little confusing here https://nextjs.org/docs/app/building-your-application/routing/error-handling#securing-sensitive-error-information
previously I thought I can use the
Just another question I think the docs a little confusing here https://nextjs.org/docs/app/building-your-application/routing/error-handling#securing-sensitive-error-information
During production, the Error object forwarded to the client only includes a generic message and digest property.previously I thought I can use the
message but the word generic message hear means transformed error message ?Nevermind, they explained it here https://nextjs.org/docs/app/building-your-application/routing/error-handling#handling-server-errors
I guess I get the answer I want, but probably docs can explain what cause sensitive and what don't.
thanks!
I guess I get the answer I want, but probably docs can explain what cause sensitive and what don't.
thanks!