Set different unsuccessful status codes on page (RSC) when fetching or something else goes wrong?

[ludwighogstrom]

Is there a way to set different status codes when an error occurs in a server component?

For example, I would like to distinguish when an error originates from an external api call (status code 502) or if something is wrong with the application itself (status code 500) when monitoring the site.

Tried to find information about it in the documentation but only found that you can throw or use notFound() from import { notFound } from 'next/navigation'.

[devjiwonchoi]

Using the middleware could be one of the options for you.
You can set your own status code by returning a new NextResponse.

Example:

export function middleware(request: NextRequest) {
  if (!isAuthenticated(request)) {
    return new NextResponse(
      JSON.stringify({ success: false, message: 'authentication failed' }),
      { status: 401, headers: { 'content-type': 'application/json' } },
    );
  }
}

For more information, check out this docs.

Another option I would suggest is to handle errors using error.js or global-error.js for the "root" layout or template.
It is recommended to use error.js as a Client Component, but you could also handle Server Components' errors by receiving an Error object to the nearest error.js file.

If an error is thrown during data fetching or inside a Server Component, Next.js will forward the resulting Error object to the nearest error.js file as the error prop.

For more information, check out this docs.

[ludwighogstrom]

Thanks for your response @devjiwonchoi !

Unfortunately your suggestions doesn't solve the problem.

Middlewares are executed before the request hits the application. Here I want to react on something that happens in the application.

I don't see any way how to modify the server response to the client from the error.js file. You just get the error as a prop there. From what I'm understand the error.js file is there more for ui and error reporting.

[ludwighogstrom]

Would be happy if something like a serverError function exist where you could set a status.

Example:

import { notFound, serverError } from 'next/navigation';
 
export default async function Component() {
  const res = await fetch('https://...');

  if (res.status === 500) {
    serverError({
      status: 502,
      revalidate: 60,
    });
  }

  if(res.status === 404) {
    notFound();
  }
 
  // ...
}

[danieljee]

I'm having the same issue. Just like notFound function serverError can throw a custom next.js error that passes the status code to the error.js page.

[pkellner]

You mentioned server component but it looks like you are talking about api routes using the app folder. If so, this works for me if I put this file in the folder app/api/myResponse/route.ts

import { NextResponse } from "next/server";
import prisma from "@/lib/prisma";

export async function POST(request: Request) {
  const res = await request.json();
  const { newsSourceFromId, newsSourceToId, promptsId, response } = res;

  if (!newsSourceFromId || !newsSourceToId || !promptsId || !response) {
    return NextResponse.json(
      { error: "Missing required fields" },
      { status: 400 }
    );
  }

  try {
    const newChatResponse = await prisma.chatResponses.create({
      data: {
        newsSourceFromId: 120,
        newsSourceToId,
        promptsId: promptsId,
        response,
        creationDate: new Date(), // current datetime in GMT
      },
    });
    return NextResponse.json({
      message: "Successful Insertion id:" + newChatResponse.id,
    });
  } catch (error) {
    const err = error as Error;
    return NextResponse.json({ error: err.message }, { status: 500 });
  }
}

[HamAndRock]

No he is refering to pages being server components and the ability to customize the response status/message like you can in Page router where you have access to response object which you can modify in getServerSideProps().

How will you force a page (server component) in app directory to response with a code 502 when some fetch within that page fails ? You can only use notFound() but that doesn't allow for customization.

[ludwighogstrom]

No he is refering to pages being server components and the ability to customize the response status/message like you can in Page router where you have access to response object which you can modify in getServerSideProps().

How will you force a page (server component) in app directory to response with a code 502 when some fetch within that page fails ? You can only use notFound() but that doesn't allow for customization.

Thanks! Yes, I'm talking about server components here.

[devjiwonchoi]

@ludwighogstrom @danieljee @HamAndRock
Posted #53225 before working on it, can you confirm if this is what you are requesting?