feat: allow replace ErrorBoundary compponent (#744)

Author: ValeraS

src/components/ComponentsProvider/componentsRegistry.ts

@@ -2,10 +2,12 @@ import {StaffCard} from '../User/StaffCard';
 import {AsideNavigation} from '../../containers/AsideNavigation/AsideNavigation';
 
 import {ComponentsRegistryTemplate, Registry} from './registry';
+import {ErrorBoundaryInner} from '../ErrorBoundary/ErrorBoundary';
 
 const componentsRegistryInner = new Registry()
     .register('StaffCard', StaffCard)
-    .register('AsideNavigation', AsideNavigation);
+    .register('AsideNavigation', AsideNavigation)
+    .register('ErrorBoundary', ErrorBoundaryInner);
 
 export type ComponentsRegistry = ComponentsRegistryTemplate<typeof componentsRegistryInner>;
 

src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -6,57 +6,83 @@ import {Button, Disclosure} from '@gravity-ui/uikit';
 
 import {registerError} from '../../utils/registerError';
 import {Illustration} from '../Illustration';
+import {useComponent} from '../ComponentsProvider/ComponentsProvider';
 import i18n from './i18n';
 import './ErrorBoundary.scss';
 
 const b = cn('ydb-error-boundary');
 
+export function ErrorBoundary({children}: {children?: ReactNode}) {
+    const ErrorBoundaryComponent = useComponent('ErrorBoundary');
+    return <ErrorBoundaryComponent>{children}</ErrorBoundaryComponent>;
+}
+
 interface ErrorBoundaryProps {
     children?: ReactNode;
     useRetry?: boolean;
     onReportProblem?: (error?: Error) => void;
 }
 
-export const ErrorBoundary = ({children, useRetry = true, onReportProblem}: ErrorBoundaryProps) => {
+export function ErrorBoundaryInner({
+    children,
+    useRetry = true,
+    onReportProblem,
+}: ErrorBoundaryProps) {
     return (
         <ErrorBoundaryBase
             onError={(error, info) => {
                 registerError(error, info.componentStack, 'error-boundary');
             }}
             fallbackRender={({error, resetErrorBoundary}) => {
                 return (
-                    <div className={b(null)}>
-                        <Illustration name="error" className={b('illustration')} />
-                        <div className={b('content')}>
-                            <h2 className={b('error-title')}>{i18n('error-title')}</h2>
-                            <div className={b('error-description')}>
-                                {i18n('error-description')}
-                            </div>
-                            <Disclosure
-                                summary={i18n('show-details')}
-                                className={b('show-details')}
-                                size="m"
-                            >
-                                <pre className={b('error-details')}>{error.stack}</pre>
-                            </Disclosure>
-                            <div className={b('actions')}>
-                                {useRetry && (
-                                    <Button view="outlined" onClick={resetErrorBoundary}>
-                                        {i18n('button-reset')}
-                                    </Button>
-                                )}
-                                {onReportProblem && (
-                                    <Button view="outlined" onClick={() => onReportProblem(error)}>
-                                        {i18n('report-problem')}
-                                    </Button>
-                                )}
-                            </div>
-                        </div>
-                    </div>
+                    <ErrorBoundaryFallback
+                        error={error}
+                        useRetry={useRetry}
+                        resetErrorBoundary={resetErrorBoundary}
+                        onReportProblem={onReportProblem}
+                    />
                 );
             }}
         >
             {children}
         </ErrorBoundaryBase>
     );
-};
+}
+
+interface ErrorBoundaryFallbackProps {
+    error: Error;
+    useRetry?: boolean;
+    resetErrorBoundary: () => void;
+    onReportProblem?: (error?: Error) => void;
+}
+export function ErrorBoundaryFallback({
+    error,
+    resetErrorBoundary,
+    useRetry,
+    onReportProblem,
+}: ErrorBoundaryFallbackProps) {
+    return (
+        <div className={b()}>
+            <Illustration name="error" className={b('illustration')} />
+            <div className={b('content')}>
+                <h2 className={b('error-title')}>{i18n('error-title')}</h2>
+                <div className={b('error-description')}>{i18n('error-description')}</div>
+                <Disclosure summary={i18n('show-details')} className={b('show-details')} size="m">
+                    <pre className={b('error-details')}>{error.stack}</pre>
+                </Disclosure>
+                <div className={b('actions')}>
+                    {useRetry && (
+                        <Button view="outlined" onClick={resetErrorBoundary}>
+                            {i18n('button-reset')}
+                        </Button>
+                    )}
+                    {onReportProblem && (
+                        <Button view="outlined" onClick={() => onReportProblem(error)}>
+                            {i18n('report-problem')}
+                        </Button>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}

src/lib.ts

@@ -1,8 +1,12 @@
 export {App as SingleClusterApp, AppSlots} from './containers/App';
 export {AppWithClusters as MultiClusterApp} from './containers/AppWithClusters/AppWithClusters';
-export {ErrorBoundary} from './components/ErrorBoundary/ErrorBoundary';
+export {
+    ErrorBoundaryInner as ErrorBoundary,
+    ErrorBoundaryFallback,
+} from './components/ErrorBoundary/ErrorBoundary';
 
 export {configureStore, rootReducer} from './store';
+export {default as appRoutes} from './routes';
 
 export {createApi, YdbEmbeddedAPI, YdbWebVersionAPI} from './services/api';
 export {settingsManager} from './services/settings';