fix: adding error handling when unable to connect to marble when loggin + improve error messages

Author: carere

packages/app-builder/src/components/Auth/AuthError.tsx

@@ -9,6 +9,7 @@ const errorLabels: Record<AuthErrors, ParseKeys<typeof authI18n>> = {
   NoAccount: 'auth:errors.no_account',
   CSRFError: 'auth:errors.csrf_error',
   Unknown: 'common:errors.unknown',
+  BackendUnavailable: 'common:errors.backend_unvailable',
 };
 
 export function AuthError({

packages/app-builder/src/locales/ar/common.json

@@ -22,7 +22,6 @@
   "errors.data.duplicate_link_name": "هذا الرابط  موجود مسبقًا.",
   "errors.add_to_case.invalid": "هذا القرار مرتبط بالحالة مسبقا",
   "errors.firebase_auth_error": "حدث خطأ في المصادقة. يرجى محاولة تسجيل الدخول مرة أخرى.",
-  "errors.firebase_network_error": "حدث خطأ في الشبكة. يرجى محاولة تسجيل الدخول مرة أخرى.",
   "cancel": "الغاء",
   "save": "حفظ",
   "delete": "حذف",
@@ -62,5 +61,7 @@
   "check_on_docs": "تعرف على المزيد حول وثائقنا",
   "github_banner": "هل أعجبك تطبيق ماربل؟ \nادعم مجهود المصدر المفتوح من خلال إعطائنا نجمة",
   "premium": "ميزة متميزة",
-  "upgrade": "قم بالترقية الآن"
+  "upgrade": "قم بالترقية الآن",
+  "errors.backend_unvailable": "لا يمكن لتطبيق Marble التواصل مع الواجهة الخلفية لـ Marble. \nقم إما بالتحقق من التكوين الخاص بك أو حاول مرة أخرى لاحقًا.",
+  "errors.firebase_network_error": "يواجه الرخام بعض الصعوبات في الاتصال بـ Firebase. \nقم إما بالتحقق من تكوين Firebase أو حاول مرة أخرى لاحقًا."
 }

packages/app-builder/src/locales/en/common.json

@@ -14,6 +14,7 @@
   "validation_error_other": "{{count}} validation errors",
   "errors.forbidden.title": "Forbidden",
   "errors.forbidden.subtitle": "You don't have permission to access this page",
+  "errors.backend_unvailable": "The Marble app cannot communicate with the Marble backend. Either check your configuration or try again later.",
   "errors.unknown": "An unknown error as occured",
   "errors.account_exists_with_different_credential": "An account already exists with the same email address but different sign-in credentials. Sign in using a provider associated with this email address.",
   "errors.popup_blocked_by_client": "The popup has been blocked. Please <EnablePopup>enable popups</EnablePopup> and try again.",
@@ -27,7 +28,7 @@
   "errors.data.duplicate_link_name": "A link with this name already exist",
   "errors.add_to_case.invalid": "A decision already belongs to a case",
   "errors.firebase_auth_error": "An auth error occured. Try to log in again.",
-  "errors.firebase_network_error": "A network error occured. Try to log in again.",
+  "errors.firebase_network_error": "Marble has some difficulties to connect to Firebase. Either check your Firebase's configuration or try again later.",
   "errors.too_many_requests": "Too many requests. Please try again later.",
   "cancel": "Cancel",
   "check_on_docs": "Learn more on our documentation",

packages/app-builder/src/locales/fr/common.json

@@ -29,7 +29,6 @@
   "errors.data.duplicate_link_name": "Un lien avec ce nom existe déjà",
   "errors.data.duplicate_table_name": "Une table portant ce nom existe déjà",
   "errors.firebase_auth_error": "Une erreur d'authentification s'est produite. \nEssayez de vous connecter à nouveau.",
-  "errors.firebase_network_error": "Une erreur réseau s'est produite. \nEssayez de vous connecter à nouveau.",
   "errors.forbidden.subtitle": "Vous n'êtes pas autorisé à accéder à cette page",
   "errors.forbidden.title": "Accès interdit",
   "errors.list.duplicate_email": "Cet email est déjà utilisé",
@@ -62,5 +61,7 @@
   "check_on_docs": "En savoir plus sur notre documentation",
   "github_banner": "Aimez-vous l'application Marble ? Dites le nous en nous attribuant une étoile sur",
   "premium": "Fonctionnalité Premium",
-  "upgrade": "Mettre à niveau maintenant"
+  "upgrade": "Mettre à niveau maintenant",
+  "errors.backend_unvailable": "L'application Marble ne peut pas communiquer avec le backend Marble. \nVérifiez votre configuration ou réessayez ultérieurement.",
+  "errors.firebase_network_error": "Marble a quelques difficultés à se connecter à Firebase. \nVérifiez la configuration de Firebase ou réessayez ultérieurement."
 }

packages/app-builder/src/models/auth-errors.ts

@@ -2,7 +2,11 @@ import { CSRFError } from 'remix-utils/csrf/server';
 
 import { isMarbleError, isUnauthorizedHttpError } from './http-errors';
 
-export type AuthErrors = 'NoAccount' | 'CSRFError' | 'Unknown';
+export type AuthErrors =
+  | 'NoAccount'
+  | 'CSRFError'
+  | 'BackendUnavailable'
+  | 'Unknown';
 
 export function adaptAuthErrors(error: unknown): AuthErrors {
   if (error instanceof CSRFError) {

packages/app-builder/src/routes/_auth+/sign-in.tsx

@@ -17,6 +17,7 @@ import {
   useLoaderData,
   useSearchParams,
 } from '@remix-run/react';
+import { tryit } from 'radash';
 import { Trans, useTranslation } from 'react-i18next';
 import { safeRedirect } from 'remix-utils/safe-redirect';
 
@@ -30,10 +31,15 @@ export async function loader({ request }: LoaderFunctionArgs) {
     successRedirect: getRoute('/app-router'),
   });
   const session = await authSessionService.getSession(request);
-  const error = session.get('authError');
+  const [backendError, isSsoEnabled] = await tryit(
+    licenseService.isSsoEnabled,
+  )();
+
   return json({
-    authError: error?.message,
-    isSsoEnabled: await licenseService.isSsoEnabled(),
+    authError: backendError
+      ? 'BackendUnavailable'
+      : session.get('authError')?.message,
+    isSsoEnabled,
   });
 }