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!
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
loading
screenDisplay 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. The search bar should ALWAYS be mounted.There should be a button to
try again
after 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 again
button.This Fetch Pokemon exercise is taken from here: Kent's Implementation
My Solution
My Top Level Component
Pokemon Info Card
My Custom Error Boundary
An example error view