Browser Tiba-Tiba Crash? Cara Mengatasi Client Side Exception Next Js dari Log Asli

Ditulis oleh Next.js

Client side exception di Next.js App Router berarti komponen di browser gagal render, bukan servernya yang down. Perbaikan tercepat yang aman: baca stack trace di overlay error, temukan nama file Client Component yang disebut, lalu isolasi komponen itu dan tambahkan guard untuk data null dan browser API. Jangan langsung menambah use client ke semua file.

Penyebab Client Side Exception Paling Sering di App Router

Error ini muncul setelah JavaScript dihydrate di browser. Server berhasil mengirim HTML, lalu React gagal melanjutkan render di client.

  • Hook seperti useState atau useEffect dipakai di Server Component tanpa penanda client.
  • Kode memanggil window, document, atau localStorage saat render awal.
  • Data dari fetch bernilai undefined lalu diakses langsung, misalnya data.user.name.
  • Library yang hanya untuk browser diimpor di komponen yang dirender server.
  • Format tanggal, angka, atau timezone berbeda antara server dan client.

Pesan | Penyebab | Solusi

Pesan error Next.js sering generik, jadi cocokkan polanya lewat tabel berikut.

Application error: a client-side exception has occurred Render Client Component gagal Cek stack trace, isolasi komponen
window is not defined Browser API jalan di server Pindahkan ke useEffect atau cek typeof window
Cannot read properties of undefined Props atau data fetch kosong Tambahkan guard dan fallback UI

Cara Membaca Log Error Sebelum Mengubah Kode

Buka overlay error di mode development dan baca baris pertama stack trace. Nama file dan nomor baris biasanya menunjuk langsung ke Client Component bermasalah.

Bandingkan dengan log terminal tempat perintah dev berjalan. Log terminal membantu memastikan error berasal dari browser, bukan dari Route Handler atau Server Action.

Catat pola kemunculannya. Error saat klik tombol berarti event handler bermasalah. Error saat reload berarti data awal kosong. Error hanya saat navigasi berarti state lama terbawa ke halaman baru.

BACA JUGA:

Langkah Memperbaiki Error dengan Aman

Ikuti urutan ini agar perbaikan tidak menimbulkan error baru:

  1. Bungkus komponen tersangka dengan batas sementara atau render terpisah untuk memastikan sumbernya.
  2. Periksa semua props yang masuk, terutama data dari fetch dan params dinamis.
  3. Amankan akses window, document, dan localStorage agar hanya jalan di browser.
  4. Perbaiki fetch dengan loading state, pengecekan response, dan nilai default.
  5. Jalankan build production lalu uji ulang, karena sebagian error hanya muncul setelah optimasi.
// Contoh guard browser API dan data
'use client';
import { useEffect, useState } from 'react';
export default function Profile({ user }) {
  const [theme, setTheme] = useState('light');
  useEffect(() => {
    const saved = localStorage.getItem('theme');
    if (saved) setTheme(saved);
  }, []);
  if (!user) return <p>Data pengguna tidak tersedia.</p>;
  return <p>{user.name} memakai tema {theme}</p>;
}

File error.tsx berguna menampilkan UI cadangan saat error terjadi. File itu tidak memperbaiki komponen rusak, jadi perbaiki dulu sumber errornya.

FAQ

Apakah error boundary menghilangkan error?

Tidak. Boundary hanya mencegah seluruh halaman crash dan menampilkan UI pengganti.

Kenapa error hanya muncul di production?

Perilaku build, urutan hydration, dan data asli sering berbeda dari data development.

Kapan memakai use client untuk error ini?

Pakai hanya untuk komponen yang memang butuh state, event, atau browser API, bukan untuk seluruh halaman.

Artikel Terkait