Why console errors disapear when passing the error from a serverAction?

[gcb]

any call to console.error(...) that includes the reference trhow by a call to a server action (as caught by try/catch when using await or .catch(), disappears!

here's a working minimal test case started from the latest version https://github.com/gcb/react_test_case_useActionState/blob/main/app/server-action-client.tsx#L27-L31
(myServerActionDenied() will return a 403, and trigger the catch(err))

[SametDulger]

Hi,

What you’re experiencing is related to how errors thrown from server actions are handled in the Next.js/React Server Actions framework.

When an error is thrown inside a server action and caught on the client side (e.g., with try/catch or .catch()), the original error stack or message might not be fully preserved or logged as you expect. Instead, the error often gets serialized and re-thrown across the client-server boundary, which can cause console.error to show less or no output.

Some points to consider:

Error Serialization
Errors crossing from server to client are serialized (converted to JSON-like objects). This can strip properties like stack traces or custom error fields, making them less informative when logged.

React/Next.js Error Handling
React Server Actions and Next.js have their own internal error handling that might intercept or swallow some errors before they reach the browser console.

Asynchronous Context
The console.error call in your client code might be running in a context where the original error details are not fully available due to how promises and server responses are handled.

Workaround suggestions:
Try logging the error inside the server action itself before throwing it to capture the full details.

On the client side, log the caught error but also inspect other properties (e.g., err.message, err.stack, or even the raw response if available).

Use dedicated error reporting or monitoring tools to capture errors on the server side.

This behavior is a known quirk in frameworks that blur the server-client boundary with async server actions, and improvements may come as the feature matures.

[huscse]

This behavior happens because of how React Server Actions and Next.js handle errors and logging during server-client communication.

When you call console.error inside a client component that catches an error thrown from a server action, the error object you receive is often a serialized or proxied version, not the original error. This means the error’s stack trace or message properties might not be fully accessible or logged properly in the client console.

Additionally, React's server actions run on the server, and their logs appear in the server-side console (e.g., terminal or cloud logs), not the browser console. So if you do console.error inside the server action itself, that output goes to the server logs, not the client.

When you catch that error on the client and log it with console.error, you might get an empty or less informative object because:

• The error might be stripped of some properties during serialization.
• React or Next.js could suppress some client-side logging for these proxied errors to reduce noise.

To debug better:

• Log the error inside the server action itself to see the original details.
• On the client, log specific properties like error.message or use JSON.stringify(error) to inspect what’s available.
• Use try/catch blocks on both server and client sides and log accordingly.