Next.js Discord

Discord Forum

Best way to handle fetch and errors

Answered
Red Crossbill posted this in #help-forum
Open in Discord
Red CrossbillOP
Hello, I currently have my getTrips() in a "use server" data.js file, and then using trips = await getTrips() in my page.jsx. However, I wonder what are the best practices to do this. Where should I handle the errors ? Should I make a conditional render on my trips.jsx that if I have an error or no trips, I render something else, or should I use the error.js thing to handle it ?
Thanks !
Answered by B33fb0n3
You can directly check the result from getTrips inside your page.tsx. So check it for example for .length to check if there are any entries. If yes, display them. If no, display a component, that there are no trips (for example). If an error is now thrown, the error.tsx will catch, that there are errors. You can either stay there or handle know issues yourself. The error.tsx should be there for unexpected issues
View full answer

6 Replies

@Red Crossbill Hello, I currently have my getTrips() in a "use server" data.js file, and then using trips = await getTrips() in my page.jsx. However, I wonder what are the best practices to do this. Where should I handle the errors ? Should I make a conditional render on my trips.jsx that if I have an error or no trips, I render something else, or should I use the error.js thing to handle it ? Thanks !
B33fb0n3
You can directly check the result from getTrips inside your page.tsx. So check it for example for .length to check if there are any entries. If yes, display them. If no, display a component, that there are no trips (for example). If an error is now thrown, the error.tsx will catch, that there are errors. You can either stay there or handle know issues yourself. The error.tsx should be there for unexpected issues
Answer
@B33fb0n3 You can directly check the result from getTrips inside your page.tsx. So check it for example for .length to check if there are any entries. If yes, display them. If no, display a component, that there are no trips (for example). If an error is now thrown, the error.tsx will catch, that there are errors. You can either stay there or handle know issues yourself. The error.tsx should be there for unexpected issues
Red CrossbillOP
Thanks for your answer

So something like this would be fine?
data.ts
export async function getTrips() {
  try {
    const accessToken = await getAccessToken();

    const response = await fetch(
      `${API_URL}/trips/user/with-destinations`,
      {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${accessToken}`,
        },
      },
    );

    if (!response.ok) {
      throw new Error('An error occurred while fetching trips. Please try again later.');
    }

    const data = await response.json();
    return data;
  } catch (err) {
    console.error(err);
    throw new Error('An error occurred while fetching trips. Please try again later.');
  }
}


And in my trips.tsx:

export default async function Trips() {

  const trips = await getTrips();
}
and then conditional rendering, if trip.length > 0 and if there are no trips ?


+ the error.js that render the same thing but with a "Error fetching your trips..." instead of the actual trip list, right ?
Red CrossbillOP
Thanks !
@Red Crossbill Thanks !
B33fb0n3
Sure thing. Please mark solution
B33fb0n3