In the world of web development, ensuring smooth error handling is crucial, especially when it comes to server actions. The topic of handling errors in server actions and effectively presenting them to users in the UI has sparked a lively discussion among developers.

The Current Challenges

Server actions in Next.js come with their fair share of limitations. Firstly, there's a lack of built-in mechanisms to return responses for success, input validation, and unexpected errors. When errors are thrown in server actions, they can't be easily utilized in the UI. Additionally, getting action results in server components has its own set of challenges. There are also issues related to error serialization and status code control. For instance, directly throwing errors, which might seem like an obvious approach, doesn't yield the desired results.

Exploring Solutions

1. Refer to the Updated Docs

The official documentation is always a great starting point. Check out the updated docs at https://rc.nextjs.org/docs/app/building-your-application/routing/error-handling for the latest information and best practices on error handling in the context of server actions.

2. Leverage useFormState

useFormState from react-dom can be a powerful tool. You can follow examples like https://stackblitz.com/edit/vitejs-vite-qmhsah or those in the official Next.js docs to understand how to use it effectively. By using useFormState, you can track the state of form submissions, which can be extended to handle server action errors. For example, you can create a custom SubmitButton component using useFormState to not only track action states but also display appropriate error messages to the user.

// app/components/SubmitButton.tsx
import { useFormState } from "react-dom";
export function SubmitButton({ children, onSubmit }: { children: React.ReactNode, onSubmit: () => Promise<void> }) {
  const { pending, error } = useFormState();
  return (
    <button type="submit" disabled={pending} aria-busy={pending}>
      {pending ? "Submitting..." : children}
      {error && <div className="error-message">{error.message}</div>}
    </button>
  );
}

3. Wait for useActionState

React's built-in useActionState hook, once available, will be a great way to track the last result of an action. This can potentially simplify the process of handling errors as it will provide a straightforward way to access the outcome of server actions.

4. Use useFormStatus

useFormStatus is another useful hook. It can be employed to track the overall status of a form, allowing you to display error or success messages based on the form's state. This can be especially handy when dealing with server actions that are related to form submissions.

5. Custom Object or Class for Server Response Management

You can create a class or object to manage server response messages. This object can handle different types of responses, such as success, error, or validation failure. Additionally, you can use it to revalidate the page and update the UI accordingly, providing a seamless user experience.

6. Passing State from Server to Client Components

When passing state from server to client components, consider putting the state object outside the components. This can help in better management and access of the state, which can include error information from server actions.

7. Using redirect with Query Params

In server actions, you can call redirect and include the error message as a query parameter in the URL. However, this approach has its limitations, especially in terms of security and the amount of information that can be passed in the query string.

8. HTTP Sessions

While HTTP sessions can be used to handle server action errors, they are not recommended for simple cases. Sessions add an extra layer of complexity and might not be the most efficient solution for basic error handling scenarios.

9. next-safe-action Library

The next-safe-action library is worth exploring. It supports middleware and can assist with managing response status, which can be very helpful in handling errors in server actions.

// app/actions/createPost.ts
import { safeAction } from "next-safe-action";
export const createPost = safeAction(async (formData: FormData) => {
  try {
    // 业务逻辑
    return { success: true, message: "Post created!" };
  } catch (error) {
    return {
      success: false,
      error: "Failed to create post",
      status: 500,
    };
  }
});

10. Transitions and toast.promise

Using transitions and toast.promise can be an effective way to handle action states. You can use them to show loading states, success messages, or error toasts, providing visual feedback to the user during server action execution.

11. Custom Wrapper Function

Create a custom wrapper function to handle errors in server actions. This function can encapsulate the error handling logic, making the code more modular and easier to maintain.

12. Check Canary Versions

If you're facing issues with useActionState or other features related to error handling in server actions, it might be worth checking the canary versions of Next.js. These versions often contain the latest bug fixes and improvements that could address your problems.

In conclusion, while error handling for server actions in Next.js has its challenges, there are numerous creative solutions available. By exploring these options and combining them based on your project's requirements, you can build a robust error handling system that provides a great user experience.