refactor(front): error boundary (#76)

apps/js-machine-front/src/app/App.tsx

@@ -32,23 +32,23 @@ export const App: React.FC = observer(() => {
 
   return (
     <ThemeProvider theme={theme}>
-        <Router history={history}>
+      <Router history={history}>
         <Snowflakes/>
-          <SnackbarProvider maxSnack={3}>
-            <DynamicNavBar />
-            <ErrorBoundary>
-              <Switch>
-                <Route exact path="/" component={Main} />
-                <Route exact path="/about" component={About} />
-                <Route exact path="/news" component={News} />
-                <Route exact path="/digest/:id" component={Digest} />
-                <Route exact path="/events" component={Events} />
-                <Route exact path="/authorization" component={Authorization} />
-                <Redirect to="/" />
-              </Switch>
-            </ErrorBoundary>
-          </SnackbarProvider>
-        </Router>
+        <SnackbarProvider maxSnack={3}>
+          <DynamicNavBar />
+          <ErrorBoundary>
+            <Switch>
+              <Route exact path="/" component={Main} />
+              <Route exact path="/about" component={About} />
+              <Route exact path="/news" component={News} />
+              <Route exact path="/digest/:id" component={Digest} />
+              <Route exact path="/events" component={Events} />
+              <Route exact path="/authorization" component={Authorization} />
+              <Redirect to="/" />
+            </Switch>
+          </ErrorBoundary>
+        </SnackbarProvider>
+      </Router>
     </ThemeProvider>
   );
 });

apps/js-machine-front/src/app/components/ErrorBoundary.tsx

@@ -1,25 +1,52 @@
-import * as React from 'react';
-import { ErrorIndicator } from './ErrorIndicator';
+import React, { ReactNode, ComponentType, ErrorInfo } from 'react';
+import { ErrorBoundaryFallbackComponent } from './ErrorBoundaryFallbackComponent';
 
-export interface ErrorBoundaryState {
-  hasError: boolean;
+interface Props {
+  children?: ReactNode;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  FallbackComponent: ComponentType<any>;
+  onError?: (error: Error, componentStack: string) => void;
 }
 
-export class ErrorBoundary extends React.Component<{}, ErrorBoundaryState> {
-  state: ErrorBoundaryState = {
-    hasError: false,
+interface State {
+  error?: Error;
+  info?: ErrorInfo;
+}
+
+export class ErrorBoundary extends React.Component<Props, State> {
+  static defaultProps: Props = {
+    FallbackComponent: ErrorBoundaryFallbackComponent,
   };
 
-  componentDidCatch(): void {
-    this.setState({
-      hasError: true,
-    });
+  public state: State = {};
+
+  public componentDidCatch(error: Error, info: ErrorInfo): void {
+    const { onError } = this.props;
+
+    if (typeof onError === 'function') {
+      try {
+        onError.call(this, error, info ? info.componentStack : '');
+      } catch (ignoredError) {
+        // catch error
+      }
+    }
+
+    this.setState({ error, info });
   }
 
-  render(): React.ReactNode | React.FC {
-    if (this.state.hasError) {
-      return <ErrorIndicator />;
+  public render(): React.ReactNode | React.FC {
+    const { children, FallbackComponent } = this.props;
+    const { error, info } = this.state;
+
+    if (error) {
+      return (
+        <FallbackComponent
+          componentStack={info ? info.componentStack : ''}
+          error={error}
+        />
+      );
     }
-    return this.props.children;
+
+    return children || null;
   }
 }

apps/js-machine-front/src/app/components/ErrorBoundaryFallbackComponent.tsx

@@ -0,0 +1,71 @@
+import React, { memo } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    height: '100vh',
+    backgroundImage: `url('assets/error.svg')`,
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center',
+    backgroundColor: `rgba(0,0,0,0.6)`,
+  },
+  toolbar: theme.mixins.toolbar,
+  textContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    marginLeft: theme.spacing(8),
+    [theme.breakpoints.down('sm')]: {
+      marginLeft: theme.spacing(6),
+    },
+    [theme.breakpoints.down('xs')]: {
+      marginLeft: theme.spacing(4),
+    },
+  },
+  title: {
+    color: '#F2E14C',
+    fontWeight: 'bold',
+    marginBottom: '1rem',
+    fontSize: '6rem',
+    [theme.breakpoints.down('sm')]: {
+      fontSize: '5rem',
+    },
+    [theme.breakpoints.down('xs')]: {
+      fontSize: '4rem',
+    },
+  },
+  subTitle: {
+    color: theme.palette.primary.contrastText,
+    fontSize: '1.125rem',
+    fontWeight: 'bold',
+    marginBottom: '1rem',
+  },
+}));
+
+interface Props {
+  error: Error;
+  componentStack: string;
+}
+
+export const ErrorBoundaryFallbackComponent = memo(
+  function ErrorBoundaryFallbackComponent({ error, componentStack }: Props) {
+    const classes = useStyles();
+
+    return (
+      <div className={classes.root}>
+        <div className={classes.toolbar} />
+        <div className={classes.textContainer}>
+          <span className={classes.title}>
+            <FormattedMessage id="errorIndicator.title" />
+          </span>
+          <span className={classes.subTitle}>
+            <FormattedMessage id="errorIndicator.subTitle" />
+          </span>
+          <span className={classes.subTitle}>
+            <FormattedMessage id="errorIndicator.subTitle1" />
+          </span>
+        </div>
+      </div>
+    );
+  },
+);

apps/js-machine-front/src/app/i18n/translations/en-US/error-indicator.ts

@@ -1,5 +1,5 @@
 export const errorIndicator = {
-'errorIndicator.title': 'OOPS!',
-'errorIndicator.subTitle': 'Something went wrong',
-'errorIndicator.subTitle1': 'but we have already sent a guy from support to fix it',
+  'errorIndicator.title': 'Ooops...',
+  'errorIndicator.subTitle': 'Something went wrong',
+  'errorIndicator.subTitle1': 'Try to reload page or comeback later',
 };

apps/js-machine-front/src/app/i18n/translations/ru-RU/error-indicator.ts

@@ -1,5 +1,6 @@
 export const errorIndicator = {
-  'errorIndicator.title': 'УПС!',
-  'errorIndicator.subTitle': 'что-то пошло не так',
-  'errorIndicator.subTitle1': 'но мы уже отправили парня из поддержки починить это',
+  'errorIndicator.title': 'Oops...',
+  'errorIndicator.subTitle': 'Что-то пошло не так',
+  'errorIndicator.subTitle1':
+    'Попробуйте обновить страницу или вернитесь позже',
 };

apps/js-machine-front/src/app/theme.ts

@@ -4,6 +4,18 @@ const _theme = createMuiTheme();
 
 export const theme: Theme = {
   ..._theme,
+  mixins: {
+    ..._theme.mixins,
+    toolbar: {
+      minHeight: _theme.spacing(10),
+      [_theme.breakpoints.up('sm')]: {
+        minHeight: _theme.spacing(13),
+      },
+      [_theme.breakpoints.up('md')]: {
+        minHeight: _theme.spacing(16),
+      },
+    },
+  },
   overrides: {
     MuiAppBar: {
       root: {