M

MLOG

Bahasa Indonesia

Pelajari cara mengimplementasikan React Error Boundaries untuk penanganan error yang baik, mencegah aplikasi crash, dan meningkatkan pengalaman pengguna. Jelajahi praktik terbaik, teknik canggih, dan contoh dunia nyata.

React Error Boundaries: Panduan Komprehensif untuk Penanganan Error yang Andal

Dalam dunia pengembangan web modern, pengalaman pengguna yang lancar dan andal adalah hal yang terpenting. Satu error yang tidak ditangani dapat merusak seluruh aplikasi React, membuat pengguna frustrasi dan berpotensi kehilangan data berharga. React Error Boundaries menyediakan mekanisme yang kuat untuk menangani error ini dengan baik, mencegah kerusakan fatal, dan menawarkan pengalaman yang lebih tangguh serta ramah pengguna. Panduan ini memberikan gambaran komprehensif tentang React Error Boundaries, mencakup tujuan, implementasi, praktik terbaik, dan teknik canggih.

Apa itu React Error Boundaries?

Error Boundaries adalah komponen React yang menangkap error JavaScript di mana saja dalam pohon komponen turunannya, mencatat error tersebut, dan menampilkan UI fallback alih-alih pohon komponen yang rusak. Mereka bertindak sebagai jaring pengaman, mencegah error di satu bagian aplikasi merusak seluruh UI. Diperkenalkan di React 16, Error Boundaries menggantikan mekanisme penanganan error sebelumnya yang kurang andal.

Anggaplah Error Boundaries sebagai blok `try...catch` untuk komponen React. Namun, tidak seperti `try...catch`, mereka bekerja untuk komponen, menyediakan cara deklaratif dan dapat digunakan kembali untuk menangani error di seluruh aplikasi Anda.

Mengapa Menggunakan Error Boundaries?

Error Boundaries menawarkan beberapa manfaat penting:

Membuat Komponen Error Boundary

Untuk membuat komponen Error Boundary, Anda perlu mendefinisikan komponen kelas yang mengimplementasikan salah satu atau kedua metode siklus hidup berikut:

Berikut adalah contoh dasar dari komponen Error Boundary:


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, info) {
    // Contoh "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in App
    console.error("Menangkap sebuah error: ", error, info.componentStack);
    // Anda juga bisa mencatat error ke layanan pelaporan error
    // logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // Anda dapat merender UI fallback kustom apa pun
      return 
Terjadi kesalahan.
;
    }

    return this.props.children; 
  }
}

Penjelasan:

Menggunakan Error Boundaries

Untuk menggunakan Error Boundary, cukup bungkus komponen atau komponen yang ingin Anda lindungi dengan komponen ErrorBoundary:

Jika ComponentThatMightThrow melemparkan error, ErrorBoundary akan menangkap error tersebut, memperbarui state-nya, dan merender UI fallback-nya. Sisa aplikasi akan terus berfungsi secara normal.

Penempatan Error Boundary

Penempatan Error Boundaries sangat penting untuk penanganan error yang efektif. Pertimbangkan strategi-strategi ini:

Contoh:


function App() {
  return (
    

      
        

      
      
        
      
      
        
          
        
      
      
        

      
    

  );
}

Dalam contoh ini, setiap bagian utama aplikasi (Header, Sidebar, ContentArea, Footer) dibungkus dengan Error Boundary. Ini memungkinkan setiap bagian untuk menangani error secara mandiri, mencegah satu error memengaruhi seluruh aplikasi.

Menyesuaikan UI Fallback

UI fallback yang ditampilkan oleh Error Boundary harus informatif dan ramah pengguna. Pertimbangkan panduan berikut:

Contoh:


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, info) {
    // Anda juga bisa mencatat error ke layanan pelaporan error
    console.error("Menangkap sebuah error: ", error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // Anda dapat merender UI fallback kustom apa pun
      return (
        

          
Ups! Terjadi kesalahan.

          
Maaf, terjadi kesalahan saat mencoba menampilkan konten ini.

          
Silakan coba segarkan halaman atau hubungi dukungan jika masalah berlanjut.

          
          Hubungi Dukungan
        

      );
    }

    return this.props.children; 
  }
}

Contoh ini menampilkan UI fallback yang lebih informatif yang mencakup pesan error yang jelas, solusi yang disarankan, dan tautan untuk menyegarkan halaman dan menghubungi dukungan.

Menangani Berbagai Jenis Error

Error Boundaries menangkap error yang terjadi selama rendering, dalam metode siklus hidup (lifecycle methods), dan dalam konstruktor dari seluruh pohon di bawahnya. Mereka *tidak* menangkap error untuk:

Untuk menangani jenis-jenis error ini, Anda perlu menggunakan teknik yang berbeda.

Event Handlers

Untuk error yang terjadi di event handler, gunakan blok try...catch standar:


function MyComponent() {
  const handleClick = () => {
    try {
      // Kode yang mungkin menimbulkan error
      throw new Error("Terjadi kesalahan di event handler");
    } catch (error) {
      console.error("Error di event handler: ", error);
      // Tangani error (mis., tampilkan pesan error)
      alert("Terjadi kesalahan. Silakan coba lagi.");
    }
  };

  return ;
}

Kode Asinkron

Untuk error yang terjadi dalam kode asinkron, gunakan blok try...catch di dalam fungsi asinkron:


function MyComponent() {
  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch("https://api.example.com/data");
        const data = await response.json();
        // Proses data
        console.log(data);
      } catch (error) {
        console.error("Error mengambil data: ", error);
        // Tangani error (mis., tampilkan pesan error)
        alert("Gagal mengambil data. Silakan coba lagi nanti.");
      }
    }

    fetchData();
  }, []);

  return 
Memuat data...
;
}

Sebagai alternatif, Anda dapat menggunakan mekanisme penanganan error global untuk promise rejection yang tidak ditangani:


window.addEventListener('unhandledrejection', function(event) {
  console.error('Penolakan yang tidak ditangani (promise: ', event.promise, ', alasan: ', event.reason, ');');
  // Secara opsional tampilkan pesan error global atau catat error ke layanan
  alert("Terjadi kesalahan tak terduga. Silakan coba lagi nanti.");
});

Teknik Error Boundary Tingkat Lanjut

Mereset Error Boundary

Dalam beberapa kasus, Anda mungkin ingin menyediakan cara bagi pengguna untuk mereset Error Boundary dan mencoba kembali operasi yang menyebabkan error. Ini bisa berguna jika error disebabkan oleh masalah sementara, seperti masalah jaringan.

Untuk mereset Error Boundary, Anda dapat menggunakan pustaka manajemen state seperti Redux atau Context untuk mengelola state error dan menyediakan fungsi reset. Atau, Anda dapat menggunakan pendekatan yang lebih sederhana dengan memaksa Error Boundary untuk me-remount.

Contoh (Memaksa Remount):


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

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

  componentDidCatch(error, info) {
    // Anda juga bisa mencatat error ke layanan pelaporan error
    console.error("Menangkap sebuah error: ", error, info.componentStack);
    this.setState(prevState => ({ errorCount: prevState.errorCount + 1 }));
  }

  resetError = () => {
      this.setState({hasError: false, key: this.state.key + 1})
  }

  render() {
    if (this.state.hasError) {
      // Anda dapat merender UI fallback kustom apa pun
      return (
        

          
Ups! Terjadi kesalahan.

          
Maaf, terjadi kesalahan saat mencoba menampilkan konten ini.

          
        

      );
    }

    return 
{this.props.children}
;
  }
}

Dalam contoh ini, 'key' ditambahkan ke div pembungkus. Mengubah key memaksa komponen untuk me-remount, yang secara efektif membersihkan state error. Metode `resetError` memperbarui state `key` komponen, menyebabkan komponen me-remount dan me-render ulang turunannya.

Menggunakan Error Boundaries dengan Suspense

React Suspense memungkinkan Anda untuk "menangguhkan" rendering komponen hingga beberapa kondisi terpenuhi (mis., data diambil). Anda dapat menggabungkan Error Boundaries dengan Suspense untuk memberikan pengalaman penanganan error yang lebih andal untuk operasi asinkron.


import React, { Suspense } from 'react';

function MyComponent() {
  return (
    
      Memuat...
}> ); } function DataFetchingComponent() { const data = useData(); // Hook kustom yang mengambil data secara asinkron return
{data.value}
; }

Dalam contoh ini, `DataFetchingComponent` mengambil data secara asinkron menggunakan hook kustom. Komponen `Suspense` menampilkan indikator pemuatan saat data sedang diambil. Jika terjadi error selama proses pengambilan data, `ErrorBoundary` akan menangkap error tersebut dan menampilkan UI fallback.

Praktik Terbaik untuk React Error Boundaries

Contoh Dunia Nyata

Berikut adalah beberapa contoh dunia nyata tentang bagaimana Error Boundaries dapat digunakan:

Alternatif untuk Error Boundaries

Meskipun Error Boundaries adalah cara yang direkomendasikan untuk menangani error di React, ada beberapa pendekatan alternatif yang dapat Anda pertimbangkan. Namun, perlu diingat bahwa alternatif ini mungkin tidak seefektif Error Boundaries dalam mencegah crash aplikasi dan memberikan pengalaman pengguna yang mulus.

Pada akhirnya, Error Boundaries menyediakan pendekatan yang andal dan terstandardisasi untuk penanganan error di React, menjadikannya pilihan utama untuk sebagian besar kasus penggunaan.

Kesimpulan

React Error Boundaries adalah alat penting untuk membangun aplikasi React yang andal dan ramah pengguna. Dengan menangkap error dan menampilkan UI fallback, mereka mencegah crash aplikasi, meningkatkan pengalaman pengguna, dan menyederhanakan proses debug error. Dengan mengikuti praktik terbaik yang diuraikan dalam panduan ini, Anda dapat secara efektif mengimplementasikan Error Boundaries di aplikasi Anda dan menciptakan pengalaman pengguna yang lebih tangguh dan andal bagi pengguna di seluruh dunia.

React Error Boundaries: Panduan Komprehensif untuk Penanganan Error yang Andal | MLOG