Next.js应用：RSC抛错显示UI却未返回500状态码的原因

1. notFound()的特殊处理逻辑 #

notFound()是Next.js内置的导航工具函数，调用它时，框架会直接向客户端返回404 HTTP状态码，同时触发error.tsx组件渲染。这个过程是框架层面直接操控HTTP响应的结果，所以浏览器网络面板能清晰捕获到404状态码。

2. 手动抛出普通Error的处理限制 #

在React服务器组件（RSC）中手动抛出new Error()时，Next.js的处理逻辑和notFound()完全不同：

• 框架会在服务器端捕获这个错误，然后通过正常的200 HTTP响应，将error.tsx的UI内容返回给客户端，不会修改HTTP响应的状态码，所以网络面板显示的是200。
• 你在RSC内部发起的fetch请求返回的500状态码，属于服务器端的内部请求，客户端浏览器完全感知不到这个请求的存在，自然也不会在网络面板中显示。

补充：如何让客户端看到500状态码 #

如果需要在抛出错误时同时返回500状态码，不能用普通的throw new Error()，而是要返回NextResponse对象：

import { NextResponse } from 'next/server';

export default async function SomePage(props) {
  const id = props.params.id;

  if (!id) notFound();

  const { data, error } = await someFetchFunction(id);

  if (error) {
    return new NextResponse('Internal Server Error', { status: 500 });
  }

  return (
    <div>
      <h1>Hello World</h1>
      {data.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

内容的提问来源于stack exchange，提问作者van der dev