1 files changed, 35 insertions, 0 deletions
diff --git a/frontend/src/pages/UIError.tsx b/frontend/src/pages/UIError.tsx
new file mode 100644
index 000000000..ba87bb588
--- /dev/null
+++ b/frontend/src/pages/UIError.tsx
@@ -0,0 +1,35 @@
+import { faDizzy } from "@fortawesome/free-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { FunctionComponent } from "react";
+import { Button, Container } from "react-bootstrap";
+import { Reload } from "utilities";
+import { GithubRepoRoot } from "utilities/constants";
+
+interface Props {
+  error: Error;
+}
+
+const UIError: FunctionComponent<Props> = ({ error }) => (
+  <Container className="d-flex flex-column align-items-center my-5">
+    <h1>
+      <FontAwesomeIcon className="mr-2" icon={faDizzy}></FontAwesomeIcon>
+      Oops! UI is crashed!
+    </h1>
+    <p>{error.message}</p>
+    <div className="d-flex flex-row">
+      <Button
+        className="mx-1"
+        href={`${GithubRepoRoot}/issues/new/choose`}
+        target="_blank"
+        variant="warning"
+      >
+        Report Issue
+      </Button>
+      <Button className="mx-1" onClick={Reload} variant="light">
+        Reload Page
+      </Button>
+    </div>
+  </Container>
+);
+
+export default UIError;