Loading dan Error UI: Feedback Saat Halaman Bermasalah

File loading.tsx

Saat halaman mengambil data di server, tampilkan UI loading otomatis dengan file loading.tsx di folder yang sama:

// app/blog/loading.tsx
export default function Loading() {
  return <p>Memuat artikel...</p>;
}

Selama app/blog/page.tsx mengambil data, user melihat "Memuat artikel..." bukan layar putih. Setelah data siap, konten asli menggantikannya. Kamu bisa memakai skeleton atau spinner biar terlihat profesional.

File error.tsx

Kalau terjadi error saat render, error.tsx menangkapnya dan menampilkan UI ramah:

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

export default function Error({
  error,
  reset,
}: {
  error: Error;
  reset: () => void;
}) {
  return (
    <div>
      <h2>Gagal memuat blog</h2>
      <p>{error.message}</p>
      <button onClick={reset}>Coba lagi</button>
    </div>
  );
}

Perhatikan: error.tsx wajib Client Component karena butuh interaktivitas tombol "Coba lagi". Fungsi reset akan mencoba me-render ulang halaman.

Batasan error boundary

error.tsx hanya menangkap error di foldernya dan di bawahnya, tidak menangkap error di layout yang sama level. Untuk menangkap semua error, ada global-error.tsx yang dibahas di modul Mahir.

Tips praktis

Buat skeleton loading yang mirip bentuk konten aslinya: kalau yang dimuat daftar artikel, tampilkan 3 kotak abu-abu seukuran kartu artikel. User langsung paham apa yang sedang dimuat. Untuk error, bedakan pesan untuk user ("Coba lagi nanti") dengan log untuk developer yang dikirim ke layanan logging.

Kesalahan umum pemula

• error.tsx tanpa "use client". File ini wajib Client Component karena butuh tombol interaktif dan menerima props error.
• Menampilkan error.stack ke user. Detail teknis bisa membocorkan struktur server. Tampilkan pesan ramah, kirim detail ke logging.
• Tidak membuat loading.tsx untuk halaman berat. User menatap layar kosong 3 detik terasa seperti error. Skeleton sederhana jauh lebih baik.

Latihan singkat

1. Buat loading.tsx dengan skeleton (kotak abu-abu berdenyut) untuk halaman yang fetch data.
2. Buat error.tsx yang menampilkan pesan ramah plus tombol "Coba lagi", lalu simulasikan error dengan throw new Error sementara.

Rangkuman

• loading.tsx menampilkan UI loading otomatis saat halaman mengambil data.
• error.tsx menangkap error render dan wajib Client Component.
• Fungsi reset() memungkinkan user mencoba lagi tanpa reload manual.
• Jangan tampilkan detail error mentah ke user di production.

Catatan teknis: Jangan menampilkan detail error mentah (error.stack) ke user di production karena bisa membocorkan struktur kode dan path server. Tampilkan pesan ramah, dan kirim detailnya ke layanan logging seperti Sentry.