Penanganan Error React Suspense: Menguasai Status Loading dan Pemulihan Error

React Suspense adalah fitur canggih yang diperkenalkan di React 16.6 yang memungkinkan Anda untuk "menangguhkan" (suspend) rendering komponen hingga beberapa kondisi terpenuhi, biasanya penyelesaian operasi asinkron seperti pengambilan data. Ini menyediakan cara deklaratif untuk menangani status loading dan, dikombinasikan dengan Error Boundaries, memungkinkan pemulihan error yang kuat. Artikel ini mengeksplorasi konsep dan implementasi praktis dari penanganan error React Suspense untuk meningkatkan pengalaman pengguna aplikasi Anda.

Memahami React Suspense

Sebelum mendalami penanganan error, mari kita rekap singkat apa yang dilakukan React Suspense. Suspense pada dasarnya membungkus komponen yang mungkin perlu menunggu sesuatu (seperti data) sebelum dapat dirender. Saat menunggu, Suspense menampilkan UI fallback, biasanya indikator loading.

Konsep Kunci:

• UI Fallback: UI yang ditampilkan saat komponen ditangguhkan (loading).
• Suspense Boundary: Komponen <Suspense> itu sendiri, yang mendefinisikan wilayah di mana status loading dikelola.
• Pengambilan Data Asinkron: Operasi yang menyebabkan komponen ditangguhkan. Ini sering kali melibatkan pengambilan data dari API.

Di React 18 dan seterusnya, Suspense ditingkatkan secara signifikan untuk server-side rendering (SSR) dan streaming server rendering, membuatnya semakin penting untuk aplikasi React modern. Namun, prinsip-prinsip fundamental dari Suspense sisi klien tetap vital.

Menerapkan Suspense Dasar

Berikut adalah contoh dasar cara menggunakan Suspense:

            
import React, { Suspense } from 'react';

// Komponen yang mengambil data dan mungkin melakukan suspend
function MyComponent() {
  const data = useMyDataFetchingHook(); // Asumsikan hook ini mengambil data secara asinkron

  if (!data) {
    return null; // Di sinilah komponen melakukan suspend
  }

  return <div>{data.name}</div>;
}

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

export default App;

            

              
                Copy
              
            
          

Dalam contoh ini, MyComponent menggunakan useMyDataFetchingHook hipotetis. Jika data tidak tersedia secara langsung, hook tidak mengembalikan data, menyebabkan MyComponent mengembalikan null. Ini memberi sinyal kepada React untuk menangguhkan komponen dan menampilkan UI fallback yang didefinisikan dalam komponen <Suspense>.

Penanganan Error dengan Error Boundaries

Suspense menangani status loading dengan baik, tetapi apa yang terjadi ketika ada yang salah selama proses pengambilan data, seperti error jaringan atau respons server yang tidak terduga? Di sinilah Error Boundaries berperan.

Error Boundaries adalah komponen React yang menangkap error JavaScript di mana pun di dalam pohon komponen anak mereka, mencatat error tersebut, dan menampilkan UI fallback alih-alih merusak seluruh pohon komponen. Mereka bekerja seperti blok catch {} JavaScript, tetapi untuk komponen React.

Membuat Error Boundary

Berikut adalah komponen Error Boundary yang sederhana:

            
import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Perbarui state agar render berikutnya akan menampilkan UI fallback.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Anda juga dapat mencatat error ke layanan pelaporan error
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Anda dapat me-render UI fallback kustom apa pun
      return <h1>Terjadi kesalahan.</h1>;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

Komponen ErrorBoundary ini menangkap setiap error yang dilemparkan oleh anak-anaknya. Metode getDerivedStateFromError memperbarui state untuk menunjukkan bahwa error telah terjadi, dan metode componentDidCatch memungkinkan Anda untuk mencatat error tersebut. Metode render kemudian menampilkan UI fallback jika ada error.

Menggabungkan Suspense dan Error Boundaries

Untuk menangani error secara efektif di dalam batas Suspense, Anda perlu membungkus komponen Suspense dengan Error Boundary:

            
import React, { Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';

function MyComponent() {
  const data = useMyDataFetchingHook();

  if (!data) {
    return null; // Melakukan suspend
  }

  return <div>{data.name}</div>;
}

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

export default App;

            

              
                Copy
              
            
          

Sekarang, jika useMyDataFetchingHook melemparkan error (misalnya, karena permintaan API yang gagal), ErrorBoundary akan menangkapnya dan menampilkan UI fallback-nya. Komponen Suspense menangani status loading, dan ErrorBoundary menangani setiap error yang terjadi selama proses loading.

Strategi Penanganan Error Tingkat Lanjut

Selain tampilan error dasar, Anda dapat menerapkan strategi penanganan error yang lebih canggih:

1. Mekanisme Coba Lagi (Retry)

Daripada hanya menampilkan pesan error, Anda dapat menyediakan tombol coba lagi yang memungkinkan pengguna untuk mencoba pengambilan data lagi. Ini sangat berguna untuk error sementara, seperti masalah jaringan sementara.

            
import React, { useState, useEffect } from 'react';
import ErrorBoundary from './ErrorBoundary';

function MyComponent() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
      try {
        const result = await fetchDataFromAPI(); // Ganti dengan pengambilan data Anda yang sebenarnya
        setData(result);
        setError(null);
      } catch (e) {
        setError(e);
      } finally {
        setIsLoading(false);
      }
    };

    fetchData();
  }, []);

  const handleRetry = () => {
    setData(null); // Reset data
    setError(null); // Hapus error sebelumnya
    setIsLoading(true);
    fetchData(); // Coba lagi pengambilan data
  };

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return (
      <div>
        <p>Error: {error.message}</p>
        <button onClick={handleRetry}>Coba Lagi</button>
      </div>
    );
  }

  return <div>{data.name}</div>;
}

function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
}

export default App;

            

              
                Copy
              
            
          

2. Pencatatan dan Pelaporan Error

Sangat penting untuk mencatat error ke layanan pelaporan error seperti Sentry atau Bugsnag. Ini memungkinkan Anda untuk melacak dan mengatasi masalah yang dihadapi pengguna di produksi. Metode componentDidCatch dari Error Boundary Anda adalah tempat yang ideal untuk mencatat error-error ini.

            
import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Catat error ke layanan pelaporan error
    logErrorToService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Terjadi kesalahan.</h1>;
    }

    return this.props.children; 
  }
}

// Contoh fungsi untuk mencatat error (ganti dengan implementasi Anda yang sebenarnya)
function logErrorToService(error, errorInfo) {
  console.error("Error ditangkap oleh ErrorBoundary:", error, errorInfo);
  // Terapkan integrasi dengan layanan pelacakan error Anda (mis., Sentry.captureException(error))
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

3. Degradasi yang Anggun (Graceful Degradation)

Daripada pesan error generik, pertimbangkan untuk menyediakan UI fallback yang menawarkan pengalaman yang berkurang tetapi masih fungsional. Misalnya, jika komponen yang menampilkan informasi profil pengguna gagal dimuat, Anda dapat menampilkan gambar profil default dan antarmuka yang disederhanakan.

4. Pesan Error Kontekstual

Berikan pesan error yang spesifik untuk komponen atau data yang gagal dimuat. Ini membantu pengguna memahami apa yang salah dan tindakan apa yang dapat mereka ambil (misalnya, memuat ulang halaman, memeriksa koneksi internet mereka).

Contoh dan Pertimbangan Dunia Nyata

Mari kita pertimbangkan beberapa skenario dunia nyata dan bagaimana Suspense dan Error Boundaries dapat diterapkan:

1. Halaman Produk E-commerce

Bayangkan sebuah halaman produk e-commerce yang mengambil detail produk, ulasan, dan produk terkait. Anda dapat menggunakan Suspense untuk menampilkan indikator loading untuk setiap bagian ini saat data sedang diambil. Error Boundaries kemudian dapat menangani setiap error yang terjadi selama pengambilan data untuk setiap bagian secara independen. Misalnya, jika ulasan produk gagal dimuat, Anda masih dapat menampilkan detail produk dan produk terkait, sambil memberi tahu pengguna bahwa ulasan untuk sementara tidak tersedia. Platform e-commerce internasional harus memastikan bahwa pesan error dilokalkan untuk berbagai wilayah.

2. Feed Media Sosial

Dalam feed media sosial, Anda mungkin memiliki komponen yang memuat postingan, komentar, dan profil pengguna. Suspense dapat digunakan untuk memuat komponen-komponen ini secara progresif, memberikan pengalaman pengguna yang lebih lancar. Error Boundaries dapat menangani error yang terjadi saat memuat postingan atau profil individual, mencegah seluruh feed dari crash. Pastikan bahwa error moderasi konten ditangani dengan tepat, terutama mengingat kebijakan konten yang beragam di berbagai negara.

3. Aplikasi Dasbor

Aplikasi dasbor sering kali mengambil data dari berbagai sumber untuk menampilkan berbagai grafik dan statistik. Suspense dapat digunakan untuk memuat setiap grafik secara independen, dan Error Boundaries dapat menangani error di grafik individual tanpa memengaruhi sisa dasbor. Di perusahaan global, aplikasi dasbor perlu menangani format data, mata uang, dan zona waktu yang beragam, jadi penanganan error harus cukup kuat untuk menangani kompleksitas ini.

Praktik Terbaik untuk Penanganan Error React Suspense

• Bungkus Suspense dengan Error Boundaries: Selalu bungkus komponen Suspense Anda dengan Error Boundaries untuk menangani error dengan baik.
• Sediakan UI Fallback yang Bermakna: Pastikan UI fallback Anda informatif dan memberikan konteks kepada pengguna. Hindari pesan generik "Loading...".
• Terapkan Mekanisme Coba Lagi: Tawarkan pengguna cara untuk mencoba kembali permintaan yang gagal, terutama untuk error sementara.
• Catat Error: Gunakan layanan pelaporan error untuk melacak dan mengatasi masalah di produksi.
• Uji Penanganan Error Anda: Simulasikan kondisi error dalam pengujian Anda untuk memastikan penanganan error Anda berfungsi dengan benar.
• Lokalkan Pesan Error: Untuk aplikasi global, pastikan pesan error Anda dilokalkan ke bahasa pengguna.

Alternatif untuk React Suspense

Meskipun React Suspense menawarkan pendekatan deklaratif dan elegan untuk menangani status loading dan error, penting untuk menyadari pendekatan alternatif, terutama untuk basis kode lawas atau skenario di mana Suspense mungkin bukan pilihan terbaik.

1. Render Bersyarat dengan State

Pendekatan tradisional melibatkan penggunaan state komponen untuk melacak status loading dan error. Anda dapat menggunakan flag boolean untuk menunjukkan apakah data sedang dimuat, apakah error telah terjadi, dan data apa yang telah diambil.

            
import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
      try {
        const result = await fetchDataFromAPI();
        setData(result);
      } catch (e) {
        setError(e);
      } finally {
        setIsLoading(false);
      }
    };

    fetchData();
  }, []);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return <div>{data.name}</div>;
}

export default MyComponent;

            

              
                Copy
              
            
          

Pendekatan ini lebih bertele-tele daripada Suspense, tetapi menawarkan kontrol yang lebih terperinci atas status loading dan error. Ini juga kompatibel dengan versi React yang lebih lama.

2. Pustaka Pengambilan Data Pihak Ketiga

Pustaka seperti SWR dan React Query menyediakan mekanisme mereka sendiri untuk menangani status loading dan error. Pustaka-pustaka ini sering kali menawarkan fitur tambahan seperti caching, coba lagi otomatis, dan pembaruan optimistis.

Pustaka-pustaka ini bisa menjadi pilihan yang baik jika Anda membutuhkan kemampuan pengambilan data yang lebih canggih daripada yang disediakan Suspense secara langsung. Namun, mereka juga menambahkan dependensi eksternal ke proyek Anda.

Kesimpulan

React Suspense, dikombinasikan dengan Error Boundaries, menawarkan cara yang kuat dan deklaratif untuk menangani status loading dan error di aplikasi React Anda. Dengan menerapkan teknik-teknik ini, Anda dapat menciptakan pengalaman yang lebih kuat dan ramah pengguna. Ingatlah untuk mempertimbangkan kebutuhan spesifik aplikasi Anda dan memilih strategi penanganan error yang paling sesuai dengan kebutuhan Anda. Untuk aplikasi global, selalu prioritaskan lokalisasi dan tangani format data serta zona waktu yang beragam dengan tepat. Meskipun ada pendekatan alternatif, Suspense menyediakan cara modern yang berpusat pada React untuk membangun antarmuka pengguna yang tangguh dan responsif.