Error Handling

Pravin Gaire — Wed, 28 Aug 2024 06:15:32 +0000

useEffect(() => {
async function fetchPlaces() {
setIsFetching(true);
try {
const places = await
fetchAvailablePlaces();

navigator.geolocation.getCurrentPosition((position)=> {
const sortedPlaces = sortPlacesByDistance(
places,
position.coords.latitude,
position.coords.longitude
);
setAvailablePlaces(sortedPlaces);
setIsFetching(false);
})

} catch(error) {
setError({
message:
error.message || 'Could not fetch places, please try again later'});
}
setIsFetching(false);
}
fetchPlaces();

}, [])

if(error) {
return(

);
}

** Separate file for fetching and getting data **

export async function fetchAvailablePlaces(){
const response = await
fetch('http://localhost:3000/places');
const resData = await response.json();

  if(!response.ok) {
    throw new Error('Failed to fetch places');
  }

 return  resData.places;

}

I would like to know how is this approach to handle error while building react app.

DEV Community: Pravin Gaire

Error Handling