feat: add ErrorBoundary (#549)

Author: artemmufazalov

package-lock.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",

package.json

@@ -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/assets/illustrations/dark/error.svg

@@ -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/assets/illustrations/light/error.svg

@@ -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/ErrorBoundary.scss

@@ -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/ErrorBoundary.tsx

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

src/components/ErrorBoundary/i18n/en.json

@@ -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'),
     },
 };