Handling API Response & Errors in React Native

React Native এ API কল করার পর সবচেয়ে গুরুত্বপূর্ণ অংশ হলো Response Handling এবং Error Handling। কারণ সার্ভার সবসময় perfect ভাবে কাজ নাও করতে পারে, কিংবা নেটওয়ার্ক সমস্যা হতে পারে। সঠিকভাবে response handle না করলে অ্যাপে ক্র্যাশ, ভুল ডেটা, বা blank screen দেখা যেতে পারে।

1. Why Response & Error Handling Is Important?

API data wrong হলে UI ভুল দেখাবে
সার্ভার down থাকলে crash হতে পারে
Slow network → infinite loading হতে পারে
User experience খারাপ হয়

2. Basic Response Handling with Fetch

{`const getData = async () => {
    try {
        const response = await fetch("https://jsonplaceholder.typicode.com/posts");

        if (!response.ok) {
            throw new Error("Server Error: " + response.status);
        }

        const data = await response.json();
        setPosts(data);

    } catch (error) {
        console.log("Error:", error.message);
    }
};`}

এখানে আমরা response.ok ব্যবহার করে সার্ভার status check করেছি। যদি 200 না আসে, তাহলে error throw করা হচ্ছে।

3. Error Handling with Axios

{`import axios from "axios";

const getUsers = async () => {
    try {
        const res = await axios.get("https://jsonplaceholder.typicode.com/users");
        setUsers(res.data);

    } catch (error) {
        if (error.response) {
            console.log("Server Error:", error.response.status);
        } else if (error.request) {
            console.log("Network Error: No response from server");
        } else {
            console.log("Error:", error.message);
        }
    }
};`}

Axios automatically response কোড detect করতে পারে। আমরা ৩ ধরনের error ধরেছি:

error.response → server থেকে bad response (400, 500)
error.request → request গেছে, কিন্তু server উত্তর দেয়নি
error.message → অন্য error (code bug, wrong URL)

4. Showing Loading, Error & Data UI

Loading, Error & Data state manage করা অত্যন্ত প্রয়োজনীয়।

{`const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const [data, setData] = useState([]);

const fetchData = async () => {
    setLoading(true);
    setError(null);

    try {
        const res = await axios.get("https://jsonplaceholder.typicode.com/posts");
        setData(res.data);

    } catch (err) {
        setError("Something went wrong!");
    }

    setLoading(false);
};

// UI render
if (loading) return Loading...;
if (error) return {error};`}

5. Handling Slow Network & Timeout

✔ Axios Timeout

{`axios.get("https://api.example.com", { timeout: 5000 })
    .then(res => console.log(res.data))
    .catch(err => console.log("Timeout Error"));`}

যদি ৫ সেকেন্ডের মধ্যে data না আসে → timeout error।

6. Global Error Handling Using Axios Interceptors

বড় অ্যাপে বারবার try-catch লেখা ঝামেলা। Interceptor দিয়ে globally error catch করা যায়।

{`axios.interceptors.response.use(
    response => response,
    error => {
        console.log("Global Error:", error.message);
        return Promise.reject(error);
    }
);`}

7. API Success Message Handling

{`axios.post("https://example.com/create", myData)
    .then(res => {
        alert("Successfully Created!");
    })
    .catch(err => {
        alert("Error Creating Item!");
    });`}

8. Best Practices

Always show loading indicator
Always handle server error codes
Use try-catch with async functions
Use Axios for cleaner error handling
Use interceptors for large apps
Show user-friendly messages, never show raw errors

Conclusion

সঠিকভাবে API response ও errors handle করতে পারলে আপনার অ্যাপ আরও stable, secure এবং user-friendly হবে। React Native এ response & error handling করা খুব সহজ—যদি আপনি সঠিক practices follow করেন।

Handling API Response & Errors