Error Handling Global: Menangkap Error Tak Terduga

Batasan error.tsx biasa

File error.tsx hanya menangkap error di foldernya ke bawah. Error di root layout sendiri tidak tertangkap. Untuk itu ada global-error.tsx yang menggantikan seluruh halaman termasuk layout:

// app/global-error.tsx
"use client";

export default function GlobalError({
  error,
  reset,
}: {
  error: Error;
  reset: () => void;
}) {
  return (
    <html lang="id">
      <body>
        <h2>Terjadi kesalahan sistem</h2>
        <p>Tim kami sudah diberitahu. Silakan coba lagi.</p>
        <button onClick={() => reset()}>Muat ulang</button>
      </body>
    </html>
  );
}

Perhatikan: file ini harus me-render <html> dan <body> sendiri karena menggantikan root layout.

Kirim ke layanan logging

Menampilkan halaman ramah saja tidak cukup. Di production, kirim error ke layanan seperti Sentry agar kamu tahu ada masalah sebelum user melapor:

"use client";

import { useEffect } from "react";

export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  useEffect(() => {
    // kirim ke Sentry / logging
    console.error("Error tertangkap:", error);
  }, [error]);

  return (
    <div>
      <h2>Ups, ada yang salah</h2>
      <button onClick={() => reset()}>Coba lagi</button>
    </div>
  );
}

Strategi berlapis

Struktur ideal: global-error.tsx untuk bencana total, error.tsx per segmen penting (dashboard, checkout), dan penanganan lokal (try/catch, validasi) untuk error yang bisa diprediksi seperti form.

Kesalahan umum pemula

• Hanya mengandalkan error.tsx per halaman. Error di root layout lolos. Selalu sediakan global-error.tsx sebagai jaring terakhir.
• reset() tanpa batas. Kalau error deterministik, reset hanya mengulang error. Batasi percobaan atau arahkan ke halaman aman.
• Tidak ada logging di production. User tidak melapor, kamu tidak tahu. Tanpa Sentry atau sejenisnya, error production itu sunyi.

Latihan singkat

1. Buat global-error.tsx dengan desain yang konsisten dengan branding situsmu (bukan halaman putih polos).
2. Simulasikan error di root layout sementara, pastikan global-error.tsx yang tampil bukan halaman error browser.

Rangkuman

• global-error.tsx menangkap error di root layout; wajib me-render <html> dan <body> sendiri.
• Kirim error production ke layanan logging seperti Sentry.
• Strategi berlapis: global untuk bencana, error.tsx per segmen, try/catch untuk yang terprediksi.
• Hindari loop reset() untuk error deterministik.

Catatan teknis: Jangan biarkan reset() dipanggil dalam loop tanpa jeda. Kalau error-nya deterministik (misal data rusak), reset hanya akan error lagi. Tambahkan logika backoff atau arahkan user ke halaman aman setelah beberapa kali gagal.