Sebelum Ubah Kode Pahami Cara Mengatasi Application Error Next Js

Ditulis oleh Next.js

Cara mengatasi application error Next.js paling cepat adalah membaca digest error di terminal, bukan menebak dari halaman putih bertuliskan Application error. Pesan itu hanya tampilan fallback dari boundary error.tsx di App Router. Sumber masalah biasanya Server Component memanggil browser API, data null diakses tanpa guard, fetch gagal, atau Server Action dipanggil dengan cara tidak valid.

Penyebab Application Error Paling Sering di App Router

Next.js membedakan error server, client, dan browser runtime. Server Component gagal saat render awal, Client Component gagal setelah hydration, sedangkan kode browser seperti window gagal karena dijalankan di server.

Pemicu yang paling sering muncul:

  • Memakai window, document, atau localStorage langsung di Server Component.
  • Mengakses properti dari data API yang masih null, misalnya user.name.
  • Fetch ke API internal gagal dan tidak ditangkap dengan try/catch.
  • Memanggil Server Action dari event yang tidak valid atau tanpa validasi input server.

Buka terminal development untuk melihat stack dan digest asli. Tampilan error.tsx di browser memang sengaja menyembunyikan detail.

Tabel Diagnosis Cepat Berdasarkan Pesan Error

Masalah Penyebab Solusi
window is not defined Browser API di server Pindah ke Client Component dan cek browser
Hydration failed Render server dan client beda Samakan output awal, hindari waktu acak
Cannot read properties of undefined Data null belum siap Tambah guard sebelum render
Fetch failed Endpoint salah atau server mati Validasi URL, tangkap error fetch

Perbaiki di server bila stack menunjuk Server Component, fetch, atau Server Action. Perbaiki di client bila error muncul setelah interaksi, event, atau efek browser.

BACA JUGA:

Langkah Memperbaiki Application Error Tanpa Merusak Render

  1. Reproduksi error dalam mode development agar digest lengkap terlihat.
  2. Catat digest, file, dan baris dari log terminal.
  3. Periksa boundary error.tsx terdekat dari route bermasalah.
  4. Perbaiki sumbernya, bukan boundarynya. Tambah guard atau pindahkan kode browser.
  5. Jalankan build production untuk memastikan error tidak hanya hilang di development.
// app/dashboard/error.tsx
'use client';

export default function Error({ error, reset }) {
  return (
    <div>
      <p>Terjadi gangguan: {error.message}</p>
      <button onClick={() => reset()}>Coba lagi</button>
    </div>
  );
}
if (!user) {
  return <p>Data pengguna tidak tersedia.</p>;
}
return <p>{user.name}</p>;
  • Jangan menambah use client ke semua file hanya agar window berhenti error.
  • Jangan mematikan cache dengan no-store sebelum tahu sumber fetch gagal.
  • Jangan menyembunyikan error dengan try/catch kosong tanpa fallback UI.

FAQ

Apakah application error selalu berarti bug di Client Component?

Tidak. Banyak application error berasal dari Server Component, fetch server, atau Server Action yang gagal.

Kapan memakai error.tsx dan kapan memakai global-error.tsx?

Pakai error.tsx untuk route tertentu, pakai global-error.tsx hanya untuk kegagalan di root layout.

Mengapa error hanya muncul di production?

Perbedaan data nyata, ENV production, cache, dan strict render membuat error tersembunyi di development baru terlihat setelah build.

Artikel Terkait