Server-side error handling in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this Next.js server action error handler?

Consider this Next.js server action that throws an error. What will the client receive?

NextJS

export async function action() {
  try {
    throw new Error('Failed to save data')
  } catch (error) {
    return { success: false, message: error.message }
  }
}

A {"success": false, "message": "Failed to save data"}

B The client receives a 500 Internal Server Error response with no JSON body

C The client receives a JSON with { success: true }

D The server crashes and restarts

💡 Hint

Look at what the catch block returns.

The catch block returns a JSON object with success false and the error message. This is sent to the client.

❓ component_behavior

intermediate

How does Next.js handle thrown errors in server components?

If a server component throws an error during rendering, what happens?

NextJS

export default function ServerComponent() {
  throw new Error('Render failed')
  return <div>Should not render</div>
}

A The server silently ignores the error and renders an empty div

B The component renders the error message inside the UI automatically

C Next.js shows a built-in error overlay in development and a 500 error page in production

D The server restarts automatically without showing any error

💡 Hint

Think about Next.js default error handling behavior in dev and prod.

Next.js shows a red error overlay in development for thrown errors and a 500 error page in production.

🔧 Debug

advanced

Why does this Next.js API route fail to send a JSON error response?

Examine this API route code. Why does the client get a 500 error with no JSON?

NextJS

export default function handler(req, res) {
  try {
    throw new Error('Oops')
  } catch {
    res.status(500).json({ error: 'Server error' })
    return;
  }
  res.json({ success: true })
}

A Because the function is missing async keyword

B Because the catch block does not set the status code

C Because the error is not re-thrown after catch

D Because res.json is called twice, causing an error after the catch block

💡 Hint

Look at the flow after the catch block.

The res.json is called twice: once in catch and once after, causing an error and no JSON sent.

📝 Syntax

advanced

Which option correctly throws a custom error in a Next.js server action?

Choose the code that correctly throws a custom error with a message and status code.

A throw new Error('Not found') with status = 404

B const err = new Error('Not found'); err.status = 404; throw err

C throw new Error({ message: 'Not found', status: 404 })

D throw 'Not found' with status 404

💡 Hint

Remember how to add custom properties to Error objects.

Only option B creates an Error object, adds a status property, and throws it correctly.

❓ state_output

expert

What is the final state of errorMessage after this Next.js server action runs?

Given this server action, what is the value of errorMessage after execution?

NextJS

let errorMessage = ''

export async function action() {
  try {
    await Promise.reject(new Error('Failed to fetch'))
  } catch (error) {
    errorMessage = error.message
  }
  return errorMessage
}

A "Failed to fetch"

B "" (empty string)

C undefined

D Promise rejected error

💡 Hint

Check how the catch block sets errorMessage.

The rejected promise triggers the catch block which sets errorMessage to the error's message.