From 76520a35b6ebdc61218f297fd7ff06e7452f8115 Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Tue, 16 Apr 2024 15:36:23 +0800
Subject: [PATCH] Add error logging and Suspense component

Added error logging to the i18n client initialization to better handle and trace errors. Introduced React's Suspense component in `root-providers.tsx` to provide a fallback UI in case a component within the tree is not yet ready to render.
---
 apps/web/components/root-providers.tsx | 34 ++++++++++++++------------
 packages/i18n/src/i18n.client.ts       |  1 +
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/apps/web/components/root-providers.tsx b/apps/web/components/root-providers.tsx
index ad69e9c27..462627d77 100644
--- a/apps/web/components/root-providers.tsx
+++ b/apps/web/components/root-providers.tsx
@@ -1,5 +1,7 @@
 'use client';
 
+import { Suspense } from 'react';
+
 import dynamic from 'next/dynamic';
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
@@ -44,22 +46,24 @@ export function RootProviders({
   return (
     <QueryClientProvider client={queryClient}>
       <ReactQueryStreamedHydration>
-        <I18nProvider settings={i18nSettings} resolver={i18nResolver}>
-          <CaptchaProvider>
-            <CaptchaTokenSetter siteKey={captchaSiteKey} />
+        <Suspense>
+          <I18nProvider settings={i18nSettings} resolver={i18nResolver}>
+            <CaptchaProvider>
+              <CaptchaTokenSetter siteKey={captchaSiteKey} />
 
-            <AuthChangeListener appHomePath={pathsConfig.app.home}>
-              <ThemeProvider
-                attribute="class"
-                enableSystem
-                disableTransitionOnChange
-                defaultTheme={theme}
-              >
-                {children}
-              </ThemeProvider>
-            </AuthChangeListener>
-          </CaptchaProvider>
-        </I18nProvider>
+              <AuthChangeListener appHomePath={pathsConfig.app.home}>
+                <ThemeProvider
+                  attribute="class"
+                  enableSystem
+                  disableTransitionOnChange
+                  defaultTheme={theme}
+                >
+                  {children}
+                </ThemeProvider>
+              </AuthChangeListener>
+            </CaptchaProvider>
+          </I18nProvider>
+        </Suspense>
       </ReactQueryStreamedHydration>
     </QueryClientProvider>
   );
diff --git a/packages/i18n/src/i18n.client.ts b/packages/i18n/src/i18n.client.ts
index eeef62276..98d00c8f6 100644
--- a/packages/i18n/src/i18n.client.ts
+++ b/packages/i18n/src/i18n.client.ts
@@ -43,6 +43,7 @@ export function initializeI18nClient(
         },
         (err) => {
           if (err) {
+            console.error('Error initializing i18n client', err);
             return reject(err);
           }