feat: add ErrorBoundary (#549)

package.json

@@ -30,6 +30,7 @@
     "numeral": "2.0.6",
     "path-to-regexp": "3.0.0",
     "qs": "^6.11.0",
+    "react-error-boundary": "^4.0.12",
     "react-json-inspector": "7.1.1",
     "react-list": "0.8.11",
     "react-monaco-editor": "0.30.1",

src/components/ErrorBoundary/ErrorBoundary.scss

@@ -0,0 +1,40 @@
+@import '../../styles/mixins.scss';
+
+.ydb-error-boundary {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+
+    padding: 20px;
+
+    @include body-2-typography();
+
+    &__illustration {
+        width: 230px;
+        height: 230px;
+        margin-right: 20px;
+    }
+    &__error-title {
+        margin-top: 44px;
+        @include lead-typography();
+    }
+    &__error-description {
+        margin-top: 12px;
+    }
+    &__show-details {
+        margin-top: 8px;
+    }
+    &__error-details {
+        padding: 13px 18px;
+
+        border: 1px solid var(--g-color-line-generic);
+        background-color: var(--g-color-base-generic-ultralight);
+    }
+    &__actions {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+
+        margin-top: 20px;
+    }
+}

src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,62 @@
+import type {ReactNode} from 'react';
+import {ErrorBoundary as ErrorBoundaryBase} from 'react-error-boundary';
+import cn from 'bem-cn-lite';
+
+import {Button, Disclosure} from '@gravity-ui/uikit';
+
+import {registerError} from '../../utils/registerError';
+import {Illustration} from '../Illustration';
+import i18n from './i18n';
+import './ErrorBoundary.scss';
+
+const b = cn('ydb-error-boundary');
+
+interface ErrorBoundaryProps {
+    children?: ReactNode;
+    useRetry?: boolean;
+    onReportProblem?: (error?: Error) => void;
+}
+
+export const ErrorBoundary = ({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>
+                );
+            }}
+        >
+            {children}
+        </ErrorBoundaryBase>
+    );
+};

src/components/ErrorBoundary/i18n/en.json

@@ -0,0 +1,7 @@
+{
+  "error-title": "Something went wrong",
+  "error-description": "We have something broken, but don't worry, it won't last long",
+  "show-details": "Show details",
+  "report-problem": "Report a problem",
+  "button-reset": "Try again"
+}

src/components/ErrorBoundary/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-error-boundary';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

src/components/ErrorBoundary/i18n/ru.json

@@ -0,0 +1,7 @@
+{
+  "error-title": "Что-то пошло не так",
+  "error-description": "У нас что-то сломалось, но не переживайте, это ненадолго",
+  "show-details": "Показать детали",
+  "report-problem": "Сообщить о проблеме",
+  "button-reset": "Попробовать снова"
+}

src/components/Illustration/Illustration.tsx

@@ -13,10 +13,12 @@ const store: IllustrationStore = {
     light: {
         403: () => import('../../assets/illustrations/light/403.svg'),
         thumbsUp: () => import('../../assets/illustrations/light/thumbsUp.svg'),
+        error: () => import('../../assets/illustrations/light/error.svg'),
     },
     dark: {
         403: () => import('../../assets/illustrations/dark/403.svg'),
-        thumbsUp: () => import('../../assets/illustrations/light/thumbsUp.svg'),
+        thumbsUp: () => import('../../assets/illustrations/dark/thumbsUp.svg'),
+        error: () => import('../../assets/illustrations/dark/error.svg'),
     },
 };
 

src/containers/App/App.js

@@ -7,6 +7,7 @@ import AsideNavigation from '../AsideNavigation/AsideNavigation';
 
 import {getUser} from '../../store/reducers/authentication/authentication';
 import {registerLanguages} from '../../utils/monaco';
+import {ErrorBoundary} from '../../components/ErrorBoundary/ErrorBoundary';
 
 import './App.scss';
 
@@ -38,8 +39,10 @@ class App extends React.Component {
         const {singleClusterMode, clusterName} = this.props;
         return (
             <AsideNavigation>
-                <Content singleClusterMode={singleClusterMode} clusterName={clusterName} />
-                <div id="fullscreen-root"></div>
+                <ErrorBoundary>
+                    <Content singleClusterMode={singleClusterMode} clusterName={clusterName} />
+                    <div id="fullscreen-root"></div>
+                </ErrorBoundary>
             </AsideNavigation>
         );
     }

src/index.tsx

@@ -8,6 +8,7 @@ import App from './containers/App/App';
 import configureStore from './store';
 import reportWebVitals from './reportWebVitals';
 import HistoryContext from './contexts/HistoryContext';
+import {ErrorBoundary} from './components/ErrorBoundary/ErrorBoundary';
 
 import './styles/themes.scss';
 import './styles/constants.scss';
@@ -18,11 +19,13 @@ window.store = store;
 
 ReactDOM.render(
     <React.StrictMode>
-        <Provider store={store}>
-            <HistoryContext.Provider value={history}>
-                <App />
-            </HistoryContext.Provider>
-        </Provider>
+        <ErrorBoundary>
+            <Provider store={store}>
+                <HistoryContext.Provider value={history}>
+                    <App />
+                </HistoryContext.Provider>
+            </Provider>
+        </ErrorBoundary>
     </React.StrictMode>,
     document.getElementById('root'),
 );

src/utils/registerError.ts

@@ -0,0 +1,18 @@
+export function registerError(error: Error, message?: string, type = 'error') {
+    if (typeof window !== 'undefined' && window.Ya?.Rum) {
+        window.Ya.Rum.logError(
+            {
+                additional: {
+                    url: window.location.href,
+                },
+                type,
+                message,
+                level: window.Ya.Rum.ERROR_LEVEL.ERROR,
+            },
+            error,
+        );
+    } else {
+        // eslint-disable-next-line no-console
+        console.error(error);
+    }
+}