[Data-Studio] Handle network error

apps/data-studio/src/components/app/ApolloHandler/ApolloHandler.tsx

@@ -97,6 +97,14 @@ function ApolloHandler({children}: IApolloHandlerProps): JSX.Element {
         }
 
         if (networkError) {
+            // Check if error response is JSON
+            try {
+                JSON.parse(networkError.message);
+            } catch (e) {
+                // If not replace parsing error message with real one
+                networkError.message = t('error.network_error_occured_details');
+            }
+
             const errorContent = t('error.network_error_occurred');
 
             const info: IInfo = {

apps/data-studio/src/locales/en/translations.json

@@ -459,6 +459,7 @@
         "access_denied_details": "You are not allowed to access this element, please contact an administrator",
         "graphql_error_occurred": "An error ocurred: {{error}}",
         "network_error_occurred": "An network error occurred",
+        "network_error_occured_details": "Unable to connect to server. Please check your Internet connection.",
         "PERMISSION_ERROR": "You are not allowed to perform this action",
         "INTERNAL_ERROR": "An internal error occurred",
         "page_not_found": "Page not found"

apps/data-studio/src/locales/fr/translations.json

@@ -460,6 +460,7 @@
         "access_denied_details": "Vous n'êtes pas autorisé à accéder à cet élément, veuillez contacter un administrateur.",
         "graphql_error_occurred": "Une erreur est survenue: {{error}}",
         "network_error_occurred": "Une erreur de connexion est survenue",
+        "network_error_occured_details": "Impossible de se connecter au serveur. Veuillez vérifier votre connexion Internet.",
         "PERMISSION_ERROR": "Vous n'êtes pas autorisé à effectuer cette action",
         "INTERNAL_ERROR": "Une erreur interne est survenue",
         "page_not_found": "La page demandée n'existe pas"

libs/ui/src/components/ErrorDisplay/ErrorDisplay.tsx

@@ -26,7 +26,7 @@ function ErrorDisplay({
     showActionButton = true,
     type = ErrorDisplayTypes.ERROR
 }: IErrorProps): JSX.Element {
-    const {t} = useTranslation();
+    const {t, i18n} = useTranslation();
     const history = useHistory();
 
     const _handleBackHomeClick = () => history.replace('/');
@@ -39,7 +39,7 @@ function ErrorDisplay({
 
     const errorByType = {
         [ErrorDisplayTypes.ERROR]: {
-            title: t('error.error_occurred'),
+            title: i18n.isInitialized ? t('error.error_occurred') : 'An error occurred',
             icon: <CloseCircleFilled color="red" />,
             message: '',
             actionButton: null

libs/ui/src/hooks/useAppLang/useAppLang.tsx

@@ -11,10 +11,21 @@ export default function useAppLang() {
     const _fetchLang = async () => {
         try {
             const res = await fetch('/global-lang', {method: 'GET'});
+
+            // make the promise be rejected if we didn't get a 2xx response
+            if (!res.ok) {
+                throw new Error(
+                    res.status === 404
+                        ? 'Unable to connect to server. Please check your Internet connection.'
+                        : res.statusText,
+                    {cause: res}
+                );
+            }
+
             const resContent = await res.text();
             setLang(resContent);
         } catch (err) {
-            setError(String(err));
+            setError(err.message);
         } finally {
             setIsLoading(false);
         }