Rework main.tsx

Author: andreaskienle

package-lock.json

@@ -32,6 +32,7 @@
     "react": "19.0.0",
     "react-code-blocks": "^0.1.6",
     "react-dom": "19.0.0",
+    "react-error-boundary": "^5.0.0",
     "react-hook-form": "^7.54.2",
     "react-i18next": "^15.4.1",
     "react-oidc-context": "^3.2.0",

package.json

@@ -118,9 +118,6 @@
   "EditMembers": {
     "addButton": "Add"
   },
-  "FrontendConfigContext": {
-    "errorMessage": "useFrontendConfig must be used within a FrontendConfigProvider"
-  },
   "ControlPlaneListView": {
     "projectHeader": "Project:"
   },
@@ -141,9 +138,6 @@
   "App": {
     "loading": "Loading..."
   },
-  "main": {
-    "failedMessage": "Failed to load frontend configuration"
-  },
   "Providers": {
     "headerProviders": "Providers",
     "tableHeaderVersion": "Version",

public/locales/en.json

@@ -0,0 +1,26 @@
+import { ReactNode, use } from 'react';
+import { AuthProvider, AuthProviderProps } from 'react-oidc-context';
+import { useFrontendConfig } from './FrontendConfigContext.tsx';
+import { LoadCrateKubeConfig } from '../lib/oidc/crate.ts';
+
+interface AuthProviderOnboardingProps {
+  children?: ReactNode;
+}
+
+// Promise needs to be cached
+// https://react.dev/blog/2024/12/05/react-19#use-does-not-support-promises-created-in-render
+const fetchAuthPromiseCache = new Map<string, Promise<AuthProviderProps>>();
+
+export function AuthProviderOnboarding({
+  children,
+}: AuthProviderOnboardingProps) {
+  const { backendUrl } = useFrontendConfig();
+
+  const fetchAuthConfigPromise =
+    fetchAuthPromiseCache.get(backendUrl) ?? LoadCrateKubeConfig(backendUrl);
+  fetchAuthPromiseCache.set(backendUrl, fetchAuthConfigPromise);
+
+  const authConfig = use(fetchAuthConfigPromise);
+
+  return <AuthProvider {...authConfig}>{children}</AuthProvider>;
+}

src/context/AuthProviderOnboarding.tsx

@@ -1,6 +1,5 @@
-import { FC, ReactNode, createContext, useContext } from 'react';
+import { ReactNode, createContext, use } from 'react';
 import { DocLinkCreator } from '../lib/shared/links';
-import { useTranslation } from 'react-i18next';
 
 export enum Landscape {
   Live = 'LIVE',
@@ -9,49 +8,47 @@ export enum Landscape {
   Development = 'DEV',
 }
 
-export interface FrontendConfig {
+interface FrontendConfigContextProps {
   backendUrl: string;
   landscape?: Landscape;
   documentationBaseUrl: string;
-}
-
-export interface FrontendConfigProviderProps extends FrontendConfig {
   links: DocLinkCreator;
 }
 
-const FrontendConfigContext = createContext<FrontendConfigProviderProps | null>(
+const FrontendConfigContext = createContext<FrontendConfigContextProps | null>(
   null,
 );
 
-export const useFrontendConfig = () => {
-  const c = useContext(FrontendConfigContext);
-  const { t } = useTranslation();
-
-  if (!c) {
-    throw new Error(t('FrontendConfigContext.errorMessage'));
-  }
-  return c;
-};
+const fetchPromise = fetch('/frontend-config.json').then((res) => res.json());
 
-export const FrontendConfigProvider: FC<{
+interface FrontendConfigProviderProps {
   children: ReactNode;
-  config: FrontendConfig;
-}> = ({ children, config }) => {
+}
+
+export function FrontendConfigProvider({
+  children,
+}: FrontendConfigProviderProps) {
+  const config = use(fetchPromise);
   const docLinks = new DocLinkCreator(config.documentationBaseUrl);
+  const value: FrontendConfigContextProps = {
+    links: docLinks,
+    backendUrl: config.backendUrl,
+    landscape: config.landscape,
+    documentationBaseUrl: config.documentationBaseUrl,
+  };
+
   return (
-    <FrontendConfigContext.Provider
-      value={{
-        links: docLinks,
-        backendUrl: config.backendUrl,
-        landscape: config.landscape,
-        documentationBaseUrl: config.documentationBaseUrl,
-      }}
-    >
-      {children}
-    </FrontendConfigContext.Provider>
+    <FrontendConfigContext value={value}>{children}</FrontendConfigContext>
   );
-};
-
-export async function LoadFrontendConfig(): Promise<FrontendConfig> {
-  return fetch('/frontend-config.json').then((res) => res.json());
 }
+
+export const useFrontendConfig = () => {
+  const context = use(FrontendConfigContext);
+
+  if (!context) {
+    throw new Error(
+      'useFrontendConfig must be used within a FrontendConfigProvider.',
+    );
+  }
+  return context;
+};

src/context/FrontendConfigContext.tsx

@@ -3,7 +3,7 @@ import { GetAuthPropsForCurrentContext } from './shared.ts';
 
 export function LoadCrateKubeConfig(
   backendUrl: string,
-): Promise<AuthProviderProps | void> {
+): Promise<AuthProviderProps> {
   const uri = backendUrl + '/.well-known/openmcp/kubeconfig';
 
   return fetch(uri)

src/lib/oidc/crate.ts

@@ -1,32 +1,33 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
+import React, { Suspense } from 'react';
+import { createRoot } from 'react-dom/client';
 import './index.css';
 import App from './App';
-import { ThemeProvider } from '@ui5/webcomponents-react';
-import { AuthProvider } from 'react-oidc-context';
-import { LoadCrateKubeConfig } from './lib/oidc/crate.ts';
+import { BusyIndicator, ThemeProvider } from '@ui5/webcomponents-react';
 import { SWRConfig } from 'swr';
 import { ToastProvider } from './context/ToastContext.tsx';
 import { CopyButtonProvider } from './context/CopyButtonContext.tsx';
-import {
-  FrontendConfigProvider,
-  LoadFrontendConfig,
-} from './context/FrontendConfigContext.tsx';
+import { FrontendConfigProvider } from './context/FrontendConfigContext.tsx';
 import '@ui5/webcomponents-react/dist/Assets'; //used for loading themes
 import { DarkModeSystemSwitcher } from './components/Core/DarkModeSystemSwitcher.tsx';
 import '.././i18n.ts';
 import './utils/i18n/timeAgo';
-import { useTranslation } from 'react-i18next';
+import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
+import IllustratedError from './components/Shared/IllustratedError.tsx';
+import { AuthProviderOnboarding } from './context/AuthProviderOnboarding.tsx';
 
-(async () => {
-  try {
-    const frontendConfig = await LoadFrontendConfig();
-    const authconfig = await LoadCrateKubeConfig(frontendConfig.backendUrl);
+const ErrorFallback = ({ error }: FallbackProps) => {
+  return <IllustratedError error={error} />;
+};
 
-    ReactDOM.createRoot(document.getElementById('root')!).render(
-      <React.StrictMode>
-        <FrontendConfigProvider config={frontendConfig}>
-          <AuthProvider key={'crate'} {...authconfig}>
+const rootElement = document.getElementById('root');
+const root = createRoot(rootElement!);
+
+root.render(
+  <React.StrictMode>
+    <ErrorBoundary FallbackComponent={ErrorFallback} onReset={() => {}}>
+      <Suspense fallback={<BusyIndicator active />}>
+        <FrontendConfigProvider>
+          <AuthProviderOnboarding>
             <ThemeProvider>
               <ToastProvider>
                 <CopyButtonProvider>
@@ -41,17 +42,9 @@ import { useTranslation } from 'react-i18next';
                 </CopyButtonProvider>
               </ToastProvider>
             </ThemeProvider>
-          </AuthProvider>
+          </AuthProviderOnboarding>
         </FrontendConfigProvider>
-      </React.StrictMode>,
-    );
-  } catch (e) {
-    const { t } = useTranslation();
-    console.error('failed to load frontend configuration or kubeconfig', e);
-    ReactDOM.createRoot(document.getElementById('root')!).render(
-      <React.StrictMode>
-        <div>{t('main.failedMessage')}=</div>
-      </React.StrictMode>,
-    );
-  }
-})();
+      </Suspense>
+    </ErrorBoundary>
+  </React.StrictMode>,
+);