From e6d872e1b69eea3e4aa2b939b5ca2d5ea596d826 Mon Sep 17 00:00:00 2001
From: zkldi <20380519+zkldi@users.noreply.github.com>
Date: Fri, 24 Dec 2021 16:15:01 +0000
Subject: [PATCH] Errors should try and not take the entire dashboard down with
them
---
client/src/app/routes/DashboardRoutes.tsx | 61 ++++++++++---------
.../util/DashboardErrorBoundary.tsx | 51 ++++++++++++++++
2 files changed, 83 insertions(+), 29 deletions(-)
create mode 100644 client/src/components/util/DashboardErrorBoundary.tsx
diff --git a/client/src/app/routes/DashboardRoutes.tsx b/client/src/app/routes/DashboardRoutes.tsx
index c8816a182..6d320a2d0 100644
--- a/client/src/app/routes/DashboardRoutes.tsx
+++ b/client/src/app/routes/DashboardRoutes.tsx
@@ -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 (
-
-
-
-
+
+
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
-
+
+
+
+
+
);
}
diff --git a/client/src/components/util/DashboardErrorBoundary.tsx b/client/src/components/util/DashboardErrorBoundary.tsx
new file mode 100644
index 000000000..331b2c8ef
--- /dev/null
+++ b/client/src/components/util/DashboardErrorBoundary.tsx
@@ -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 (
+
+ Whoops!
+
+
+ A fatal error has occured in rendering this page. You should report this!
+
+
+ Error Log
+
+
+
+
+ This error is not recoverable. :/
+
+ window.location.reload()}>
+ Attempt Page Reload
+
+ Go Home
+
+ );
+ }
+
+ return this.props.children;
+ }
+}