Next 14中使用error.tsx时如何避免返回500状态码？

默认情况下，error.tsx捕获服务器组件抛出的错误时，Next.js会返回500状态码，这是框架的原生行为。要实现仅展示错误内容、保持应用其余部分正常运行且返回200状态码，可按以下方式调整：

1. 业务逻辑错误：直接在页面内处理 #

如果错误属于非系统级业务错误（比如用户权限不足、参数不合法），无需依赖error.tsx，直接在page.tsx中判断并渲染错误UI即可：

// app/lorem/page.tsx
export default function LoremPage() {
  const condition = false; // 你的业务判断条件

  if (!condition) {
    return <div>抱歉，当前条件不满足，请检查后重试</div>;
  }

  return <div>正常展示内容</div>;
}

2. 客户端组件错误：用客户端error.tsx捕获 #

若必须通过error.tsx展示错误，需将error.tsx改为客户端组件，并把抛出错误的逻辑移到客户端组件中（服务器组件抛出的错误仍会触发500状态码）：

第一步：修改error.tsx为客户端组件 #

// app/lorem/error.tsx
'use client';

import { useEffect } from 'react';

export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  useEffect(() => {
    console.error('捕获到错误:', error);
  }, [error]);

  return (
    <div>
      <h2>出错了</h2>
      <p>{error.message}</p>
      <button onClick={() => reset()}>重试</button>
    </div>
  );
}

第二步：将抛出错误的逻辑封装为客户端组件 #

// app/lorem/components/Content.tsx
'use client';

export default function Content() {
  const condition = false; // 你的判断条件

  if (!condition) {
    throw new Error('特定条件不满足，请检查');
  }

  return <div>正常展示的内容</div>;
}

第三步：在page.tsx中引入客户端组件 #

// app/lorem/page.tsx
import Content from './components/Content';

export default function LoremPage() {
  return <Content />;
}

此时客户端组件抛出的错误会被error.tsx捕获展示，页面返回200状态码，应用其余部分不受影响。

3. 服务器端必要逻辑：返回错误UI而非抛出错误 #

如果判断逻辑必须在服务器端执行（比如依赖数据库查询、敏感数据校验），直接返回错误UI而非抛出错误：

// app/lorem/page.tsx
export default async function LoremPage() {
  // 服务器端逻辑，例如查询数据库
  const condition = await checkServerCondition();

  if (!condition) {
    return (
      <div>
        <h2>条件不满足</h2>
        <p>抱歉，当前无法访问该页面，请稍后再试</p>
      </div>
    );
  }

  return <div>服务器端渲染的正常内容</div>;
}

这种方式下页面返回200状态码，直接展示错误内容，无需依赖error.tsx。

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