dexblog.ro
Acces rapid: Învață AI Învață Programare Specificații Dispozitive Comparații
NEX Toate comenzile Next.js

app/error.tsx – Gestionarea erorilor neașteptate (Error Boundary) în Next.js

Structură App Router și Fișiere Speciale Next.js 13+ (App Router)

Izolează erorile din componentele copil și afișează o interfață prietenoasă de recuperare cu buton de reîncercare.

Sintaxă 
'use client';
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return <button onClick={() => reset()}>Reîncearcă</button>;
}

Ce face app/error.tsx - Gestionarea erorilor neașteptate (Error Boundary)

Fișierul error.tsx creează un Error Boundary React care interceptează excepțiile neprinse din `page.tsx` sau din subrută.

Izolează problema: dacă o secțiune din pagină crapă, restul aplicației (antetul, meniul) rămâne perfect funcțional.

Fișierul trebuie să fie obligatoriu o componentă de client ('use client') pentru a putea gestiona evenimentul de resetare `reset()`.

Exemple

Exemplul 1: Afișarea unui mesaj de eroare cu opțiune de reîncercare

Permite utilizatorului să repete cererea dacă a fost o problemă temporară de rețea.

'use client';

import { useEffect } from 'react';

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error('Eroare interceptată în pagină:', error);
  }, [error]);

  return (
    <div className="p-6 bg-red-50 border border-red-200 rounded-lg">
      <h2 className="text-xl font-bold text-red-700">Ceva nu a funcționat corect!</h2>
      <p className="text-red-600 my-2">{error.message || 'Eroare neașteptată de server.'}</p>
      <button
        onClick={() => reset()}
        className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
      >
        Încearcă din nou
      </button>
    </div>
  );
}

Ieșire în terminal

Interfață de recuperare afișată elegant fără căderea întregului site.

Greșeli frecvente

  • Omiterea directivei ”use client”; Next.js va raporta eroare de compilare deoarece Error Boundaries necesită ciclu de viață React pe client.

Comenzi înrudite