CodePark/ questions / Error handling
START PRACTICINGPRACTICE
Frontend question · React › Error handling

Error boundaries do not catch errors from event handlers or async code. How do you handle those errors, and how can they still reach a boundary?

const [error, setError] = useState(null);
if (error) throw error; // handled by the nearest boundary

async function handleSave() {
  try {
    await save();
  } catch (e) {
    setError(e);
  }
}

Catch them locally with try/catch, then store the error in state. To reach a boundary, re-throw the stored error during render.

Local handling. Wrap the async work in try/catch (or .catch). Save the error in state, and render an error message or a retry button. This is usually the best user experience, because the rest of the component keeps working.

Sending it to a boundary. Store the error in state in the catch. In the next render, run if (error) throw error;. Boundaries catch rendering errors, so the nearest one handles it.

Other routes:

  • In React 19, if a function passed to startTransition throws, React shows the error in the nearest error boundary. This includes Actions, the async functions you pass to startTransition or to a form's action.
  • Data libraries such as TanStack Query have options to throw errors to boundaries.
  • For unexpected errors, report them to a logging service. React 19's createRoot accepts onCaughtError and onUncaughtError for this.
  • Catch errors locally with try/catch and store them in state.
  • Re-throw the stored error during render to reach a boundary.
  • In React 19, errors thrown in transitions and Actions go to the nearest boundary.
  • Data libraries can forward errors to boundaries.
  • Log errors with onCaughtError and onUncaughtError on the root.