React Error Boundaries: Stop White Screen of Death

Halo semuanya! 👋

Pernah ga sih lagi asik browsing website, klik tombol, terus tiba-tiba… poof? Layar jadi putih semua. Enggak ada pesan error, enggak ada “Oops”, cuma kosong melompong.

Kalau kamu developer, kamu pasti tahu ini namanya White Screen of Death. Ini kejadian kalau ada error JavaScript yang bikin crash seluruh struktur komponen React.

Tapi tenang, saya punya solusinya. Hari ini, saya bakal kasih tahu caranya pakai React Error Boundaries buat menangani crash ini dengan elegan. Anggap aja ini jaring pengaman buat aplikasi kamu.

Apa itu Error Boundary?

Gampangnya, Error Boundary itu komponen React yang menangkap error JavaScript di mana saja di dalam komponen anaknya (child components).

Daripada satu aplikasi crash semua, Error Boundary bakal nampilin UI cadangan (misalnya “Ada yang salah nih”) sementara sisa aplikasinya tetap jalan normal.

Catatan Penting: Di React 18, Error Boundaries wajib pakai Class Components. Belum bisa pakai Functional Components dengan Hooks. Agak jadul sih, tapi emang gitu aturannya.

Bikin Error Boundary

Yuk langsung ngoding. Kita bakal bikin class component namanya ErrorBoundary.

import React from "react";

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    // State buat ngelacak ada error atau enggak
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state supaya render berikutnya nampilin fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Kamu juga bisa kirim error log ke service kayak Sentry
    console.error("Uncaught error:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Kamu bisa render tampilan apa aja di sini
      return (
        <div className="p-4 bg-red-100 text-red-700 border border-red-400 rounded">
          <h2>Waduh! Ada yang error.</h2>
          <p>Tenang, tim kami sudah dikabari kok.</p>
        </div>
      );
    }

    // Kalau aman, render komponen anak seperti biasa
    return this.props.children;
  }
}

export default ErrorBoundary;

Ini penjelasannya:

1. getDerivedStateFromError: Lifecycle method ini jalan pas ada error. Kita pakai buat update state (hasError: true).
2. componentDidCatch: Di sini kita bisa log error-nya. Di aplikasi beneran, biasanya dikirim ke monitoring service.
3. render: Kalau hasError true, tampilin pesan error. Kalau enggak, tampilin isinya (this.props.children).

Cara Pakainya

Sekarang jaring pengamannya udah jadi, tinggal kita bungkus komponen yang rawan error.

Bisa bungkus satu aplikasi:

import ErrorBoundary from "./ErrorBoundary";
import App from "./App";

// Di index.js atau file utama kamu
<ErrorBoundary>
  <App />
</ErrorBoundary>

Atau lebih bagus lagi, bungkus per bagian UI. Jadi kalau satu widget crash, halaman lainnya tetap aman!

import ErrorBoundary from "./ErrorBoundary";
import UserProfile from "./UserProfile";
import UserFeed from "./UserFeed";

const Dashboard = () => {
  return (
    <div>
      <h1>Dashboard Saya</h1>

      {/* Kalau UserProfile crash, UserFeed tetap aman! */}
      <ErrorBoundary>
        <UserProfile />
      </ErrorBoundary>

      <ErrorBoundary>
        <UserFeed />
      </ErrorBoundary>
    </div>
  );
};

Keterbatasan

Error Boundaries emang keren, tapi gak bisa nangkep semua error. Dia gak akan nangkep error di:

• Event handlers (kayak onClick).
• Asynchronous code (contohnya setTimeout atau fetch).
• Server-side rendering (SSR).
• Error yang muncul di dalam Error Boundary itu sendiri.

Buat event handlers, tetap pakai blok try...catch yang biasa ya.

Penutup

Gak ada kode yang sempurna. Bug pasti ada. Tapi dengan Error Boundaries, kamu mastiin kalau satu bug kecil enggak bikin seluruh aplikasi mati total.

User experience jadi jauh lebih baik. Daripada bengong liat layar putih, user dapet info yang jelas, dan aplikasi kamu tetap kelihatan profesional.

Cobain deh di project kamu berikutnya. User kamu (dan mental kamu) bakal berterima kasih! 🛡️