Rethrown ERRORS at handleServerError is not handled by onError in client

[bonadio]

Hi, first thank you for this lib, it is really helping.

When I rethrown an error at handleServerError, it is not handled by onError in client. Is this the intended behavior?
I was expecting to be able to get an onError on the client.

Nextjs 14.2.6 and next-safe-action 7.9.6

Here is my code:

action.ts

'use server';

import { actionClient, ActionError } from "@/lib/safe-action";
import { returnValidationErrors } from "next-safe-action";
import { z } from "zod";

export const testeAction = actionClient
    .schema(z.object({nome: z.string()}))
    .action(async ({parsedInput}) => {
        console.log("parsedInput action", parsedInput)
        throw new Error("Could not login!");
        // return { status: "success", message: "Login successful" };
    }, 
    {
        onSuccess: async (data) => {
            console.log("onSuccess server", data)
        },
        onError: async (error) => {
            console.log("onError server", error)
        },
        onSettled: async (args) => {
            console.log("onSettled server", args)
        }
    }
);

Client code

"use client"
import { testeAction } from "./actions"
import { useAction } from "next-safe-action/hooks"


export default function TestedPage() {
    const testeAct = useAction(testeAction,{
        onSuccess: async (data) => {
            console.log("onSuccess client", data)
        },
        onError: async (error) => {
            console.log("onError client", error)
        },
        onSettled: async (args) => {
            console.log("onSettled client", args)
        }
    })

    const submit = async (formData: FormData) => {
        try {
            const result = await testeAct.executeAsync({nome: "teste"})
            console.log("result client", result)
        } catch (error) {
            console.error("error client try catch", error)
            // alert("error client")
        }
    }

    return (
        <div>
            <form action={submit}>
            <button type="submit">Submit</button>
            </form>
        </div>
    );
}

action client

import {
	DEFAULT_SERVER_ERROR_MESSAGE,
	createSafeActionClient,
} from "next-safe-action";

export class ActionError extends Error {}
export const actionClient = createSafeActionClient({
    // Can also be an async function.
    handleServerError: (e, utils) => {
		console.error("Action server error occurred:", e.message);
		// If the error is an instance of `ActionError`, unmask the message.
		if (e instanceof ActionError) {
			return e.message;
		}
        throw e // <--- throw the error to be handled by the client
		// // Otherwise return default error message.
		// return DEFAULT_SERVER_ERROR_MESSAGE;
    },
});

Thanks

[TheEdoRan]

Hi, yes, this is the expected behavior. onError lets you run code when a serverError or a validationError occurs. The hook doesn't catch rethrown errors. If you think this would be useful, I could add an hook option for catching thrown errors on the client.

[bonadio]

Hi @TheEdoRan,

I think that would be nice to have, it would eliminate the need for the try/catch on the client code

        try {
            const result = await testeAct.executeAsync({nome: "teste"})
            console.log("result client", result)
        } catch (error) {
            console.error("error client try catch", error)
        }

Would be just. And all errors could be treated at the onError function

            const result = await testeAct.executeAsync({nome: "teste"})
            console.log("result client", result)

I created this customHook that does that

import { useAction } from "next-safe-action/hooks";

export function useCustomAction<ActionInput, ActionOutput>(
    action: any,
    options?: any
) {
    const actionHook = useAction(action, options);

    const executeAsync = async (input: ActionInput) => {
        try {
            return await actionHook.executeAsync(input);
        } catch (error) {
            if (options?.onError) {
                await options.onError(error as Error);
            } else {
                throw error;
            }
        }
    };

    return {
        ...actionHook,
        executeAsync,
    };
}```

[TheEdoRan]

By default I don't want to let onError process thrown server errors. next-safe-action already catches all server errors by default, and you can customize that behavior inside handleServerError to return actual error messages, if you want. You can also re-throw them, like you're doing, but doing so will obviously throw errors when calling the action from client, and I don't plan to change that. If you want to throw all the errors for your actions (changing the default library handling), then you'll also need to use try/catch when calling actions.

What I can do, though, is to add an option for all the hooks called something like catchThrownServerErrors, that changes the behavior of the hooks themselves to, well, catch thrown server errors, so you can process it however you want inside of onError. But be aware that using direct execution or executeAsync will still throw errors.

[bonadio]

I am trying to avoid to have to handle errors in different places, like having onErrors and try/catch. Like for network erros the server will not get them and it will blow on the try/catch.

If this option still requires adding a try/catch, I don't think it is worth it.

[TheEdoRan]

Maybe something like this works for you? Source: handleServerError docs.

import { createSafeActionClient } from "next-safe-action";

class MyError extends Error {}

export const actionClient = createSafeActionClient({
  handleServerError(e) {
    if (e instanceof MyError) {
      return e.message;
    }
    return "Something went wrong";
  }
});

This way you can handle all server errors inside onError callback.

[bonadio]

I am doing that, but if you disconnect the network and invoke the action again in the client, it will break if you don't have a try/catch