The Http Requests and Error Boundaries
Summary: Be able to gracefully do http requests (like fetching pokemon data) for end-users and give them a good experience. Display appropriate views depending on the status of the http request and handle unexpected errors.
Write a form where users can enter the pokemon name and your app fetches and displays that pokemon's data
When a request hasn't been made yet, show
no pokemon yet, please submit a pokemon!
While fetching the pokemon data, show a
Display the pokemon data as soon as it arrives
When something goes wrong (like a
network error, or a
pokemon not existing in the database), the error should be displayed at the bottom of the search bar.
There should be a button to
try againafter an error. Upon clicking this, the
no pokemon yet, please submit a pokemon!will be shown and the current string on the search bar would be removed.
After an error, the user should be able to use the search bar to search for a new pokemon without having to click the
Note: This solution doesn't use a library, but in most cases that you do. Use a library like Tanner Linsley's React Query to help do this instead of implementing everything on your own from scratch.
My Top Level Component
Pokemon Info Card
My Custom Error Boundary
An example error view