Error handling in server actions in NextJS - Performance & Optimization

Performance: Error handling in server actions

MEDIUM IMPACT

This affects the responsiveness and stability of server actions, impacting how quickly errors are detected and handled without blocking the UI.

Handling errors in server actions to avoid blocking UI updates

NextJS

export async function action(data) {
  try {
    const result = await fetch('/api/process', { method: 'POST', body: JSON.stringify(data) });
    if (!result.ok) throw new Error('Failed request');
    return await result.json();
  } catch (error) {
    return { error: error.message };
  }
}

Catching errors and returning a controlled error object allows the UI to update immediately with feedback, avoiding blocking.

📈 Performance GainNon-blocking UI update, reduces INP by 100-300ms compared to unhandled errors

Handling errors in server actions to avoid blocking UI updates

NextJS

export async function action(data) {
  try {
    const result = await fetch('/api/process', { method: 'POST', body: JSON.stringify(data) });
    if (!result.ok) throw new Error('Failed request');
    return await result.json();
  } catch (error) {
    throw error; // rethrow without handling
  }
}

Rethrowing errors without handling causes unhandled promise rejections, blocking UI updates and causing poor user experience.

📉 Performance CostBlocks rendering until error bubbles up, increasing INP by 100-300ms depending on network

Performance Comparison

Pattern	Server Blocking	UI Blocking	Error Feedback Speed	Verdict
Rethrow errors without handling	No blocking on server but unhandled promise rejection	Blocks UI update until error bubbles	Slow feedback, delayed error display	[X] Bad
Catch errors and return error object	No blocking	Immediate UI update with error	Fast feedback, smooth user experience	[OK] Good
Synchronous infinite loop on error	Blocks server event loop	Blocks all UI updates	No feedback, server freeze	[X] Bad
Log error and return controlled message	No blocking	Immediate UI update	Fast feedback, stable server	[OK] Good

Rendering Pipeline

Error handling in server actions affects the server response phase and the client update phase. Proper handling ensures the server sends a timely response and the client can render error states without delay.

→Server Processing

→Network Response

→Client Rendering

⚠️ BottleneckServer Processing when errors are unhandled or blocking

Core Web Vital Affected

INP

This affects the responsiveness and stability of server actions, impacting how quickly errors are detected and handled without blocking the UI.

Optimization Tips

1Always catch errors in server actions to prevent unhandled promise rejections.

2Avoid synchronous blocking code in error handlers to keep the server responsive.

3Return structured error responses to enable fast client UI updates.

Performance Quiz - 3 Questions

What is the main performance risk of rethrowing errors without handling in Next.js server actions?

A It blocks UI updates causing slow interaction response

B It increases bundle size significantly

C It causes layout shifts on the page

D It improves server response time

DevTools: Performance

How to check: Record a performance profile while triggering server actions with errors. Look for long tasks or blocked frames during error handling.

What to look for: Check for long blocking tasks on the main thread or server response delays indicating poor error handling.