Error handling in server actions in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a server action throws an error?

Consider a Next.js server action that throws an error during execution. What will the client see if the error is not caught inside the action?

NextJS

export async function action() {
  throw new Error('Failed to save data');
}

export default function Page() {
  async function handleSubmit() {
    await action();
  }
  return <button onClick={handleSubmit}>Submit</button>;
}

A The server action retries automatically until it succeeds without notifying the client.

B The error is automatically caught and displayed as a toast notification on the client.

C The client sees the error message 'Failed to save data' rendered inside the button element.

D The client receives a generic 500 server response and the button click fails silently.

💡 Hint

Think about what happens when errors are not caught in server code called from the client.

If a server action throws an error and it is not caught, Next.js will respond with a 500 error. The client receives the error as a rejected promise but since it is not handled, the UI will fail silently.

📝 Syntax

intermediate

Which server action syntax correctly catches errors?

Choose the server action code snippet that correctly catches errors and returns a custom message.

A

export async function action() {
  try {
    // some code
  } catch (e) {
    return { error: e.message };
  }
}

B

export async function action() {
  try {
    // some code
  } finally {
    return { error: 'error' };
  }
}

C

export async function action() {
  catch (e) {
    return { error: e.message };
  }
  // some code
}

D

export async function action() {
  try {
    // some code
  } catch {
    return { error: e.message };
  }
}

💡 Hint

Remember the correct try-catch syntax in JavaScript and how to access the error object.

Option A uses the correct try-catch syntax and accesses the error message properly. Option A has a misplaced catch block. Option A uses finally incorrectly to return an error. Option A misses the error parameter in catch.

❓ state_output

advanced

What is the state of the component after a server action error?

Given this Next.js component with a server action that throws an error caught and stored in state, what will be rendered after clicking the button?

NextJS

import { useState } from 'react';

export async function action() {
  throw new Error('Save failed');
}

export default function Page() {
  const [error, setError] = useState(null);

  async function handleClick() {
    try {
      await action();
    } catch (e) {
      setError(e.message);
    }
  }

  return (
    <>
      <button onClick={handleClick}>Save</button>
      {error && <p role="alert">Error: {error}</p>}
    </>
  );
}

A The button disappears and only the error message is shown.

B The button remains visible and the paragraph 'Error: Save failed' appears below it.

C Nothing changes visually because errors in server actions do not affect client state.

D The page reloads automatically showing a blank screen.

💡 Hint

Consider how React state updates after catching an error in an async function.

The error is caught and stored in state. React re-renders showing the error message below the button. The button remains visible.

🔧 Debug

advanced

Why does this server action error not appear on the client?

This server action throws an error, but the client never shows it. What is the most likely cause?

NextJS

export async function action() {
  throw new Error('Oops');
}

export default function Page() {
  async function handleSubmit() {
    await action();
  }
  return <button onClick={handleSubmit}>Submit</button>;
}

A The error is not caught in the client code, so it is swallowed silently.

B Next.js disables error reporting for server actions by default.

C The button's onClick handler is not async, so errors are ignored.

D The server action automatically logs errors but does not send them to the client.

💡 Hint

Think about what happens when an async function throws and no try-catch is used.

If the client code calling the server action does not catch errors, they do not propagate to the UI. The error is lost silently unless caught and handled.

🧠 Conceptual

expert

How should you design server actions for robust error handling?

Which approach best ensures that errors in Next.js server actions are properly communicated and handled on the client?

A Avoid throwing errors in server actions; instead, always return success responses to simplify client code.

B Throw errors in server actions and rely on Next.js to automatically display error messages on the client.

C Catch errors inside the server action and return a structured error object; client checks this object to update UI.

D Use console.log in server actions to debug errors and do not send any error info to the client.

💡 Hint

Think about explicit error communication between server and client.

Best practice is to catch errors inside server actions and return a clear error object. The client can then check this and update the UI accordingly. Relying on automatic error display or ignoring errors leads to poor UX.