Tujuan Pembelajaran

Memahami Error Boundary
Bisa menggunakan Suspense untuk lazy loading

Analogi

Diagram


      Error Boundary = Safety Net di sirkus
Suspense = Placeholder sementara menunggu datang

Error Boundaries menangani error di component tree. Suspense menunggu async content.

Penjelasan Konsep

Error Boundaries

Error Boundaries adalah React component yang menangkap JavaScript error di child component tree. Mencegah seluruh aplikasi crash.

Suspense

Suspense memungkinkan component menunggu sesuatu (lazy-loaded components, data fetching) sambil menampilkan fallback UI.

Lazy Loading

React.lazy() memungkinkan code-splitting per route. Component di-load on-demand saat route diakses. Kombinasikan dengan Suspense untuk menampilkan loading state.

Error Boundary Pattern

Buat class component dengan static getDerivedStateFromError() dan componentDidCatch(). Bungkus route atau component tree.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami Error Boundary., dan bisa menggunakan Suspense untuk lazy loading. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Error Boundaries & Suspense, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Error Boundaries menangani error di component tree. Suspense menunggu async content. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa tsx. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. ErrorBoundary tangkap error. Suspense tunggu lazy component. Fallback UI saat loading.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

tsx

import { lazy, Suspense, Component } from 'react';

// LAZY LOADING
const Dashboard = lazy(() => import('./Dashboard'));
const Settings = lazy(() => import('./Settings'));

// ERROR BOUNDARY
class ErrorBoundary extends Component {
  state = { hasError: false };
  
  static getDerivedStateFromError() {
    return { hasError: true };
  }
  
  componentDidCatch(error, info) {
    console.error('Error:', error, info);
  }
  
  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong. Please refresh.</h1>;
    }
    return this.props.children;
  }
}

// USAGE
function App() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<div>Loading...</div>}>
        <Dashboard />
      </Suspense>
    </ErrorBoundary>
  );
}

// ROUTE-BASED LAZY LOADING
const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Layout />}>
      <Route path="dashboard" element={
        <Suspense fallback={<Spinner />}>
          <Dashboard />
        </Suspense>
      } />
    </Route>
  )
);

Penjelasan Kode

ErrorBoundary tangkap error. Suspense tunggu lazy component. Fallback UI saat loading.

Prompt AI

Kapan menggunakan Error Boundary vs try-catch biasa?

Pertanyaan Reflektif

Implementasi lazy loading untuk routes dengan React.lazy dan Suspense.