Kenapa Cara Membuat Error Boundary App Router Next Js Wajib Pakai File Error.Tsx

Ditulis oleh Next.js

Cara membuat error boundary App Router Next.js yang benar adalah membuat file error.tsx sejajar dengan page.tsx di segmen yang ingin dilindungi, lalu tandai sebagai Client Component. File ini otomatis membungkus semua child di segmen itu dan menampilkan UI fallback saat ada error render atau runtime. Tanpa file ini, satu error kecil bisa meruntuhkan seluruh halaman.

File error.tsx Bekerja Hanya di Segmen Aktif

Boundary di App Router tidak bersifat global secara default. File error.tsx hanya menangkap error dari segmen child di folder yang sama ke bawah.

Artinya error di app/dashboard/page.tsx ditangkap oleh app/dashboard/error.tsx, bukan oleh error boundary di segmen lain. Error di file layout yang sama tidak tertangkap, begitu juga 404 yang ditangani not-found.tsx.

Boundary ini wajib Client Component. React membutuhkan state dan lifecycle error untuk menahan render yang gagal, dan itu hanya tersedia di client.

Langkah Membuat error.tsx dan Tombol Coba Lagi

  1. Buat file app/dashboard/error.tsx dengan props error dan reset. Props ini disediakan Next.js secara otomatis.
  2. Tampilkan pesan aman untuk user plus tombol dengan onClick={reset} agar Next.js mencoba render ulang segmen tersebut.
  3. Uji dengan throw new Error bersyarat di page atau Server Component child, lalu baca log lengkap di terminal server, bukan console browser.
'use client';

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <div>
      <h2>Terjadi kesalahan.</h2>
      <button onClick={() => reset()}>Coba lagi</button>
    </div>
  );
}

BACA JUGA:

Perbandingan error.tsx dan global-error.tsx

Lokasi Menangkap Apa Catatan
app/dashboard/error.tsx Error segmen dashboard Butuh use client
app/global-error.tsx Error root layout Wajib html dan body sendiri

Pakai global-error.tsx di root app hanya untuk error yang lolos dari root layout. Jangan pakai boundary untuk error middleware, Route Handler, atau error build karena alurnya berbeda.

Kesalahan Umum Saat Boundary Tidak Jalan

  • File ditaruh di folder parent yang salah sehingga tidak membungkus page yang error. Pindahkan sejajar dengan page target.
  • Boundary ditulis sebagai Server Component sehingga hook error gagal. Tambahkan use client di baris pertama.
  • Error asli ditelan tanpa logging dan stack ditampilkan ke user. Catat error ke layanan log di server, tampilkan pesan umum saja.
  • Tombol reset dikira memperbaiki data rusak. Reset hanya render ulang, tidak memperbaiki penyebabnya.

FAQ

Apakah error.tsx bisa menangkap error Server Component? Ya, selama boundary berada di parent segmen Client Component.

Ya. Boundary Client Component di parent tetap menangkap error render dari Server Component child.

Kapan memakai global-error.tsx? Hanya untuk error yang lolos dari root layout dan boundary biasa.

Pakai hanya saat root layout sendiri gagal sehingga boundary biasa tidak bisa tampil.

Apakah reset() selalu memulihkan halaman? Tidak, reset hanya mencoba render ulang bila penyebab sementara sudah hilang.

Tidak. Jika data atau kode penyebab error belum diperbaiki, halaman akan error lagi.

Artikel Terkait