login: Equalize user-facing errors across both api.getUserSettings calls

Also make them a bit more descriptive, de-duplicate the logic for
what text to show the user, and add some TODOs for further
improvements.

src/message/fetchAction.js works OK as a place for this new
function, though not perfectly.

Author: chrisbobbe

src/account/AccountPickScreen.js

@@ -4,20 +4,19 @@ import React, { useContext, useCallback } from 'react';
 import type { Node } from 'react';
 import invariant from 'invariant';
 
-import * as api from '../api';
+import { fetchServerSettings } from '../message/fetchActions';
 import { TranslationContext } from '../boot/TranslationProvider';
 import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
 import { useGlobalSelector, useGlobalDispatch } from '../react-redux';
-import { getAccountStatuses, getAccountsByIdentity } from '../selectors';
+import { getAccountStatuses, getAccountsByIdentity, getGlobalSettings } from '../selectors';
 import Centerer from '../common/Centerer';
 import ZulipButton from '../common/ZulipButton';
 import Logo from '../common/Logo';
 import Screen from '../common/Screen';
 import ViewPlaceholder from '../common/ViewPlaceholder';
 import AccountList from './AccountList';
 import { accountSwitch, removeAccount } from '../actions';
-import type { ServerSettings } from '../api/settings/getServerSettings';
 import { showConfirmationDialog, showErrorAlert } from '../utils/info';
 import { tryStopNotifications } from '../notification/notifTokens';
 
@@ -34,6 +33,8 @@ export default function AccountPickScreen(props: Props): Node {
   // doing so, of course).
   const accountsByIdentity = useGlobalSelector(getAccountsByIdentity);
 
+  const globalSettings = useGlobalSelector(getGlobalSettings);
+
   const dispatch = useGlobalDispatch();
   const _ = useContext(TranslationContext);
 
@@ -45,16 +46,25 @@ export default function AccountPickScreen(props: Props): Node {
           dispatch(accountSwitch(index));
         });
       } else {
-        try {
-          const serverSettings: ServerSettings = await api.getServerSettings(realm);
-          navigation.push('auth', { serverSettings });
-        } catch {
-          // TODO: show specific error message from error object
-          showErrorAlert(_('Failed to connect to server: {realm}', { realm: realm.toString() }));
+        const result = await fetchServerSettings(realm);
+        if (result.type === 'error') {
+          showErrorAlert(
+            _(result.title),
+            _(result.message),
+            result.learnMoreButton && {
+              url: result.learnMoreButton.url,
+              text:
+                result.learnMoreButton.text != null ? _(result.learnMoreButton.text) : undefined,
+              globalSettings,
+            },
+          );
+          return;
         }
+        const serverSettings = result.value;
+        navigation.push('auth', { serverSettings });
       }
     },
-    [accountStatuses, dispatch, navigation, _],
+    [accountStatuses, globalSettings, dispatch, navigation, _],
   );
 
   const handleAccountRemove = useCallback(

src/message/fetchActions.js

@@ -9,9 +9,10 @@ import type {
   Stream,
   ThunkAction,
   UserId,
+  LocalizableText,
 } from '../types';
 import * as api from '../api';
-import { Server5xxError, NetworkError } from '../api/apiErrors';
+import { Server5xxError, NetworkError, ApiError, MalformedResponseError } from '../api/apiErrors';
 import {
   getAuth,
   getRealm,
@@ -34,6 +35,7 @@ import { ALL_PRIVATE_NARROW, apiNarrowOfNarrow, caseNarrow, topicNarrow } from '
 import { BackoffMachine, promiseTimeout, TimeoutError } from '../utils/async';
 import { addToOutbox } from '../outbox/outboxActions';
 import { getAllUsersById, getOwnUserId } from '../users/userSelectors';
+import type { ServerSettings } from '../api/settings/getServerSettings';
 
 const messageFetchStart = (
   narrow: Narrow,
@@ -397,3 +399,60 @@ export const uploadFile =
 
     dispatch(addToOutbox(destinationNarrow, messageToSend));
   };
+
+export async function fetchServerSettings(realm: URL): Promise<
+  | {| +type: 'success', +value: ServerSettings |}
+  | {|
+      +type: 'error',
+      +title: LocalizableText,
+      +message: LocalizableText,
+      +learnMoreButton: {| +url: URL, +text?: LocalizableText |} | void,
+    |},
+> {
+  try {
+    return { type: 'success', value: await api.getServerSettings(realm) };
+    // TODO(#5102): Disallow connecting to ancient servers
+  } catch (errorIllTyped) {
+    const error: mixed = errorIllTyped;
+
+    const title = 'Could not connect';
+    let message = undefined;
+    let learnMoreButton = undefined;
+
+    // TODO(#4918): Recognize not-yet-implemented "org-deactivated" error;
+    //   see https://github.com/zulip/zulip/issues/19347
+    if (error instanceof ApiError && error.message.length > 0) {
+      // E.g., "Subdomain required".
+      message = {
+        text: 'The server at {realm} said:\n\n{message}',
+        values: { realm: realm.toString(), message: error.message },
+      };
+    } else if (error instanceof NetworkError) {
+      message = {
+        text: 'Could not connect to {realm}. Please check your network connection and try again.',
+        values: { realm: realm.toString() },
+      };
+    } else if (error instanceof MalformedResponseError && error.httpStatus === 404) {
+      message = {
+        text: 'The server at {realm} does not seem to be a Zulip server.',
+        values: { realm: realm.toString() },
+      };
+      learnMoreButton = {
+        text: 'Find your Zulip server URL',
+        url: new URL('https://zulip.com/help/logging-in#find-the-zulip-log-in-url'),
+      };
+    } else if (error instanceof Server5xxError) {
+      message = {
+        text: 'The server at {realm} encountered an error.',
+        values: { realm: realm.toString() },
+      };
+    } else {
+      message = {
+        text: 'Failed to connect to server: {realm}',
+        values: { realm: realm.toString() },
+      };
+    }
+
+    return { type: 'error', title, message, learnMoreButton };
+  }
+}

src/start/RealmInputScreen.js

@@ -6,17 +6,18 @@ import { useFocusEffect } from '@react-navigation/native';
 
 import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
-import type { ServerSettings } from '../api/settings/getServerSettings';
 import ZulipTextIntl from '../common/ZulipTextIntl';
 import Screen from '../common/Screen';
 import ZulipButton from '../common/ZulipButton';
 import { tryParseUrl } from '../utils/url';
-import * as api from '../api';
+import { fetchServerSettings } from '../message/fetchActions';
 import { ThemeContext } from '../styles/theme';
 import { createStyleSheet, HALF_COLOR } from '../styles';
 import { showErrorAlert } from '../utils/info';
 import { TranslationContext } from '../boot/TranslationProvider';
 import type { LocalizableText } from '../types';
+import { getGlobalSettings } from '../directSelectors';
+import { useGlobalSelector } from '../react-redux';
 
 type Props = $ReadOnly<{|
   navigation: AppNavigationProp<'realm-input'>,
@@ -61,6 +62,8 @@ const tryParseInput = (realmInputValue: string): MaybeParsedInput => {
 export default function RealmInputScreen(props: Props): Node {
   const { navigation, route } = props;
 
+  const globalSettings = useGlobalSelector(getGlobalSettings);
+
   const _ = React.useContext(TranslationContext);
   const themeContext = React.useContext(ThemeContext);
 
@@ -95,21 +98,24 @@ export default function RealmInputScreen(props: Props): Node {
     }
 
     setProgress(true);
-    try {
-      const serverSettings: ServerSettings = await api.getServerSettings(maybeParsedInput.value);
-      navigation.push('auth', { serverSettings });
-      Keyboard.dismiss();
-    } catch (errorIllTyped) {
-      const err: mixed = errorIllTyped; // https://github.com/facebook/flow/issues/2470
-      showErrorAlert(_('Cannot connect to server.'));
-      /* eslint-disable no-console */
-      console.warn('RealmInputScreen: failed to connect to server:', err);
-      // $FlowFixMe[incompatible-cast]: assuming caught exception was Error
-      console.warn((err: Error).stack);
-    } finally {
-      setProgress(false);
+    const result = await fetchServerSettings(maybeParsedInput.value);
+    setProgress(false);
+    if (result.type === 'error') {
+      showErrorAlert(
+        _(result.title),
+        _(result.message),
+        result.learnMoreButton && {
+          url: result.learnMoreButton.url,
+          text: result.learnMoreButton.text != null ? _(result.learnMoreButton.text) : undefined,
+          globalSettings,
+        },
+      );
+      return;
     }
-  }, [navigation, maybeParsedInput, _]);
+    const serverSettings = result.value;
+    navigation.push('auth', { serverSettings });
+    Keyboard.dismiss();
+  }, [navigation, maybeParsedInput, globalSettings, _]);
 
   const styles = React.useMemo(
     () =>

static/translations/messages_en.json

@@ -79,6 +79,12 @@
   "Please specify a valid stream.": "Please specify a valid stream.",
   "Please choose recipients.": "Please choose recipients.",
   "Message is empty.": "Message is empty.",
+  "Could not connect": "Could not connect",
+  "The server at {realm} said:\n\n{message}": "The server at {realm} said:\n\n{message}",
+  "Could not connect to {realm}. Please check your network connection and try again.": "Could not connect to {realm}. Please check your network connection and try again.",
+  "The server at {realm} does not seem to be a Zulip server.": "The server at {realm} does not seem to be a Zulip server.",
+  "Find your Zulip server URL": "Find your Zulip server URL",
+  "The server at {realm} encountered an error.": "The server at {realm} encountered an error.",
   "Failed to connect to server: {realm}": "Failed to connect to server: {realm}",
   "{_}": "{_}",
   "Home": "Home",
@@ -123,7 +129,6 @@
   "Chat": "Chat",
   "Sign in with {method}": "Sign in with {method}",
   "Invalid input": "Invalid input",
-  "Cannot connect to server.": "Cannot connect to server.",
   "Please enter a valid URL.": "Please enter a valid URL.",
   "Please enter the server URL, not your email.": "Please enter the server URL, not your email.",
   "Wrong email or password. Try again.": "Wrong email or password. Try again.",