I am using Next 13.4.2 along with the App router, and I am facing the following error.
Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
** No error in development or local production mode. Only I face this error when I visit a page on a live site, hosted on AWS EC2 using Docker.**
My way of API calls. I am using fetch API , I
actions` folder in app dir where I make function like
async function getData(token) {
const res = await fetch('https://api.example.com/...')
// The return value is *not* serialized
// You can return Date, Map, Set, etc.
// passing token to headers => token
if (!res.ok) {
// This will activate the closest `error.js` Error Boundary
throw new Error('Failed to fetch data')
}
return res.json()
}
Then in pages I do
import { cookies } from "next/headers";
export default async function Page() {
const cookieStore = cookies();
const token = cookieStore.get(process.env.COOKIE_NAME);
const data = await getData((token?.value)
return <main></main>
}
That's all I am doing to fetch data. I am not able to find the problem why in live production website pages don't load the data, even the page itself doesn't load. I am facing the same error on 3 different pages.
.
Yes I have studied similar questions and issues on stackoverflow and on Github. Still finding it out why it is happening. Searching for the solution. I guess error is due to passing token from page to getData() function.
It is solved. process.env.COOKIE_NAME was undefined. Don't know why. Then I hard-coded the cookie name. Fixed.