improve location of ErrorBoundaries

scm-ui-components/packages/ui-components/src/layout/Page.js

@@ -32,15 +32,16 @@ class Page extends React.Component<Props> {
   render() {
     const { error } = this.props;
     return (
-      <ErrorBoundary>
       <section className="section">
         <div className="container">
           {this.renderPageHeader()}
-            <ErrorNotification error={error} />
+          <ErrorBoundary>
+            <ErrorNotification error={error}/>
             {this.renderContent()}
+          </ErrorBoundary>
         </div>
       </section>
-      </ErrorBoundary>
+
     );
   }
 
@@ -67,15 +68,15 @@ class Page extends React.Component<Props> {
       }
     });
     let underline = pageActionsExists ? (
-      <hr className="header-with-actions" />
+      <hr className="header-with-actions"/>
     ) : null;
 
     return (
       <>
         <div className="columns">
           <div className="column">
-            <Title title={title} />
+            <Title title={title}/>
-            <Subtitle subtitle={subtitle} />
+            <Subtitle subtitle={subtitle}/>
           </div>
           {pageActions}
         </div>
@@ -91,7 +92,7 @@ class Page extends React.Component<Props> {
       return null;
     }
     if (loading) {
-      return <Loading />;
+      return <Loading/>;
     }
 
     let content = [];

scm-ui/src/containers/Index.js

@@ -5,7 +5,7 @@ import { connect } from "react-redux";
 import { translate } from "react-i18next";
 import { withRouter } from "react-router-dom";
 
-import { Loading, ErrorPage } from "@scm-manager/ui-components";
+import { Loading, ErrorBoundary } from "@scm-manager/ui-components";
 import {
   fetchIndexResources,
   getFetchIndexResourcesFailure,
@@ -15,6 +15,7 @@ import {
 import PluginLoader from "./PluginLoader";
 import type { IndexResources } from "@scm-manager/ui-types";
 import ScrollToTop from "./ScrollToTop";
+import IndexErrorPage from "./IndexErrorPage";
 
 type Props = {
   error: Error,
@@ -55,17 +56,12 @@ class Index extends Component<Props, State> {
     const { pluginsLoaded } = this.state;
 
     if (error) {
-      return (
+      return <IndexErrorPage error={error}/>;
-        <ErrorPage
-          title={t("app.error.title")}
-          subtitle={t("app.error.subtitle")}
-          error={error}
-        />
-      );
     } else if (loading || !indexResources) {
       return <Loading />;
     } else {
       return (
+        <ErrorBoundary fallback={IndexErrorPage}>
           <ScrollToTop>
             <PluginLoader
               loaded={pluginsLoaded}
@@ -74,6 +70,7 @@ class Index extends Component<Props, State> {
               <App />
             </PluginLoader>
           </ScrollToTop>
+        </ErrorBoundary>
       );
     }
   }

scm-ui/src/containers/IndexErrorPage.js

@@ -0,0 +1,26 @@
+//@flow
+import React from "react";
+import { translate, type TFunction } from "react-i18next";
+import { ErrorPage } from "@scm-manager/ui-components";
+
+type Props = {
+  error: Error,
+  t: TFunction
+}
+
+class IndexErrorPage extends React.Component<Props> {
+
+  render() {
+    const { error, t } = this.props;
+    return (
+      <ErrorPage
+        title={t("app.error.title")}
+        subtitle={t("app.error.subtitle")}
+        error={error}
+      />
+    );
+  }
+
+}
+
+export default translate("commons")(IndexErrorPage);

scm-ui/src/containers/Main.js

@@ -9,7 +9,7 @@ import Users from "../users/containers/Users";
 import Login from "../containers/Login";
 import Logout from "../containers/Logout";
 
-import {ErrorBoundary, ProtectedRoute} from "@scm-manager/ui-components";
+import {ProtectedRoute} from "@scm-manager/ui-components";
 import {binder,  ExtensionPoint } from "@scm-manager/ui-extensions";
 
 import AddUser from "../users/containers/AddUser";
@@ -38,7 +38,6 @@ class Main extends React.Component<Props> {
       url = redirectUrlFactory(this.props);
     }
     return (
-      <ErrorBoundary>
       <div className="main">
         <Switch>
           <Redirect exact from="/" to={url}/>
@@ -130,7 +129,6 @@ class Main extends React.Component<Props> {
           />
         </Switch>
       </div>
-      </ErrorBoundary>
     );
   }
 }