Improve error handling when offline

[smashwilson]

Please be sure to read the contributor's guide to the GitHub package before submitting any pull requests.

Requirements

• Filling out the template is required. Any pull request that does not include enough information to be reviewed in a timely manner may be closed at the maintainers' discretion.
• Suggestion: You can use checklists to keep track of progress for the sections on metrics, tests, documentation, and user research.

Description of the Change

When the network is unavailable, the GitHub package behaves poorly:

• When starting or reloading Atom, the "log in to GitHub" view is shown from each Relay-backed view, which, of course, doesn't work.
• If the network becomes unavailable after Atom is already open, the next attempted network operation brings down the package hard with an uncaught exception.
• Relay actions that users explicitly initiate (like clicking on a refresh button, or triggering a mutation) uniformly create Atom error notifications, with customized messaging for the offline case.

I'm introducing:

• A special <QueryErrorView> case that recognizes network errors and offers to open the dev tools for more investigation. (Unfortunately, the errors thrown by fetch are TypeError instances with little information and a message of "fetch failed.")
• Create an alternate blank-slate case to show in place of the <GithubLoginView> when the network is unavailable.
• Ensure that further changes in network state are detected when offline so we can re-render again.
• Separate messaging for "offline" from "non-200, non-401 statuses"
• Handle the issueish tiles in the GitHub tab
• Preserve existing data and notify instead if a refetch fails, so you don't lose cached data.

Screenshots

When a user attempts to open a new item that uses Relay data (an issueish detail item, the reviews tab) while the network is offline, including items created during window state deserialization (like a reload):

When a user attempts to click a refresh button or perform a mutation while offline:

When the network dies in between the git fetch completing and the Relay refetch triggering somehow:

Alternate Designs

N/A

Benefits

Users on spotty wi-fi or airplanes can have a gracefully degraded Atom experience and informative error states.

Possible Drawbacks

The errors thrown by the fetch API are (deliberately, I believe) very vague. It's possible that we could report that a user is offline when they have misconfigured DNS or proxy settings, for example. The underlying OS network error is shown in the developer tools, but we have no way to read it.

Applicable Issues

Fixes#1844.

Metrics

N/A

Tests

I did manual testing both by toggling network connectivity in the dev tools and by actually disabling and enabling wi-fi.

Interestingly, the 'online' event that I'm using to auto-retry from an OfflineView doesn't seem to fire the first time you uncheck the "Offline" button in the dev tools, but it does every subsequent time. The event fired when I expected it to when the wi-fi was actually restored so I didn't investigate further.

Documentation

N/A

Release Notes

• The GitHub package reports clearer errors when no network connection is available.

User Experience Research (Optional)

N/A

[codecov]

Codecov Report

Merging #2128 into master will increase coverage by 0.14%.
The diff coverage is 100%.

@@ Coverage Diff @@## master #2128 +/- ##
==========================================
+ Coverage 92.53% 92.68% +0.14% 
==========================================
Files 212 213 +1 Lines 12171 12188 +17 Branches 1779 1788 +9 ==========================================
+ Hits 11263 11296 +33 + Misses 908 892 -16

Impacted Files	Coverage Δ
lib/views/reviews-view.js	87.8% <ø> (ø)	⬆️
lib/items/reviews-item.js	100% <ø> (ø)	⬆️
lib/controllers/issueish-detail-controller.js	100% <ø> (ø)	⬆️
lib/items/issueish-detail-item.js	98.38% <ø> (ø)	⬆️
lib/containers/reviews-container.js	100% <100%> (+4.76%)	⬆️
lib/controllers/emoji-reactions-controller.js	100% <100%> (ø)	⬆️
lib/controllers/reviews-controller.js	100% <100%> (ø)	⬆️
lib/models/github-login-model.js	89.65% <100%> (-0.18%)	⬇️
lib/containers/remote-container.js	100% <100%> (ø)	⬆️
lib/views/error-view.js	100% <100%> (+11.11%)	⬆️
... and 14 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update edbb26d...8b47553. Read the comment docs.

[vanessayuenn]

Thanks for tackling this! The new offline view looks good and the message is very clear 👍 . I have got a couple of questions; they're mainly for my own understanding and are not blockers.