Generally speaking, you can handle Server Action in three ways:
- You can use the
try/catch
block to catch errors and handle them in thecatch
block. - You can use a React
ErrorBoundary
component to catch errors - You can also use the special
error.tsx
file to handle errors at layout level.
Handling errors from a Server Action invoked by a Form
Let's assume we have a Form using a server action that throws an error:
async function serverActionWithError() {
'use server';
throw new Error(`This is error is in the Server Action`);
}
function FormWithServerAction() {
return (
<form action={serverActionWithError}>
<button>Submit Form</button>
</form>
);
}
export default FormWithServerAction;
We can wrap our form using the ErrorBoundary
component we have at ~/core/ui/ErrorBoundary
, and handle the error from there:
import ErrorBoundary from '~/core/ui/ErrorBoundary';
import FormWithServerAction from './Form';
function FormWithErrorBoundary() {
return (
<ErrorBoundary fallback={<p>Something went wrong</p>}>
<FormWithServerAction />
</ErrorBoundary>
);
}
If you click on the button, you'll see the error message rendered.
Handling errors from an imperatively invoked Server Action
If you are invoking a Server Action imperatively, we can wrap the useTransition
hook in a try/catch
block, and handle the error from there.
Let's assume we have a Server Action that throws an error:
'use server';
export async function serverActionWithError() {
throw new Error(`This is error is in the Server Action`);
}
We can invoke it imperatively from a client component, and handle the error from there:
'use client';
import { useTransition } from 'react';
import { serverActionWithError } from './actions';
function ImperativeServerAction() {
const [pending, startTransition] = useTransition();
return (
<button
disabled={pending}
onClick={() => {
startTransition(async () => {
try {
await serverActionWithError()
} catch (e) {
alert('error');
}
});
}}
>
Click Button
</button>
);
}
export default ImperativeServerAction;
If you click on the button, you'll see the alert
popup with the error message.