javascript - Error handling while api limit exceeds in ReactJS

Question

I'm new to ReactJs, this is the code for fetching data from truepush api.

export const getAllCampaign = () => {
    return fetch(`https://api.truepush.com/api/v1/listCampaign/1`, {
        method: "GET",
        headers: {
            Authorization: `${TOKEN}`,
            "Content-Type": "application/json",
        },
    })
    .then(response => {
        return response.json()
    })
    .catch(err => console.log(err))
}

This api has limit, once the limit gets exceeds it shows an error of "campaigns.map not a function" at this place :

    const allData = campaigns.map((campaign, i) => ({
        ...campaign,
        ...stats[i].data
    }));

Here is my full code :

import React, {useState, useEffect} from 'react';
import {getAllCampaign, loadStats} from "../helpers/coreapihelpers";

const TableRow = () => {

    const [campaigns, setCampaigns] = useState([]);
    const [stats, setStats] = useState([]);

    const loadAllCampaigns = () => {
        getAllCampaign()
            .then(data => { setCampaigns(data.data) })
            .catch(err => { console.log(err) });
    };

    const loadAllStats = () => {
        loadStats()
            .then(data => { setStats(data) })
            .catch(err => { console.log(err) });
    }

    useEffect(() => {
       loadAllCampaigns();
       loadAllStats();
    }, [])

    const allData = campaigns.map((campaign, i) => ({
        ...campaign,
        ...stats[i].data
    }));

    console.log(allData);

    return (
        <div className="container">
            <div className="row">
                <div className="col-xs-12">
                    <div className="table-responsive" data-pattern="priority-columns">
                        <table className="table table-bordered table-hover">
                            <thead>
                            <tr>
                                <th>Sr. No</th>
                                <th>Campaign Id</th>
                                <th>Campaign Name</th>
                                <th>Campaign Status</th>
                                <th>Reach</th>
                                <th>Sent</th>
                                <th>Delivered</th>
                                <th>Views</th>
                                <th>Clicks</th>
                                <th>Unsubscribers</th>
                            </tr>
                            </thead>
                            <tbody>
                            {allData.map(
                                (
                                    {
                                        campaignId,
                                        campaignTitle,
                                        campaignStatus,
                                        Reach,
                                        Sent,
                                        Delivered,
                                        Views,
                                        Clicks,
                                        Unsubscribers
                                    },
                                    index
                                ) => (
                                    <tr key={index}>
                                        <td>{index + 1}</td>
                                        <td>{campaignId}</td>
                                        <td>{campaignTitle}</td>
                                        <td>{campaignStatus}</td>
                                        <td>{Reach}</td>
                                        <td>{Sent}</td>
                                        <td>{Delivered}</td>
                                        <td>{Views}</td>
                                        <td>{Clicks}</td>
                                        <td>{Unsubscribers}</td>
                                    </tr>
                                )
                            )}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default TableRow;

How can i show a simple h1 tag saying limit exceeds when api limit exceeds or fails to fetch data ?

question from:https://stackoverflow.com/questions/65842467/error-handling-while-api-limit-exceeds-in-reactjs

Answer 1

campaigns.map not a function basically this error means that your campaigns is not holding any data or array data to map on it. You can check it by consoling and debugging.

Since api is giving error , either you can take a error state and check while the promise is resolved whether the response is success or not, if not then set error as true and in campaign it will be [] so, use ?. which is chaining property to check if campaign is null or not if not then it searches for its key

  const allData = campaigns?.map((campaign, i) => ({
    ...campaign,
    ...stats[i].data
}));

and in return of component put conditional statement:

    return allData ?
        <div className="container">
            <div className="row">....
        :<div>ERROR</div>