Manejo de Errores

EmpiezaTuSaaS incluye manejo de errores completo: páginas de error personalizadas, notificaciones toast y patrones try-catch en las API routes.

Páginas de error

Error global (`error.tsx`)

Next.js captura automáticamente los errores no controlados y muestra app/error.tsx. Este componente recibe el error y una funcion reset() para reintentar.

app/error.tsx

"use client";

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="text-center">
        <h2 className="text-2xl font-bold mb-4">Algo salio mal</h2>
        <p className="text-muted-foreground mb-6">{error.message}</p>
        <button onClick={reset}>Reintentar</button>
      </div>
    </div>
  );
}

error.tsx debe ser un Client Component ("use client"). Es un requisito de Next.js.

Página 404 (`not-found.tsx`)

Cuando un usuario visita una ruta que no existe, Next.js renderiza app/not-found.tsx:

app/not-found.tsx

export default function NotFound() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="text-center">
        <h1 className="text-6xl font-bold">404</h1>
        <p className="text-muted-foreground mt-4">Página no encontrada</p>
        <a href="/" className="text-primary mt-6 inline-block">
          Volver al inicio
        </a>
      </div>
    </div>
  );
}

Notificaciones Toast

El boilerplate usa Sonner para notificaciones toast. Ya está configurado en el layout principal.

Uso básico

import { toast } from "sonner";

// Exito
toast.success("Pago procesado correctamente");

// Error
toast.error("No se pudo procesar el pago");

// Promesa (loading -> success/error)
toast.promise(fetchData(), {
  loading: "Cargando...",
  success: "Datos cargados",
  error: "Error al cargar datos",
});

Configuración

Sonner ya está incluido en app/layout.tsx con el componente <Toaster />:

app/layout.tsx

import { Toaster } from "sonner";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Toaster richColors position="bottom-right" />
      </body>
    </html>
  );
}

Try-catch en API Routes

Todas las API routes siguen el patron try-catch con respuestas JSON estandarizadas:

app/api/ejemplo/route.ts

import { NextResponse } from "next/server";

export async function POST(req: Request) {
  try {
    const body = await req.json();

    // Tu lógica aqui...

    return NextResponse.json({ success: true, data: result });
  } catch (error) {
    console.error("Error en /api/ejemplo:", error);
    return NextResponse.json(
      { error: "Error interno del servidor" },
      { status: 500 }
    );
  }
}

Nunca expongas el mensaje de error real al cliente en producción. Usa mensajes genericos y loguea el error real en el servidor.

Personalizacion

Cambiar estilo de la página 404: Edita app/not-found.tsx con tu diseno
Cambiar posicion del toast: Cambia position en <Toaster /> (top-right, bottom-left, etc.)
Añadir error tracking: Integra Sentry en error.tsx para capturar errores en producción

Manejo de Errores

On this page