0Pricing
Next.js 15 Fullstack (App Router + Server Actions) · Lección

Gestión de errores en Actions

Implemente estrategias eficaces de gestión de errores dentro de Server Actions para ofrecer información sólida a los usuarios.

Gestión de errores en Actions es una lección gratuita de Next.js 15 Fullstack (App Router + Server Actions) en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Next.js 15 Fullstack (App Router + Server Actions), y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Next.js 15 Fullstack (App Router + Server Actions) incluye 4 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en inglés.

Robust Server Actions

When building applications, things can go wrong! Data might be invalid, a database might be unreachable, or an external API could fail.

Effective error handling in Server Actions is crucial for a smooth user experience and maintaining data integrity. It prevents crashes and provides clear feedback.

The `try-catch` Block

In JavaScript/TypeScript, the fundamental way to handle potential errors is using a try-catch block. It allows you to 'try' executing code and 'catch' any errors that occur.

  • Code inside the try block is executed.
  • If an error occurs, execution jumps to the catch block.
  • The catch block receives the error object, allowing you to handle it gracefully.

Server Action Error Example

Let's look at a simple Server Action that might fail. Imagine an action that divides two numbers, but one could be zero.

Without error handling, a division by zero would crash the action and potentially the client-side form submission.

export async function divideNumbers(formData: FormData) {
  const num1 = Number(formData.get('num1'));
  const num2 = Number(formData.get('num2'));

  if (num2 === 0) {
    throw new Error('Cannot divide by zero!');
  }

  const result = num1 / num2;
  return { success: true, result };
}

Catching Errors on the Server

To prevent the action from crashing, we wrap the risky code in a try-catch block. This allows us to log the error on the server and prevent sensitive error details from reaching the client.

export async function divideNumbers(formData: FormData) {
  try {
    const num1 = Number(formData.get('num1'));
    const num2 = Number(formData.get('num2'));

    if (num2 === 0) {
      throw new Error('Cannot divide by zero!');
    }

    const result = num1 / num2;
    return { success: true, result };
  } catch (error: any) {
    console.error('Action Error:', error.message); // Log on server
    // Do NOT return `error` object directly to client!
    return { success: false, error: 'An unexpected error occurred.' };
  }
}

Returning Client-Friendly Errors

After catching an error on the server, we need to return a meaningful, client-friendly message. This message helps users understand what went wrong without exposing internal server details.

  • Return an object with a success: false flag.
  • Include an error property with a user-friendly message.
  • Avoid sending raw error stack traces to the client for security.

Action with Client Error Return

Here's how our divideNumbers action looks when returning specific error messages to the client:

Notice how different errors get different messages, and a generic message is used for unexpected errors.

export async function divideNumbers(formData: FormData) {
  try {
    const num1 = Number(formData.get('num1'));
    const num2 = Number(formData.get('num2'));

    if (isNaN(num1) || isNaN(num2)) {
      throw new Error('Invalid input: Please enter numbers.');
    }
    if (num2 === 0) {
      throw new Error('Division by zero is not allowed.');
    }

    const result = num1 / num2;
    return { success: true, result };
  } catch (error: any) {
    console.error('Server Action Failed:', error.message);
    return { success: false, error: error.message || 'Unknown error occurred.' };
  }
}

Client-Side Error Display

On the client, after calling a Server Action, you'll receive the returned object. You can then check the success and error properties to update your UI.

This allows you to show an error message to the user, disable parts of the form, or take other corrective actions.

import { useState } from 'react';
import { divideNumbers } from './actions'; // Your Server Action

export default function CalculatorForm() {
  const [message, setMessage] = useState('');

  async function handleSubmit(formData: FormData) {
    const res = await divideNumbers(formData);
    if (res.success) {
      setMessage(`Result: ${res.result}`);
    } else {
      setMessage(`Error: ${res.error}`);
    }
  }

  return (
    <form action={handleSubmit}>
      <input type="number" name="num1" />
      <input type="number" name="num2" />
      <button type="submit">Calculate</button>
      {message && <p>{message}</p>}
    </form>
  );
}

React `useFormState` Hook

For forms, React's useFormState hook is specifically designed to manage state returned by a Server Action. It simplifies displaying feedback (like success or error messages) after a form submission.

It takes your action and an initial state, and returns the current state and an updated action that you pass to your <form>'s action prop.

Using `useFormState` for Errors

Here's how to integrate useFormState to display error messages directly within your form component. It makes handling the action's response very clean.

import { useFormState } from 'react-dom';
import { divideNumbers } from './actions';

const initialState = { success: false, error: '', result: null };

export default function CalculatorForm() {
  const [state, formAction] = useFormState(divideNumbers, initialState);

  return (
    <form action={formAction}>
      <input type="number" name="num1" placeholder="Number 1" />
      <input type="number" name="num2" placeholder="Number 2" />
      <button type="submit">Calculate</button>
      {state.success && <p>Result: {state.result}</p>}
      {!state.success && state.error && <p style={{ color: 'red' }}>{state.error}</p>}
    </form>
  );
}

Handling Server Action Errors

Which of the following is the BEST practice for handling errors caught within a Next.js Server Action?

Recap: Error Handling

You've mastered error handling in Next.js Server Actions!

  • Use try-catch blocks to gracefully handle errors on the server.
  • Log server-side errors for debugging and monitoring.
  • Return client-friendly error messages using a structured object (e.g., { success: false, error: 'message' }).
  • Utilize React's useFormState hook to easily manage and display action results and errors in your forms.

Robust error handling makes your applications more reliable and user-friendly!

Preguntas frecuentes

¿La lección «Gestión de errores en Actions» es gratis?

Sí — el texto completo de «Gestión de errores en Actions» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Next.js 15 Fullstack (App Router + Server Actions), actualiza a CoddyKit PRO. El curso de Next.js 15 Fullstack (App Router + Server Actions) incluye 4 lecciones en total.

¿Qué aprenderé en «Gestión de errores en Actions»?

Implemente estrategias eficaces de gestión de errores dentro de Server Actions para ofrecer información sólida a los usuarios. Practicas Next.js 15 Fullstack (App Router + Server Actions) con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Next.js 15 Fullstack (App Router + Server Actions)?

No se requiere experiencia previa. Next.js 15 Fullstack (App Router + Server Actions) en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Gestión de errores en Actions»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Next.js 15 Fullstack (App Router + Server Actions)?

Sí. Cada lección de Next.js 15 Fullstack (App Router + Server Actions) incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Formularios básicos con Server Actions
  2. Mutación de datos y revalidación
  3. Gestión de errores en Actions
  4. UI optimista y estados pendientes con Server Actions
← Volver a Next.js 15 Fullstack (App Router + Server Actions)