Next.js App Router 服务器组件错误处理

Question

给定一个获取数据的服务器组件（或服务器操作），我如何访问完整的错误消息以用于服务器端日志记录？

示例：

import os from 'os';
import { PHASE_PRODUCTION_BUILD } from 'next/constants';

export const dynamic = 'force-dynamic'

async function getDataFromServer(): Promise<string> {
  if (process.env.NEXT_PHASE !== PHASE_PRODUCTION_BUILD) {
    throw new Error('Error from server');
  }

  return Promise.resolve(`OS Type: ${os.type()}`);
}

export default async function Home() {
  const serverData = await getDataFromServer();

  return (
    <p>From server: {serverData}</p>
  )
}

在“生产”版本中运行它（

npm run build

，

npm run start

）会导致

服务器组件渲染时发生错误。在生产版本中省略了特定消息，以避免泄露敏感细节。此错误实例中包含摘要属性，它可以提供有关错误性质的其他详细信息。

我不想向客户端公开实际的错误消息，但我想将其记录到服务服务器端。错误边界位于客户端，因此它们会收到经过清理的消息。

我发现的唯一方法是将每个服务器方法包装在

try..catch

中。我可以创建一个高阶函数来减少样板文件，但是有没有办法创建单个服务器端错误处理程序（无需从每个 catch 块进行委托）？

Answer 1

为了在 Next.js 服务器组件或服务器操作中访问完整的错误消息以进行服务器端日志记录，您可以使用 try catch。

import os from 'os';
import { PHASE_PRODUCTION_BUILD } from 'next/constants';

export const dynamic = 'force-dynamic'

async function getDataFromServer(): Promise<string> {
  if (process.env.NEXT_PHASE !== PHASE_PRODUCTION_BUILD) {
    throw new Error('Error from server');
  }

  return Promise.resolve(`OS Type: ${os.type()}`);
}

export default async function Home() {
  let serverData;
  try {
    serverData = await getDataFromServer();
  } catch (error) {
    // Log the full error message server-side
    console.error('Server error:', error);

    // You can choose to return a fallback value or rethrow the error if needed
    serverData = 'Error fetching data';
  }

  return (
    <p>From server: {serverData}</p>
  );
}