Error handling dalam pengambilan data

Error handling dalam pengambilan data adalah praktik penting untuk memastikan aplikasi Anda tetap stabil dan memberikan pengalaman pengguna yang baik, bahkan ketika terjadi masalah saat melakukan permintaan ke API atau server. Di React, error handling dalam pengambilan data dapat dilakukan menggunakan berbagai teknik, termasuk try-catch dalam async/await, menangani kesalahan dalam fetch, atau menggunakan metode bawaan dari pustaka seperti axios.

Teknik Error Handling dalam Pengambilan Data

1. Menggunakan try-catch dengan async/await

   Ini adalah cara yang umum untuk menangani kesalahan dalam pengambilan data asinkron di JavaScript dan React.

   Contoh:

   import React, { useState, useEffect } from 'react';
   
   function App() {
     const [data, setData] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
   
     useEffect(() => {
       const fetchData = async () => {
         try {
           const response = await fetch('https://jsonplaceholder.typicode.com/posts');
           if (!response.ok) {
             throw new Error('Network response was not ok');
           }
           const data = await response.json();
           setData(data);
           setLoading(false);
         } catch (error) {
           setError(error.message);
           setLoading(false);
         }
       };
   
       fetchData();
     }, []);
   
     if (loading) {
       return <p>Loading...</p>;
     }
   
     if (error) {
       return <p>Error: {error}</p>;
     }
   
     return (
       <div className="container">
         <h1>Daftar Artikel</h1>
         <ul>
           {data.map(article => (
             <li key={article.id}>
               <h2>{article.title}</h2>
               <p>{article.body}</p>
             </li>
           ))}
         </ul>
       </div>
     );
   }
   
   export default App;

   Penjelasan:

   • try-catch: Blok try digunakan untuk mencoba melakukan pengambilan data. Jika terjadi kesalahan, blok catch akan menangkap kesalahan tersebut dan mengatur state error dengan pesan kesalahan.

   • Checking Response: Sebelum memproses data, kita memeriksa apakah response.ok bernilai true. Jika tidak, kita memicu error manual dengan throw new Error.

   • Error State: Jika terjadi kesalahan, kita menampilkan pesan error kepada pengguna.

2. Handling Error dalam fetch tanpa async/await

   Jika Anda menggunakan fetch tanpa async/await, Anda masih dapat menangani kesalahan menggunakan .catch.

   Contoh:

   import React, { useState, useEffect } from 'react';
   
   function App() {
     const [data, setData] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
   
     useEffect(() => {
       fetch('https://jsonplaceholder.typicode.com/posts')
         .then(response => {
           if (!response.ok) {
             throw new Error('Network response was not ok');
           }
           return response.json();
         })
         .then(data => {
           setData(data);
           setLoading(false);
         })
         .catch(error => {
           setError(error.message);
           setLoading(false);
         });
     }, []);
   
     if (loading) {
       return <p>Loading...</p>;
     }
   
     if (error) {
       return <p>Error: {error}</p>;
     }
   
     return (
       <div className="container">
         <h1>Daftar Artikel</h1>
         <ul>
           {data.map(article => (
             <li key={article.id}>
               <h2>{article.title}</h2>
               <p>{article.body}</p>
             </li>
           ))}
         </ul>
       </div>
     );
   }
   
   export default App;

   Penjelasan:

   • Error Handling dalam .catch: Semua kesalahan dalam rantai .then ditangani oleh .catch, yang menangkap kesalahan dan mengatur state error.

3. Menggunakan axios untuk Error Handling

   axios adalah pustaka HTTP populer yang memiliki fitur bawaan untuk menangani kesalahan dengan lebih baik daripada fetch.

   Contoh:

   import React, { useState, useEffect } from 'react';
   import axios from 'axios';
   
   function App() {
     const [data, setData] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
   
     useEffect(() => {
       axios.get('https://jsonplaceholder.typicode.com/posts')
         .then(response => {
           setData(response.data);
           setLoading(false);
         })
         .catch(error => {
           setError(error.message);
           setLoading(false);
         });
     }, []);
   
     if (loading) {
       return <p>Loading...</p>;
     }
   
     if (error) {
       return <p>Error: {error}</p>;
     }
   
     return (
       <div className="container">
         <h1>Daftar Artikel</h1>
         <ul>
           {data.map(article => (
             <li key={article.id}>
               <h2>{article.title}</h2>
               <p>{article.body}</p>
             </li>
           ))}
         </ul>
       </div>
     );
   }
   
   export default App;

   Penjelasan:

   • axios otomatis menangani kesalahan HTTP dengan mengarahkan ke catch jika terjadi error, dan memberikan pesan kesalahan yang lebih informatif.

Penanganan Error Tambahan

• Retrying: Anda dapat menambahkan logika untuk mencoba ulang permintaan jika gagal, mungkin menggunakan pustaka seperti react-query.

• Error Boundaries: Untuk kesalahan rendering, React menyediakan fitur Error Boundaries untuk menangkap kesalahan yang terjadi di dalam komponen dan menampilkan fallback UI.

Sumber

• React Documentation - Error Boundaries

• Axios Documentation - Handling Errors

• MDN - Fetch API

Dengan menggunakan teknik-teknik ini, Anda dapat memastikan bahwa aplikasi React Anda tetap robust dan memberikan pengalaman pengguna yang baik, bahkan ketika terjadi kesalahan dalam pengambilan data.