fix: handle api 404 error to display data properly

[yunchipang]

Description

Fixes #1801

⛔️ Cause: when populating static props (captures, countries, growers, organizations, wallets) in top.js, if any of the 5 items got a 404 upon API request, the page renders a 404 not found because the field was not properly populated.

🧩 Solution: consolidate all API request functions into src/models/api.js, including error handling. When an API request failed, the function returns an empty array.

📝 Note: For now, API requests to captures and growers return 404, so the below error persists, and the frontend is only displaying countries, organizations, and wallets (please refer to the screenshot in the next section). I believe the investigation should continue on treetracker-query-api in terms of fetching captures and featured growers. I've checked /captures and /growers/featured endpoints, neither of them are working.

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

Screenshots

Before	After

How Has This Been Tested?

• Cypress integration
• Cypress component tests
• Jest unit tests

Checklist:

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• [] I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

[dadiorchen]

@yunchipang why you disable the throwing here?

[yunchipang]

because if it throws an error, getCaptures() will not return anything, then captures in static props gets undefined, and the entire top page just shows 404.

for now, to inform the error i'm just logging it. would you like this to be handled in some other way? my purpose is to have some props display on the page even when some other props were not populated properly.

[dadiorchen]

I'm not sure, let's merge your code first, and we can continue, we can back to this if there are some problem.

BTW, I also don't like the try-catch way to handle error, I prefer to use Promise function to do it:

promise
.then(goodHandler)
.catch(badHandler)

[dadiorchen]

I'm not sure, let's merge your code first, and we can continue, we can back to this if there are some problem.

BTW, I also don't like the try-catch way to handle error, I prefer to use Promise function to do it:

promise
.then(goodHandler)
.catch(badHandler)

[dadiorchen]

@yunchipang thanks for you contribution!