next.jsfetch-apiapp-router

Error: An error occurred in the Server Components render: Next 13 App router


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.

Error in browser.

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.


Solution

  • It is solved. process.env.COOKIE_NAME was undefined. Don't know why. Then I hard-coded the cookie name. Fixed.