improve location of ErrorBoundaries

This commit is contained in:
Sebastian Sdorra
2019-03-14 10:12:34 +01:00
parent d2c99b9b8b
commit cce3ddc394
4 changed files with 142 additions and 120 deletions

View File

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

View File

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

View File

@@ -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);

View File

@@ -9,7 +9,7 @@ import Users from "../users/containers/Users";
import Login from "../containers/Login"; import Login from "../containers/Login";
import Logout from "../containers/Logout"; 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 {binder, ExtensionPoint } from "@scm-manager/ui-extensions";
import AddUser from "../users/containers/AddUser"; import AddUser from "../users/containers/AddUser";
@@ -38,99 +38,97 @@ class Main extends React.Component<Props> {
url = redirectUrlFactory(this.props); url = redirectUrlFactory(this.props);
} }
return ( return (
<ErrorBoundary> <div className="main">
<div className="main"> <Switch>
<Switch> <Redirect exact from="/" to={url}/>
<Redirect exact from="/" to={url}/> <Route exact path="/login" component={Login} />
<Route exact path="/login" component={Login} /> <Route path="/logout" component={Logout} />
<Route path="/logout" component={Logout} /> <ProtectedRoute
<ProtectedRoute exact
exact path="/repos"
path="/repos" component={Overview}
component={Overview} authenticated={authenticated}
authenticated={authenticated} />
/> <ProtectedRoute
<ProtectedRoute exact
exact path="/repos/create"
path="/repos/create" component={Create}
component={Create} authenticated={authenticated}
authenticated={authenticated} />
/> <ProtectedRoute
<ProtectedRoute exact
exact path="/repos/:page"
path="/repos/:page" component={Overview}
component={Overview} authenticated={authenticated}
authenticated={authenticated} />
/> <ProtectedRoute
<ProtectedRoute path="/repo/:namespace/:name"
path="/repo/:namespace/:name" component={RepositoryRoot}
component={RepositoryRoot} authenticated={authenticated}
authenticated={authenticated} />
/> <ProtectedRoute
<ProtectedRoute exact
exact path="/users"
path="/users" component={Users}
component={Users} authenticated={authenticated}
authenticated={authenticated} />
/> <ProtectedRoute
<ProtectedRoute authenticated={authenticated}
authenticated={authenticated} path="/users/add"
path="/users/add" component={AddUser}
component={AddUser} />
/> <ProtectedRoute
<ProtectedRoute exact
exact path="/users/:page"
path="/users/:page" component={Users}
component={Users} authenticated={authenticated}
authenticated={authenticated} />
/> <ProtectedRoute
<ProtectedRoute authenticated={authenticated}
authenticated={authenticated} path="/user/:name"
path="/user/:name" component={SingleUser}
component={SingleUser} />
/>
<ProtectedRoute <ProtectedRoute
exact exact
path="/groups" path="/groups"
component={Groups} component={Groups}
authenticated={authenticated} authenticated={authenticated}
/> />
<ProtectedRoute <ProtectedRoute
authenticated={authenticated} authenticated={authenticated}
path="/group/:name" path="/group/:name"
component={SingleGroup} component={SingleGroup}
/> />
<ProtectedRoute <ProtectedRoute
authenticated={authenticated} authenticated={authenticated}
path="/groups/add" path="/groups/add"
component={AddGroup} component={AddGroup}
/> />
<ProtectedRoute <ProtectedRoute
exact exact
path="/groups/:page" path="/groups/:page"
component={Groups} component={Groups}
authenticated={authenticated} authenticated={authenticated}
/> />
<ProtectedRoute <ProtectedRoute
path="/config" path="/config"
component={Config} component={Config}
authenticated={authenticated} authenticated={authenticated}
/> />
<ProtectedRoute <ProtectedRoute
path="/me" path="/me"
component={Profile} component={Profile}
authenticated={authenticated} authenticated={authenticated}
/> />
<ExtensionPoint <ExtensionPoint
name="main.route" name="main.route"
renderAll={true} renderAll={true}
props={{authenticated, links}} props={{authenticated, links}}
/> />
</Switch> </Switch>
</div> </div>
</ErrorBoundary>
); );
} }
} }