properly catch error on server action in production

[smoky inlet]

Hi @rotund blade. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

In production, Next.js hides the original error message to avoid leaking sensitive information. Instead, it provides a generic error message and a digest property. This behavior is a security precaution. However, you can still handle errors in a way that allows you to catch them in client components.

Handling Errors in Server Actions

To properly catch and handle errors in server actions, you can return a plain object with the error message instead of throwing an error. This way, you can customize the error message and send it to the client component.

Here is an example of how you can handle errors in a server action:

import { NextResponse } from 'next/server';

const GET = async () => {
  try {
    throw new Error('ERROR', { cause: { status: 500 } });
  } catch (e) {
    return NextResponse.json({ message: e.message }, { status: e.cause.status });
  }
};

export { GET };

In this example, the error is caught and a JSON response with the error message is returned. This allows the client component to receive the error message without exposing sensitive information.

Reference

For more details on securing sensitive error information in Next.js, you can refer to the official documentation:

• Securing Sensitive Error Information (https://nextjs.org/docs/app/building-your-application/routing/error-handling#securing-sensitive-error-information)

If you need to handle errors in a way that they are caught in client components, you might need to use API routes instead of server actions, as shown in the example above.

Additional Context

If you want to customize the error to the desired value and send it to the Page Components, using API routes might be the best approach. This way, you can control the error message and ensure it is properly handled in the client component.

For more information on handling server errors and securing sensitive error information, you can refer to the following knowledge sources:

• Handling Server Errors (https://nextjs.org/docs/app/building-your-application/routing/error-handling#handling-server-errors)
• Github Issue: Page Components could not catch a server action error (https://github.com/vercel/next.js/issues/63520)

By following these practices, you can ensure that errors are properly caught and handled in your Next.js application, even in production.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@rotund blade kapa.ai is still learning and improving, please let us know how it did by reacting below