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.

Practice

1. What is the main purpose of using try...catch blocks inside Next.js server actions?

easy

A. To manage state in React components

B. To improve client-side rendering speed

C. To catch errors and handle them gracefully during server-side operations

D. To style components dynamically

Solution

1. Step 1: Understand server actions role

   Server actions run on the server and can fail due to errors like invalid input or database issues.

2. Step 2: Purpose of try...catch

   Using try...catch allows catching these errors and responding properly instead of crashing the app.

3. Final Answer:

   To catch errors and handle them gracefully during server-side operations -> Option C

4. Quick Check:

   Error handling = To catch errors and handle them gracefully during server-side operations [OK]

Hint: Try...catch in server actions catches server errors [OK]

Common Mistakes:

• Confusing client-side state management with server error handling
• Thinking try...catch improves UI styling
• Assuming try...catch speeds up rendering

2. Which of the following is the correct syntax to throw an error inside a Next.js server action?

easy

A. throw new Error('Invalid input')

B. raise Error('Invalid input')

C. error('Invalid input')

D. throw Error: 'Invalid input'

Solution

1. Step 1: Recall JavaScript error throwing syntax

   JavaScript uses throw new Error('message') to create and throw errors.

2. Step 2: Check options for correct syntax

   Only throw new Error('Invalid input') matches the correct syntax; others use invalid keywords or formats.

3. Final Answer:

   throw new Error('Invalid input') -> Option A

4. Quick Check:

   Throw error syntax = throw new Error('Invalid input') [OK]

Hint: Use 'throw new Error(message)' to throw errors [OK]

Common Mistakes:

• Using 'raise' instead of 'throw'
• Missing 'new' keyword before Error
• Incorrect punctuation in throw statement

3. Consider this Next.js server action code:

export async function addUser(data) {
  try {
    if (!data.name) throw new Error('Name is required');
    // pretend to save user
    return { success: true };
  } catch (error) {
    return { success: false, message: error.message };
  }
}

What will addUser({}) return?

medium

A. { success: false, message: 'Name is required' }

B. { success: true }

C. Throws an uncaught error

D. Returns undefined

Solution

1. Step 1: Analyze input and error condition

   The input object is empty, so data.name is falsy, triggering the error throw.

2. Step 2: Understand catch block behavior

   The thrown error is caught, and the function returns an object with success: false and the error message.

3. Final Answer:

   { success: false, message: 'Name is required' } -> Option A

4. Quick Check:

   Error caught returns failure object = { success: false, message: 'Name is required' } [OK]

Hint: Empty name triggers error, caught returns failure object [OK]

Common Mistakes:

• Assuming error is uncaught and crashes
• Expecting success true despite missing name
• Thinking function returns undefined

4. Identify the error in this Next.js server action code:

export async function updateUser(data) {
  try {
    if (!data.id) throw Error('User ID missing');
    // update logic
  } catch {
    return { error: 'Update failed' };
  }
}

medium

A. Try block should not throw errors

B. Missing parentheses in throw statement

C. Function must return a value on success

D. Catch block missing error parameter

Solution

1. Step 1: Check throw statement syntax

   The throw statement is valid without 'new', so no syntax error there.

2. Step 2: Inspect catch block syntax

   The catch block lacks an error parameter, which is allowed in modern JS but prevents accessing error details inside catch.

3. Step 3: Evaluate best practice

   Without error parameter, you cannot log or use the error object, which is a common mistake in error handling.

4. Final Answer:

   Catch block missing error parameter -> Option D

5. Quick Check:

   Catch needs error param to handle error details [OK]

Hint: Always include error parameter in catch for details [OK]

Common Mistakes:

• Assuming throw without new is invalid
• Ignoring missing return on success
• Thinking try should never throw

5. You want to create a Next.js server action that validates user input and throws an error if the email is invalid. Which approach correctly combines validation and error handling?

hard

A. Throw error outside try block and catch inside to handle validation

B. Use try...catch to validate email format and throw new Error if invalid, then catch and return error message

C. Validate email on client only; server action should not throw errors

D. Return error messages without throwing errors in server actions

Solution

1. Step 1: Understand server action validation

   Server actions should validate inputs and throw errors if invalid to prevent bad data.

2. Step 2: Proper error handling pattern

   Use try...catch to throw new Error on invalid email and catch it to return a clear message.

3. Step 3: Evaluate options

   Use try...catch to validate email format and throw new Error if invalid, then catch and return error message correctly uses try...catch with throwing errors; others either skip server validation or misuse error handling.

4. Final Answer:

   Use try...catch to validate email format and throw new Error if invalid, then catch and return error message -> Option B

5. Quick Check:

   Validate + throw + catch = Use try...catch to validate email format and throw new Error if invalid, then catch and return error message [OK]

Hint: Validate input inside try, throw error, catch and return message [OK]

Common Mistakes:

• Skipping server-side validation
• Throwing errors outside try block
• Returning errors without throwing