admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added error general error boundary page.

Browse Source
This commit is contained in:
Patrick Fic
2019-12-30 08:10:50 -08:00
parent 78448bbc91
commit 6f5eb87717
3 changed files with 70 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
client/src/App/App.js
View File

@@ -8,6 +8,7 @@ import "./App.css";
//Component Imports //Component Imports
import LoadingSpinner from "../components/loading-spinner/loading-spinner.component"; import LoadingSpinner from "../components/loading-spinner/loading-spinner.component";
import AlertComponent from "../components/alert/alert.component"; import AlertComponent from "../components/alert/alert.component";
import ErrorBoundary from "../components/error-boundary/error-boundary.component";
import { auth } from "../firebase/firebase.utils"; import { auth } from "../firebase/firebase.utils";
import { UPSERT_USER } from "../graphql/user.queries"; import { UPSERT_USER } from "../graphql/user.queries";
@@ -19,7 +20,9 @@ import PrivateRoute from "../utils/private-route";
const LandingPage = lazy(() => import("../pages/landing/landing.page")); const LandingPage = lazy(() => import("../pages/landing/landing.page"));
const ManagePage = lazy(() => import("../pages/manage/manage.page")); const ManagePage = lazy(() => import("../pages/manage/manage.page"));
const SignInPage = lazy(() => import("../pages/sign-in/sign-in.page")); const SignInPage = lazy(() => import("../pages/sign-in/sign-in.page"));
const Unauthorized = lazy(() => import("../pages/unauthorized/unauthorized.component")); const Unauthorized = lazy(() =>
import("../pages/unauthorized/unauthorized.component")
);
export default () => { export default () => {
const apolloClient = useApolloClient(); const apolloClient = useApolloClient();
@@ -105,26 +108,28 @@ export default () => {
return ( return (
<div> <div>
<Switch> <Switch>
<Suspense fallback={<div>Suspended Loading...</div>}> <ErrorBoundary>
<Route exact path="/" component={LandingPage} /> <Suspense fallback={<div>Suspended Loading...</div>}>
<Route exact path="/unauthorized" component={Unauthorized} /> <Route exact path="/" component={LandingPage} />
<Route <Route exact path="/unauthorized" component={Unauthorized} />
exact <Route
path="/signin" exact
render={() => path="/signin"
HookCurrentUser.data.currentUser ? ( render={() =>
<Redirect to="/manage" /> HookCurrentUser.data.currentUser ? (
) : ( <Redirect to="/manage" />
<SignInPage /> ) : (
) <SignInPage />
} )
/> }
<PrivateRoute />
isAuthorized={HookCurrentUser.data.currentUser ? true : false} <PrivateRoute
path="/manage" isAuthorized={HookCurrentUser.data.currentUser ? true : false}
component={ManagePage} path="/manage"
/> component={ManagePage}
</Suspense> />
</Suspense>
</ErrorBoundary>
</Switch> </Switch>
</div> </div>
); );

31
client/src/components/error-boundary/error-boundary.component.jsx Normal file
View File

@@ -0,0 +1,31 @@
import React from "react";
class ErrorBoundary extends React.Component {
constructor() {
super();
this.state = {
hasErrored: false,
error: null
};
}
static getDerivedStateFromError(error) {
//process the error
console.log("error", error);
return { hasErrored: true, error };
}
componentDidCatch(error, info) {
console.log("error", error);
console.log("info", info);
}
render() {
if (this.state.hasErrored === true) {
return <div>Uh oh, something went wrong. {this.state.error}</div>;
} else {
return this.props.children;
}
}
}
export default ErrorBoundary;

27
client/src/pages/manage/manage.page.jsx
View File

@@ -3,12 +3,9 @@ import { Route } from "react-router";
import { Layout, BackTop } from "antd"; import { Layout, BackTop } from "antd";
//Component Imports //Component Imports
// import WhiteBoardPage from "../white-board/white-board.page";
// import JobsPage from "../jobs/jobs.page";
// import JobsDetailPage from "../jobs-detail/jobs-detail.page";
import HeaderContainer from "../../components/header/header.container"; import HeaderContainer from "../../components/header/header.container";
import FooterComponent from "../../components/footer/footer.component"; import FooterComponent from "../../components/footer/footer.component";
import ErrorBoundary from "../../components/error-boundary/error-boundary.component";
const WhiteBoardPage = lazy(() => import("../white-board/white-board.page")); const WhiteBoardPage = lazy(() => import("../white-board/white-board.page"));
const JobsPage = lazy(() => import("../jobs/jobs.page")); const JobsPage = lazy(() => import("../jobs/jobs.page"));
@@ -24,17 +21,19 @@ export default function Manage({ match }) {
</Header> </Header>
<Content> <Content>
<Suspense <ErrorBoundary>
fallback={<div>TODO: Suspended Loading in Manage Page...</div>} <Suspense
> fallback={<div>TODO: Suspended Loading in Manage Page...</div>}
<Route exact path={`${match.path}`} component={WhiteBoardPage} /> >
<Route exact path={`${match.path}`} component={WhiteBoardPage} />
<Route exact path={`${match.path}/jobs`} component={JobsPage} /> <Route exact path={`${match.path}/jobs`} component={JobsPage} />
<Route <Route
path={`${match.path}/jobs/:jobId`} path={`${match.path}/jobs/:jobId`}
component={JobsDetailPage} component={JobsDetailPage}
/> />
</Suspense> </Suspense>
</ErrorBoundary>
</Content> </Content>
<Footer> <Footer>