Next 13.4.2 App Router线上Server Components渲染报错求助

错误信息 #

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.

关键现象：本地开发/本地生产模式无报错，仅部署在AWS EC2的Docker线上环境出现问题，3个页面无法加载数据、无法正常渲染。

现有代码 #

actions 文件夹中的 getData 函数 #

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()
}

页面调用代码 #

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>
}

排查与解决方案 #

1. 修复代码语法错误 #

页面调用getData时存在语法错误：getData((token?.value)多了一个左括号，线上生产构建对语法检查更严格，会导致渲染失败。修改为：

const data = await getData(token?.value)

2. 验证线上环境变量配置 #

Docker部署时process.env.COOKIE_NAME可能未正确注入：

• 检查Docker镜像构建/容器启动环节，是否通过--env参数、env文件或Docker Compose正确设置该环境变量。
• 在页面中临时添加日志，通过Docker日志查看输出：

  console.log('COOKIE_NAME:', process.env.COOKIE_NAME);
  console.log('Token from cookie:', token);
  

  执行docker logs <容器ID>确认环境变量是否存在、token是否能正确获取。

3. 排查线上Cookie读取问题 #

线上环境Cookie的domain、path或secure属性可能不匹配，导致Server Components无法读取：

• 确认前端设置Cookie时，domain匹配线上EC2的域名/IP、path设为/；若为HTTPS环境，需设置secure: true（Server Components仅能读取符合当前域名规则的Cookie）。
• 临时测试无token场景：

  const data = await getData(token?.value || 'test-token');
  

  若页面能正常渲染，说明核心问题是token获取失败。

4. 完善API请求的错误日志 #

当前getData的错误信息过于笼统，无法定位线上问题，修改函数添加详细日志：

async function getData(token) {
  console.log('Received token in getData:', token);
  try {
    const res = await fetch('https://api.example.com/...', {
      headers: {
        Authorization: token ? `Bearer ${token}` : ''
      }
    });
    console.log('API response status:', res.status);
    
    if (!res.ok) {
      const errorText = await res.text();
      console.error('API error response:', errorText);
      throw new Error(`Failed to fetch data: ${res.status} - ${errorText}`);
    }
 
    return res.json();
  } catch (err) {
    console.error('getData error:', err);
    throw err;
  }
}

通过Docker日志查看API请求的具体错误（如401权限错误、500服务错误、网络超时等）。

5. 检查Docker网络连通性 #

EC2上的Docker容器可能无法访问外部API：

• 进入容器内部测试网络：

  docker exec -it <容器ID> curl https://api.example.com/...
  

  若无法访问，检查EC2安全组是否允许出站流量，或容器网络模式（如bridge模式下的DNS配置问题）。

6. 开启Next.js生产环境详细日志 #

在Docker部署时设置环境变量NEXT_PUBLIC_DEBUG=true，或修改next.config.js：

module.exports = {
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
};

获取更详细的线上渲染错误信息。

内容的提问来源于stack exchange，提问作者Awais Alwaisy