useAction and toast.promise

[soulchild]

I have the following server action:

Action

const schema = z.object({ username: z.string() });

export const testAction = actionClient.schema(schema).action(
  async () => {
    returnValidationErrors(schema, {
      username: { _errors: ['Username already exists'] },
    });
  },
  {
    throwValidationErrors: true,
  },
);

… which I'd like to use with toast.promise as follows:

Client Component

'use client';

export default function TriggerAction() {
  const { executeAsync, isPending } = useAction(testAction);

  return (
    <Button
      isPending={isPending}
      onClick={() => {
        toast.promise(executeAsync({ username: 'bar' }), {
          loading: 'Loading',
          success: 'Success',
          error: String(err),
        });
      }}
    >
      Trigger action
    </Button>
  );
}

Unfortunately, I'm unable to retrieve the custom error message in the client component. All I'm getting is a generic Error: Server Action validation error(s) occurred error. What am I missing?

[soulchild]

Is this the only way to get at the validationErrors?

const { execute } = useAction(testAction, {
  onSuccess: () => toast.success('Success'),
  onError: (err) => {
    toast.error(
      `Error: ${JSON.stringify(err.error.validationErrors, null, 2)}`,
    );
  },
});

I really like the toast.promise approach though because it makes it very easy to have one toast which gets updated whenever the state of the action changes… Would be cool if the thrown errors included more than just a generic error message.

[TheEdoRan]

I agree, the issue is that all Server Actions errors get masked on the client, this is a React "limitation". I explained this behavior in detail here.

What I can do is update the generic validation error message to something more specific, or give the user the ability to do that, but keep in mind that the client is just working with an error message, nothing more, so it's not that powerful or flexible.

[soulchild]

Thanks! I understand it's currently impossible to send more useful (validation) error messages to the client.

But I noticed something else: When setting throwServerError to true, so that I can use toast.promise() with executeAsync(), I'm always getting the default server error message. I tried overriding handleServerError(), but this doesn't seem to apply when throwServerError is true:

handleServerError(e) {
  // Whenever I throw a custom ActionError, I want it to
  // end up in the client for displaying it to the user.
  if (e instanceof ActionError) {
    return e.message;
  }

  // Otherwise log the error and return the default error message
  console.error(e);
  return DEFAULT_SERVER_ERROR_MESSAGE;
},

Am I missing something or is this just not possible at the moment?

[soulchild]

@TheEdoRan Is there something I can do to make this work with toast.promise()? Appreciate the help!

[TheEdoRan]

@soulchild Hey, sorry for the delay. I introduced a way to override the validation error message when it's thrown, via the overrideErrorMessage function, passed to the action definition. You can see how it works in the beta docs. Let me know if you think this is a viable solution, and/or if it can be improved in any way. Thanks!

You can install v8 beta with:

npm i next-safe-action@beta