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.
This commit is contained in:
giancarlo
2024-04-16 15:36:23 +08:00
parent eaa163935b
commit 76520a35b6
2 changed files with 20 additions and 15 deletions

View File

@@ -1,5 +1,7 @@
'use client'; 'use client';
import { Suspense } from 'react';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
@@ -44,22 +46,24 @@ export function RootProviders({
return ( return (
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<ReactQueryStreamedHydration> <ReactQueryStreamedHydration>
<I18nProvider settings={i18nSettings} resolver={i18nResolver}> <Suspense>
<CaptchaProvider> <I18nProvider settings={i18nSettings} resolver={i18nResolver}>
<CaptchaTokenSetter siteKey={captchaSiteKey} /> <CaptchaProvider>
<CaptchaTokenSetter siteKey={captchaSiteKey} />
<AuthChangeListener appHomePath={pathsConfig.app.home}> <AuthChangeListener appHomePath={pathsConfig.app.home}>
<ThemeProvider <ThemeProvider
attribute="class" attribute="class"
enableSystem enableSystem
disableTransitionOnChange disableTransitionOnChange
defaultTheme={theme} defaultTheme={theme}
> >
{children} {children}
</ThemeProvider> </ThemeProvider>
</AuthChangeListener> </AuthChangeListener>
</CaptchaProvider> </CaptchaProvider>
</I18nProvider> </I18nProvider>
</Suspense>
</ReactQueryStreamedHydration> </ReactQueryStreamedHydration>
</QueryClientProvider> </QueryClientProvider>
); );

View File

@@ -43,6 +43,7 @@ export function initializeI18nClient(
}, },
(err) => { (err) => {
if (err) { if (err) {
console.error('Error initializing i18n client', err);
return reject(err); return reject(err);
} }