Advanced · Level 10: Next.js App RouterAdvanced65 menitBahasa Indonesia

error.tsx

Menambahkan error UI pada route segment dan menyediakan tindakan recovery yang jelas untuk user.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan peran error.tsx sebagai error boundary route segment
Menempatkan "use client" pada error UI yang menyediakan recovery
Membuat pesan error dan tombol coba lagi yang jelas

Next.jsError UIError BoundaryClient ComponentsRecovery

Isi lesson

5 blok

1.
Error UI menjaga route tetap dapat dipulihkanBelum selesaiWajib
2.
Error UI untuk route coursesBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Jangan gunakan error.tsx untuk semua jenis masalahBelum selesaiWajib
5.
RingkasanBelum selesaiWajib

Error UI menjaga route tetap dapat dipulihkan

Wajib

loading.tsx membantu saat content belum siap. error.tsx menangani error tak terduga saat route segment sedang dirender, lalu menampilkan fallback alih-alih membiarkan seluruh area tampak rusak. Karena error UI biasanya perlu tombol recovery dan event handler, file ini adalah Client Component dan memakai "use client".

Untuk versi Next.js yang digunakan project ini, callback recovery pada contoh resmi bernama unstable_retry. Ia meminta Next.js mencoba merender ulang segment yang gagal. Kamu tidak perlu menghafal detail implementasinya sekarang. Yang penting: tampilkan pesan yang tenang, jangan bocorkan detail teknis ke user, dan sediakan tindakan yang berarti bila recovery aman dilakukan.

Bagian ini memengaruhi progres lesson.

Error UI untuk route courses

Wajib

tsx

// app/courses/error.tsx
"use client";

type CourseErrorProps = {
  error: Error & { digest?: string };
  unstable_retry: () => void;
};

export default function CourseError({
  error,
  unstable_retry,
}: CourseErrorProps) {
  console.error(error);

  return (
    <section role="alert">
      <h1>Daftar course belum bisa dimuat</h1>
      <p>Coba muat ulang bagian ini beberapa saat lagi.</p>
      <button type="button" onClick={() => unstable_retry()}>
        Coba lagi
      </button>
    </section>
  );
}

error.tsx berada di folder courses sehingga menjadi boundary untuk segment itu. Directive berada sebelum type atau import. Error teknis dicatat untuk developer, sedangkan user mendapat pesan yang menjelaskan keadaan dan tombol recovery. Error boundary ini bukan pengganti penanganan error pada event handler yang berjalan setelah proses render.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Build course error recovery UI

Lengkapi app/courses/error.tsx sebagai Client Component yang menampilkan pesan error route dan tombol recovery.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

8 cek otomatis5 checklist

Belum selesaiBuka practice

Kesalahan umum

Wajib

Jangan gunakan error.tsx untuk semua jenis masalah

error.tsx menangkap error tak terduga yang muncul saat rendering pada boundary tersebut. Validasi input yang gagal atau error setelah user menekan tombol tetap perlu ditangani oleh flow UI yang relevan. Untuk sekarang, gunakan error.tsx sebagai fallback route-level dengan recovery yang sederhana.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

error.tsx memberi fallback untuk error render pada route segment.
Error UI adalah Client Component ketika menyediakan recovery melalui event handler.
Sediakan pesan yang jelas dan tindakan coba lagi yang sesuai.
Berikutnya, kamu akan membuat endpoint GET kecil dengan file route.ts.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Error UI menjaga route tetap dapat dipulihkan.

Memuat progres Review module