import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
 Loading...

Dalam contoh ini:

• React.lazy digunakan untuk memuat MyComponent secara malas.
• Suspense membungkus LazyComponent.
• Prop fallback menyediakan UI pengganti (indikator loading) yang ditampilkan saat MyComponent sedang dimuat.

Mengimplementasikan Error Boundary

Sementara Suspense menangani status loading, Error Boundaries adalah komponen React yang menangkap kesalahan JavaScript di mana pun di dalam pohon komponen turunannya (child component tree), mencatat kesalahan tersebut, dan menampilkan UI pengganti alih-alih merusak seluruh pohon komponen.

Cara Kerja Error Boundary

Error Boundary adalah komponen kelas (class components) yang mendefinisikan metode siklus hidup (lifecycle methods) berikut:

• static getDerivedStateFromError(error): Metode ini dipanggil setelah kesalahan dilemparkan oleh komponen turunan. Metode ini menerima kesalahan yang dilemparkan sebagai argumen dan harus mengembalikan nilai untuk memperbarui state.
• componentDidCatch(error, info): Metode ini dipanggil setelah kesalahan dilemparkan oleh komponen turunan. Metode ini menerima kesalahan dan objek info yang berisi informasi tentang komponen mana yang melemparkan kesalahan. Ini adalah tempat yang ideal untuk mencatat kesalahan ke layanan seperti Sentry atau Bugsnag.

Penting: Error Boundary hanya menangkap kesalahan pada komponen di bawahnya dalam pohon komponen. Sebuah Error Boundary tidak dapat menangkap kesalahan di dalam dirinya sendiri.

Contoh: Implementasi Dasar Error Boundary

            
import React, { Component } from 'react';

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

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

 componentDidCatch(error, info) {
 // Anda juga dapat mencatat kesalahan ke layanan pelaporan kesalahan
 console.error('Caught error: ', error, info);
 }

 render() {
 if (this.state.hasError) {
 // Anda dapat merender UI pengganti kustom apa pun
 return 
Something went wrong.
;
 }

 return this.props.children; 
 }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

Untuk menggunakan Error Boundary, bungkus komponen apa pun yang mungkin melemparkan kesalahan:

            
import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
 return (
 
 
 
 );
}

export default App;

            

              
                Copy
              
            
          

Mengintegrasikan Suspense dan Error Boundary

Kekuatan sebenarnya datang dari penggabungan Suspense dan Error Boundary. Ini memungkinkan Anda menangani status loading dan kesalahan dengan baik di dalam aplikasi Anda. Praktik yang disarankan adalah membungkus Suspense dengan Error Boundary. Dengan cara ini, jika komponen yang dimuat secara malas (lazy-loaded) gagal dimuat (misalnya, kesalahan jaringan), Error Boundary dapat menangkap kesalahan tersebut dan menampilkan pesan yang membantu kepada pengguna.

Contoh: Menggabungkan Suspense dan Error Boundary

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

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
 
 Loading...