Handle HTTP errors.

[birchamp]

Issue:

Users need to be informed of network errors that will cause problems with the app. The app needs to handle network issues gracefully.
4 categories of issues should be distinguished for the user:

• No network connection - "Please check your network connection. No network connection detected."
• No connection to the server - "Please check your internet connection. The application is unable to reach the server."
• Server error - "The server returned an #nnn error. Please try again or submit feedback." (needs feedback button)
• Authentication error - "The application is no longer logged in. Please login again." (needs a button to get to a login prompt)

DoD:

HTTP errors result in one of the 4 responses above.

Details:

From tC: translationCore has encountered an unknown communications error. If this problem continues, please send "User Feedback" which is on option on the "Actions" button.

[birchamp]

@PhotoNomad0 please add the error table here.

[PhotoNomad0]

HTTP Error Codes (see https://developer.mozilla.org/en-US/docs/Web/HTTP/Status for reference):

Syntax	Description	Error Message
200	Success	show no error message
2xx	various partial success codes [1]	Server error
1xx	informational responses [2]	Server error
3xx	redirection requests [3]	Server error
5xx	server errors [4]	Server error
400	Bad Request	Server error
401	Unauthenticated	Authentication error
403	Unauthorized	Authentication error
404	URL is not recognized	Server error
408	Gateway Timeout	No connection to the server
4xx	Invalid Requests [5]	Server error
N/A	browser call: navigator.onLine	No connection to the server

Notes:
1 Codes other than 200 would typically be unexpected server responses (or could be due to app calling wrong API)
2 unexpected server responses
3 unsupported redirects to different URL
4 server errors that are not expected
5 client (app) errors typically due to accessing wrong APIs or servers (could be due to server changes)

[PhotoNomad0]

Notes:

Modules to update:

Location	API used	TODO
GatewayEdit
(get orgs) app/TranslationSettings	fetch - HTTP codes	can fix inline
(validate user token) app/AuthContextProvider.getAuth	fetch - HTTP codes	can fix inline
(get bibles) app/Workspace	?	calls getResourceBibles()
app/api/feedback	sgMail - HTTP codes	can fix inline
(drawer - goes to feedback page) app/pages/feedback.onSubmitFeedback	fetch - HTTP codes	can fix inline
AuthenticationContext	?	fix in gitea-react-toolkit, useAuthentication()
Scripture Cards	?	fix in via scripture-resources-rcl
scripture-resources-rcl	?	fix in getFile
resourceFromResourceLink => getFile (called through getResourceManifest() and projectFromProjects())	?	fix get() in gitea-react-toolkit
Resource Cards	?	fix in translation-helps-rcl - see useContent() (useRsrc)
useResourceClickListener	axios - HTTP codes	can fix inline
useTsvItems	fetch - HTTP codes	can fix inline
useContent	?	calls useTsvItems
gitea-react-toolkit	?	?
AuthenticationContext	?	fix in gitea-react-toolkit, useAuthentication()
checkIfServerOnline	axios - HTTP codes	throws exception on error [1]
get (async)	?	if error calls checkIfServerOnline which will return exception [1]
	?

1. gitea-react-toolkit throws exception of ERROR_NETWORK_DISCONNECTED, ERROR_SERVER_UNREACHABLE, or misc.
   ...

[PhotoNomad0]

Note:

gitea-react-toolkit responds to communication errors by doing a check to see if server is online (using checkIfServerOnline):

• first checks that network is disconnected - if so it throws exception of ERROR_NETWORK_DISCONNECTED
• next calls DCS api to see if server is responding - if not returns exception of ERROR_SERVER_UNREACHABLE

We can make use of checkIfServerOnline() in gateway-edit app.

[PhotoNomad0]

GatewayEdit - Network access to convert tasks:

• (get orgs) app/TranslationSettings - inprocess
• (validate user token) app/AuthContextProvider.getAuth
• (get bibles) app/Workspace - calls getResourceBibles() - will need some updates
• (send feedback) app/api/feedback | sgMail - HTTP codes | can fix inline
• (login) AuthenticationContext | ? | fix in gitea-react-toolkit, useAuthentication()

[PhotoNomad0]

@birchamp , @cckozie , @elsylambert - Need some feedback on UI design for the Network error Prompt. This is a quick mock up using defaults. It is drag-able. How should it look?

[birchamp]

@PhotoNomad0 I really like it. Can you add a button labeled 'close' to the lower right corner and move the feedback button over to the left of the close button?

[cckozie]

@PhotoNomad0
This from Elsy in Zulip:
My two cents: The “Send feedback” button should be on the right side, keeping it consistent with other modals. I think the error message font should be a bit bigger cause the text looks smaller compared to the feedback button size.

From me:
I agree with Elsy, I'd bump the font size on both of the non-button texts. I would also suggest making the second phrase an actual sentence: "No network connection was detected."

[PhotoNomad0]

@birchamp , @cckozie , @elsylambert - Does this look better?

[cckozie]

@PhotoNomad0 @birchamp @elsylambert
I like the font size much better, but think we should follow the standard we had in tC that the cancel button is always on the left even if it is the default button.

[birchamp]

Looks good. Go ahead and switch the buttons but leave the colors the same.

[PhotoNomad0]

@birchamp , @cckozie , @elsylambert - OK, swapped buttons and added a bit of vertical spacing per @mannycolon 's suggestion.

Note that for the final implementation the send feedback button will only be shown if we can connect to server (see issue description).

[cckozie]

I like it:)

[birchamp]

@PhotoNomad0 Looks really good. I assume the cancel button will be right-aligned when the 'send feedback' is hidden.

[PhotoNomad0]

@birchamp , @cckozie , @elsylambert - When the app starts up seems to be a special case when there is a network error validating their user token. If the user just clicks cancel, they cannot really do anything. Wondering if we should add a retry button which would reload the page such as:

[PhotoNomad0]

@birchamp , @cckozie , @elsylambert - the only time this would show up for the user is when the internet is up but DCS is not responding. Since if their network was down or the internet was not functioning, the app would not launch.

[birchamp]

@PhotoNomad0 yes a retry makes sense, but in this case do we want the Retry to be the default? In other words should you make the retry blue?

[PhotoNomad0]

@birchamp @cckozie @elsylambert @mannycolon In after party we decided that for the resource cards, on network error we will display a single popup (even though there are multiple cards having problems).

[PhotoNomad0]

@birchamp @cckozie @elsylambert @mannycolon Just be aware that clicking retry before networking is fixed will cause the browser to show an error such as:

This is because the app itself cannot be reloaded.

Perhaps we should add instructions to the end of the message when the retry button is displayed. Something like "Correct the network issue and then Retry."?

[PhotoNomad0]

Notes:

• have it working on failures fetching project manifests, now working on fetching individual articles.
• found article fetch errors:
  • ru_gl/ru - tit 1:3, tn tN navigation #2, on ta:

[PhotoNomad0]

@cckozie @elsylambert This is in v0.9.0 build abbbdd5

[cckozie]

v0.9.0 build abbbdd5
Case 1: (no network conneciton) functions as stated in the issue description
Case 2: (no connection to server)
Test setup:

• Start in running application on main page
• Disconnect from Internet
• Navigate to Account Settings page
  Chrome on Mac:
  Initial screen shows this:
  

After 30 (or sometimes 60) seconds this message is displayed

After another 30 seconds this message is displayed:

If the internet connection is reestablished and the user clicks the Retry button, the Login screen is presented.
If the user clicks the Retry button before the Internet connection has be reestablished, the browser issues a message.

On Macbook and Firefox, the results are similar, but the last message is different

[elsylambert]

When the connection is lost while user is on the Project page and user tries to navigate the verses from the top navigation, the Network connection error message is shown, which is fine, but when the Cancel button is clicked, it is stuck cause the app tries to load the previous page but fails and the error message is shown again. Please see the video for more clarity:
https://images.zenhubusercontent.com/310359593/8b629b69-8529-4565-b146-983b17ed49d5/no_connection_error.mp4

[PhotoNomad0]

v0.9.0 build abbbdd5
Case 1: (no network conneciton) functions as stated in the issue description
Case 2: (no connection to server)
Test setup:

* Start in running application on main page

* Disconnect from Internet

* Navigate to Account Settings page
  Chrome on Mac:
  Initial screen shows this:
  ![image.png](https://camo.githubusercontent.com/ec52b51f3a1d9fe5f60907a92a8d50cde3288f2a0804cee87e791f8733285880/68747470733a2f2f696d616765732e7a656e68756275736572636f6e74656e742e636f6d2f3536653161393331366361663536633964333864386466352f30383066353932322d343131632d343166382d613635612d313261643934643461393234)

After 30 (or sometimes 60) seconds this message is displayed

After another 30 seconds this message is displayed:

If the internet connection is reestablished and the user clicks the Retry button, the Login screen is presented.
If the user clicks the Retry button before the Internet connection has be reestablished, the browser issues a message.

On Macbook and Firefox, the results are similar, but the last message is different

@cckozie I am not seeing what you are seeing. When you say disconnect from internet, are you disconnecting your ethernet or wifi? Or are you disconnecting your cable modem?

FYI - what I saw reproducing your steps (disconnecting the WIFI):

• the first time Chrome showed a white screen with message that page could not be loaded. Unfortunately settings is a new page that hadn't yet been cached in Chrome, so no luck loading page. Don't know if there is a simple solution for that
• the second time I did the steps, Chrome immediately showed:

[PhotoNomad0]

@cckozie On Firefox I see a very long delay before seeing the above popup. Likely because the page is already cached.

If I clear the firefox webpage cache, it while take me to a white page with error message that page could not be loaded.

[PhotoNomad0]

@cckozie I am seeing an incorrect error when I disable the WAN connection in the router. It is showing your first error message, and then after a long delay replacing with the correct error message. Looks like the text in red is showing the older message until the network checking times out. Taking a look into how to improved that.

[PhotoNomad0]

@cckozie @elsylambert @birchamp - I'm thinking of adding a timeout when checking that DCS is responding. Does 5 seconds sound good enough?

It's a difficult balance since you don't want to set the wait too low or you will get too many annoying popups on a slow connection. But waiting for 10 seconds will seem like an eternity to the user.

[PhotoNomad0]

In standup it was decided to set timeout to 5 seconds the first time, and maybe 10 seconds on retry.

[cckozie]

@PhotoNomad0 - Just to clarify, when I say disconnect from Internet, that is disconnecting the router from the cable modem.

[PhotoNomad0]

@cckozie @elsylambert Fixes for long networking timeouts are here: https://develop--gateway-edit.netlify.app/, v1.0.0 build b334dd8

[elsylambert]

Wrote up my observation in #229- when user tries to close the network error modal in the Project page, the app seems to be stuck.

[cckozie]

v0.9.0 build b6be351

1. Navigate to Accounts Settings from main page with WiFi off, use Retry:

• Quickly displays Network Error modal
• Clicking Retry causes browser's No internet page
• When WiFi is turned on, Login page is displayed
• Logging in takes user to Account Settings page with last values displayed (I expected the main page)
  Written up in App should not force a new login when user clicks Retry after a communications error. #244

2. Navigate to Accounts Settings from main page with WiFi off, use Cancel:

• Quickly displays Network Error modal
• Clicking Cancel only removes the error modal and clears the Organization dropdown
• When WiFi is turned on, nothing happens. The Organization dropdown list will not open (it should)
• Clicking Save and Continue takes the user to the main page even though the Organization control was empty on the Account Settings page.

3. Turn WiFi off when on login page:

• When the Login button is clicked, a different Network Error modal is displayed. This one with only a Close button. (I think this should be the same error modal as in 1. and 2. above with Retry and Cancel options)
• When the Close button is clicked, the error modal is dismissed and the message "Something went wrong, please try again." is displayed on the login page. (At this point we know what went wrong and should display that rather than "something".
• Same thing repeats if the Login button is clicked again with still no WiFi
• After the WiFi is turned on and the Login button clicked, the user is taken to the Account Settings page with last values displayed (I expected the main page)
  Written up in Rework the network error handling on the login page. #246

4. Change reference with WiFi off, use Retry:

• It momentarily looks like the cards are being updated, but the the two button Network Error modal is displayed
• Clicking Retry causes browser's No internet page
• When WiFi is turned on, Login page is displayed
• Logging in takes user to the main page with the newly selected reference (I think that's correct, but was expecting the Accounts Setting page as in 1. above.

5. Change reference with WiFi off, use Cancel:

• It momentarily looks like the cards are being updated, but the the two button Network Error modal is displayed
• Clicking Cancel (or the X in the modal's title bar) dismisses the error modal and momentarily displays the main page, but then quickly redisplays the error modal. (noted above by Elsy on Unable to cancel the Network error modal when user is on Project page #229)

6. Changing tN and tW checks with WiFi off still work.

7. Changing scriptures with WiFi off:

• Can change cards to display any other currently displayed or previously loaded scripture.
• When attempting to load a new scripture via URL, instead of a Network Error modal being displayed, this is displayed:
  
• When the WiFi is restored, the user is still unable to load the attempted scripture, and the card still shows the error.
• That scripture, in this case the ULB, now shows in the dropdown list but it cannot be loaded. This problem can be resolved by logging out and back in.
  Written up in Problems caused if a network error occurs while attempting to load a new scripture resource #247

8. Navigate to Accounts Settings from main page with WiFi connected but no internet, use retry:

• Displays Network Error modal after 30 - 80 seconds
• Loading... is displayed below the organization field
• Clicking Retry causes browser's No internet page to be displayed after about 30 seconds
• When internet is available and the refresh button is clicked, Login page is displayed
• Logging in takes user to Account Settings page with last values displayed (I expected the main page)

9. Navigate to Accounts Settings from main page with WiFi connected but no internet, use cancel:

• Displays Network Error modal after 30 - 80 seconds
• Loading... is displayed below the organization field
  Case A: User clicks in the Organization field:
• Clicking Cancel removes the error modal and changes the message below the Organization field to "Please check your internet connection. The application is unable to reach the server."
• When the internet is reconnected, nothing happens. The Organization dropdown list will not open (it should)
• Clicking Save and Continue takes the user to the main page even though the Organization control was empty on the Account Settings page.
  Case B: User does not click in the Organization field:
• After about 60 seconds the message below the Organization field is changed to "The application can not continue. The current username is not part of a DCS organization. Please contact your administrator." After about another 60 seconds the two button Network Error modal is displayed with the text "timeout of 0ms exceeded".
• Clicking cancel and then Save and Continue, the main page is displayed with most of the cards showing the Loading... message. After xx seconds, the two button Network Error modal is displayed with the message "Please check your internet connection. The application is unable to reach the server.
• If the user clicks the Retry button, after 30 seconds the browser's No internet page is displayed.

10. Internet is lost when on login page:

• When the Login button is clicked, nothing happens for about 60 seconds at which time the "Something went wrong, please try again." message is displayed on the Login page.
• After a few more seconds, the single button Network Error modal is displayed with the message "Please check your internet connection. The application is unable to reach the server."
• When the Close button is clicked, the error modal is dismissed and nothing else happens.
• If the Login button is clicked again, the same cycle repeats but now it takes up to 120 seconds before the Network Error modal is displayed.
• After the internet is reconnected and the Login button clicked, the user is taken to the main page.

11. Change reference with internet disconnected:

• After about 2 minutes all of the cards display content not available or equivalent
• After another 3 minutes (total of 5) there is still no indication of a network problem.
• Clicking Retry causes browser's No internet page
• When internet is reconnected nothing happens, but the user is allowed to navigate to the Login page and log in.

12. Changing tN and tW checks with Internet disconnected still work.

13. Changing scriptures with Internet disconnected:

• Behavior is the same as in 7. above.

[elsylambert]

1.0.0 build 1c04778.
As per the DOD, getting the HTTP error messages for 4 cases, when the network is lost, connection to the server is lost, server error and authentication error when the user is no longer logged in.