Next.js Discord

Discord Forum

How to capture error when Server Action throw Error ?

Answered
Chinese perch posted this in #help-forum
Open in Discord
Chinese perchOP
Hi. Title says all.
When Server Action throws error, Is it possible to capture error on client-side ?
I tried ErrorBoundary Component but It didn't work well.

thank you
Answered by joulev
oh i see where the bug is. when the error is thrown, the component that runs the action is terminated, so the error boundary has to be outside that component. this works:

"use client";

import { ErrorBoundary } from "react-error-boundary";
import { action } from "./actions";

function Form() {
  return (
    <form action={action}>
      <button>Click me</button>
    </form>
  );
}

export default function Page() {
  return (
    <ErrorBoundary fallback={<div>Whoops</div>}>
      <Form />
    </ErrorBoundary>
  );
}
View full answer

11 Replies

Chinese perchOP
@joulev you mean ErrorBoundary Component works well ? hmm. I tried it but it didn't work well.
anyways, I read article you sent. It might be helpful. thank you !
Chinese perchOP
when server action throws error, next.js crashes
and Server response like below
this is full response message
@Chinese perch when server action throws error, next.js crashes
joulev
oh this. this is the intended behaviour in dev mode. in prod mode it will work well. wait a min lemme grab the documentation part.
relevant parts of the documentation:

Handling Server Errors

If an error is thrown inside a Server Component [or a Server Action], Next.js will forward an Error object (stripped of sensitive error information in production) to the nearest error.js file as the error prop.

[...]

During development, the Error object forwarded to the client will be serialized and include the message of the original error for easier debugging.

– https://nextjs.org/docs/app/building-your-application/routing/error-handling#handling-server-errors

global-error.js [or error.js or error boundaries] is only enabled in production. In development, our error overlay will show instead.

– https://nextjs.org/docs/app/building-your-application/routing/error-handling#handling-errors-in-root-layouts

yeah ik the documentation is messy on this one, but you need prod mode to see the actual error boundary
Chinese perchOP
hmm. I think it might be bug.
( run this on production (vercel hosting). but screen like above shows. )

I tested this 3 ways

1) error.tsx (works well)
2) Suspense Component's fallback (did not work like screenshot)
3) ErrorBoundary Component (It does not compatible with next.js 15 RC. So compile error occurs)

anyways, thank you for kindful answer !
@Chinese perch Hi. Title says all. When Server Action throws error, Is it possible to capture error on client-side ? I tried ErrorBoundary Component but It didn't work well. thank you
joulev
oh i see where the bug is. when the error is thrown, the component that runs the action is terminated, so the error boundary has to be outside that component. this works:

"use client";

import { ErrorBoundary } from "react-error-boundary";
import { action } from "./actions";

function Form() {
  return (
    <form action={action}>
      <button>Click me</button>
    </form>
  );
}

export default function Page() {
  return (
    <ErrorBoundary fallback={<div>Whoops</div>}>
      <Form />
    </ErrorBoundary>
  );
}
Answer
Chinese perchOP
it works !! thank you ! 🙂