Behavior on API error

[Noam-Bendelac]

When an API request from the frontend has a 4xx or 5xx error (need to complete #60 first), it should give the user a helpful message.

If the status code is 5xx, there was a server error. Alert "There was a problem on our side. If problem persists, please try at a later time" and if possible, don't clear user text input if applicable.

If the status code is 401, depending on #59, I think this will always mean the user is not logged in and either has no access_token or invalid/timed out access_token. Should we just alert() the same message as below for 4xx and not do anything for them? Or should we clear the two cookies and reroute them to /login? What if they have unsaved work in text boxes?

For any other 4xx error, alert "Please try again. If problem persists, please logout and log back in". Need to implement #62 to ensure the logout button works. Like before, don't clear user text input if applicable.

Not sure if the code for this should go in fetchWrapper or in a helper that would be called from outside fetchWrapper (it comes down to the question "should this happen for every instance of a 4xx/5xx error"). I am hesitant to put it in fetchWrapper and have it happen every time because future behavior might need to be different.

[Noam-Bendelac]

Also need to check the error returned from the api/hook and avoid accessing properties or return empty JSX early to avoid runtime errors.

[Noam-Bendelac]

Made the text "Login error. Please logout and log back in" for 401 errors. Need to keep in mind that 401 errors (and sometimes 5xx errors) can come from refresh_token, which happens on interval and not on user action/page load. This means they would interfere with user experience even more than an error caused by user action (which would at least make more sense to the user), and phrases like "try again" would make less sense for these.