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.
Fetch pokemons from this project!
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
loadingscreenDisplay the pokemon data as soon as it arrives
When something goes wrong (like a
network error, or apokemon 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, theno 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
try againbutton.This exercise is a modified version of KCD's exercise. Here's KCD's solution
My Solution
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