To handle the error correctly and showing the client the supposed error, you need to integrate error handling. You done that, as far as I see here. If you want an easier and more developer friendly solution, you might want to take a look at next-safe-action (https://next-safe-action.dev/docs/safe-action-client/initialization-options#handleservererrorlog). Not for a safe-server-action, but more for the error handling. It's pretty simple and you can decide if you throw an error with the message that the client can read (everytime) or if you want to throw an error, that the client shouldn't be able to read. It really simple. Very much recommended and should solve your problem

This is a useful blog as well about that topic: https://joulev.dev/blogs/throwing-expected-errors-in-react-server-actions

@B33fb0n3 Thanks for the information. I've used next-safe-actions but stopped using it and went with tanstack-query&trpc.

Do you think what I'm doing is a nice solution or rather a wrong one ?

Let's say I call a server action on form submit that creates a user, the response from the external server is {data: null, errors: [{code: "user_exists", message: "User with this email already exists"}]}.

Now as I said we can't type if (errors.length > 0) throw new Error(response.errors[0].message) or whatever and expect onError callback (Tanstack/query) to receive this error in production because it won't.

What I do is simply return the whole object -> return response;

This will trigger the global onSuccess callback. from there I do what I've provided in the screenshot.

I just am not sure if that's a nice approach and I would like some feedback that is a nice way indeed.

I've used next-safe-actions but stopped using it and went with tanstack-query&trpc.

why you stopped using it? next-safe-actions is for client mutations (server actions, but nice) and trpc & rq is for SS and client fetching. I am using both ^^

the response from the external server is {data ...

I done that in the past as well and was happy with it. However I have not enought controll about is and (as you see now) the solution is pretty hard to maintain. So I switched to more controll and better maintainability.

I am now using a combination of next-safe-action and rq (and of course a backend to fetch stuff from) to handle and maintain everything easily. I recommend you the same (to have less problems, more maintainabilty and more controll)

@B33fb0n3 Interesting to hear you are using both safe-server-actions and trpc&react-query. I might give it a shot as well, just by looking at it seems like hell for DX.

Right now Im only using trpc&rq, for mutations I'm passing server actions directly into useMutation that I import from rq.

I might give it a shot as well, just by looking at it seems like hell for DX.

do you want to see how I working with it? For me it's a very good DX

Right now Im only using trpc&rq, for mutations I'm passing server actions directly into useMutation that I import from rq.

interesting. Can I see an code example?

@B33fb0n3 That would be nice, how can I check out your setup ?

here you can see some examples:
https://paste.gg/p/B33fb0n3/7e0a1ef9804441b6a7cf1a4a9ed05446

As you can see, the hooks a pretty simple to write and also the fetching is pretty easy

@B33fb0n3 I would like to see what a server action looks inside and what handleActionError is if possible

I updated the paste with the few server actions and the handleActionError. Normally you don't fetch via server actions because of some disadvantages, but in this case, these disadvantages are not that important for me

Yeah because server actions don't run in parallel, thanks a lot for the code, Ill give it a try

yea, that's for example. Do you think it's complicated code? Have you done it differently? What do you now think about working with next-safe-actions and rc?

I need to experiment with it. I just think it's too much to introduce 3 different things, next-safe-actions, react-query and trpc. I think trpc can handle server actions too ?

I am not quite sure about trpc. I never used it, so I can't give you a clear advice about that. However using this kind of combination is pretty easy for me. Maybe for you in the future as well, if you experiemnt a bit with it. Do you need anything else?

@B33fb0n3 Hopefully brother 🙌 , btw why don't u pass server actions into react query's useMutation ?

I like to use the libraries for what they are build for and then make a clean cut between them. For me rq is a client side fetching library and for me next-safe-action is a better way to execute server actions. And I deal with them like that. So I don't want to use mutations (server actions) from rq. I also wouldn't fetch with next-safe-action

Aight brother, thanks a lot for your point of view in the matter 💪

Solved!

how do i do that hahaha

like this

or on phone hold your finger on the solving message and then the same steps 👍

@B33fb0n3 Sorry to interrupt, can you check this one whenever you are free, https://github.com/TheEdoRan/next-safe-action/discussions/192