Errors should try and not take the entire dashboard down with them

This commit is contained in:
zkldi
2022-02-09 02:56:31 +00:00
parent b2d0010c39
commit e6d872e1b6
2 changed files with 83 additions and 29 deletions
+32 -29
View File
@@ -3,6 +3,7 @@ import { ErrorPage } from "app/pages/ErrorPage";
import { Layout } from "components/layout/Layout";
import EmailVerify from "components/layout/misc/EmailVerify";
import { BannedContext } from "context/BannedContext";
import DashboardErrorBoundary from "components/util/DashboardErrorBoundary";
import { UserContext } from "context/UserContext";
import React, { useContext, useEffect, useState } from "react";
import { Redirect, Route, Switch } from "react-router-dom";
@@ -47,43 +48,45 @@ export default function DashboardRoutes() {
return (
<Layout>
<Switch>
<Route exact path="/dashboard">
<DashboardPage />
</Route>
<DashboardErrorBoundary>
<Switch>
<Route exact path="/dashboard">
<DashboardPage />
</Route>
<Route exact path="/dashboard/credits">
<CreditsPage />
</Route>
<Route exact path="/dashboard/credits">
<CreditsPage />
</Route>
<Route exact path="/dashboard/support">
<SupportMePage />
</Route>
<Route exact path="/dashboard/support">
<SupportMePage />
</Route>
<Route exact path="/dashboard/users">
<Redirect to="/dashboard" />
</Route>
<Route exact path="/dashboard/users">
<Redirect to="/dashboard" />
</Route>
<Route exact path="/dashboard/games">
<Redirect to="/dashboard" />
</Route>
<Route exact path="/dashboard/games">
<Redirect to="/dashboard" />
</Route>
<Route path="/dashboard/users/:userID">
<UserRoutes />
</Route>
<Route path="/dashboard/users/:userID">
<UserRoutes />
</Route>
<Route path="/dashboard/games/:game">
<GameRoutes />
</Route>
<Route path="/dashboard/games/:game">
<GameRoutes />
</Route>
<Route path="/dashboard/import">
<ImportRoutes />
</Route>
<Route path="/dashboard/import">
<ImportRoutes />
</Route>
<Route path="*">
<ErrorPage statusCode={404} />
</Route>
</Switch>
<Route path="*">
<ErrorPage statusCode={404} />
</Route>
</Switch>
</DashboardErrorBoundary>
</Layout>
);
}
@@ -0,0 +1,51 @@
import React from "react";
import CenterPage from "./CenterPage";
import DebugContent from "./DebugContent";
import Divider from "./Divider";
import ExternalLink from "./ExternalLink";
import Muted from "./Muted";
export default class DashboardErrorBoundary extends React.Component<
any,
{ error: any; info: any }
> {
constructor(props: any) {
super(props);
this.state = { error: null, info: null };
}
componentDidCatch(error: any, info: any) {
console.error(error, info);
this.setState({ error, info });
}
render() {
if (this.state.error) {
return (
<CenterPage>
<h1>Whoops!</h1>
<br />
<h4>
A fatal error has occured in rendering this page. You should report this!
</h4>
<Divider />
<h3 className="mb-2">Error Log</h3>
<div style={{ fontSize: "1rem", width: "80vw", height: "400px" }}>
<DebugContent
data={{ error: this.state.error.message, info: this.state.info }}
/>
</div>
<Divider />
<Muted>This error is not recoverable. :/</Muted>
<Divider />
<a href="#" onClick={() => window.location.reload()}>
Attempt Page Reload
</a>
<ExternalLink href="/">Go Home</ExternalLink>
</CenterPage>
);
}
return this.props.children;
}
}