Next app correct ui shown wrong status code in client

Question

When a fetch request within a RSC is made (that returns a 500) and I throw and error within the RSC so that I render an error ui.

In my network tab, I expect to see the status code 500.

Can someone explain why this is not the case.

However if I call notFound() from next navigation I do see 404 status code next to the file in the network tab

I have the following files:

• app/page.tsx
• app/error.tsx - "use client"
• layout renders html markup that renders page.tsx as child

Page.tsx

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

  if (!id) notFound();

  // some fetch function to return error wihth statuscode 500
  const { data, error } = await someFetchFunction(id);


  // throwing error shows error.tsx
  if (error) throw new Error("Internal Server Error");

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

Answer 1

I assume this is a Server Component. The error will then show up in the server log not the browser.

If you run it locally from the command line, you should see it there.