From 542c70e6f3a9cb78089690b851460342b4348bc7 Mon Sep 17 00:00:00 2001
From: jrmyb <9062561+jrmyb@users.noreply.github.com>
Date: Thu, 24 Aug 2023 09:43:17 +0200
Subject: [PATCH] [data-studio] handle network errors on global-lang (#306)

---
 .../components/app/ApolloHandler/ApolloHandler.tsx  |  8 ++++++++
 apps/data-studio/src/locales/en/translations.json   |  1 +
 apps/data-studio/src/locales/fr/translations.json   |  1 +
 .../ui/src/components/ErrorDisplay/ErrorDisplay.tsx |  4 ++--
 libs/ui/src/hooks/useAppLang/useAppLang.tsx         | 13 ++++++++++++-
 5 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/apps/data-studio/src/components/app/ApolloHandler/ApolloHandler.tsx b/apps/data-studio/src/components/app/ApolloHandler/ApolloHandler.tsx
index dcbbd699f..bba5f6baf 100644
--- a/apps/data-studio/src/components/app/ApolloHandler/ApolloHandler.tsx
+++ b/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 = {
diff --git a/apps/data-studio/src/locales/en/translations.json b/apps/data-studio/src/locales/en/translations.json
index b4a1f8d83..1553c5a4c 100644
--- a/apps/data-studio/src/locales/en/translations.json
+++ b/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"
diff --git a/apps/data-studio/src/locales/fr/translations.json b/apps/data-studio/src/locales/fr/translations.json
index 90a88c77b..8291a3d4b 100644
--- a/apps/data-studio/src/locales/fr/translations.json
+++ b/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"
diff --git a/libs/ui/src/components/ErrorDisplay/ErrorDisplay.tsx b/libs/ui/src/components/ErrorDisplay/ErrorDisplay.tsx
index eb20b7555..90fe6cefd 100644
--- a/libs/ui/src/components/ErrorDisplay/ErrorDisplay.tsx
+++ b/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
diff --git a/libs/ui/src/hooks/useAppLang/useAppLang.tsx b/libs/ui/src/hooks/useAppLang/useAppLang.tsx
index 42b5c0133..95f17f53a 100644
--- a/libs/ui/src/hooks/useAppLang/useAppLang.tsx
+++ b/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);
         }