fix: closes #29

Author: debater-coder

package.json

@@ -1,6 +1,6 @@
 {
   "name": "timetabl-app",
-  "version": "1.0.6-beta",
+  "version": "1.0.7-beta",
   "description": "",
   "main": "index.js",
   "scripts": {

src/components/App/App.tsx

@@ -2,14 +2,17 @@ import Nav from "../Nav";
 import { Outlet } from "react-router-dom";
 import { Flex } from "@chakra-ui/react";
 import { Box } from "@chakra-ui/react";
+import { ErrorBoundary } from "../ErrorBoundary";
 
 export default () => {
   return (
     <Flex direction={"column"} width={"100vw"} maxW="full" height={"100vh"}>
       <Nav />
       <Box mt={"100px"} />
       <Flex direction={"column"} w="full" h="full" maxH={"calc(100% - 100px)"}>
-        <Outlet />
+        <ErrorBoundary>
+          <Outlet />
+        </ErrorBoundary>
       </Flex>
     </Flex>
   );

src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,51 @@
+import {
+  Flex,
+  Alert,
+  AlertIcon,
+  AlertTitle,
+  AlertDescription,
+} from "@chakra-ui/react";
+import { Component, ErrorInfo, ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+  };
+
+  public static getDerivedStateFromError(): State {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error("Uncaught error:", error, errorInfo);
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      return (
+        <Flex>
+          <Alert status="error" rounded={5} m={6}>
+            <AlertIcon />
+            <AlertTitle>An error occured.</AlertTitle>
+            <AlertDescription>
+              Check your console for more information.
+            </AlertDescription>
+          </Alert>
+        </Flex>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

src/components/ErrorBoundary/index.ts

@@ -0,0 +1 @@
+export { ErrorBoundary } from "./ErrorBoundary";

src/main.tsx

@@ -19,6 +19,7 @@ import { inject } from "@vercel/analytics";
 import { log } from "./utils/log";
 import { UnauthorizedError } from "./errors/UnauthorisedError";
 import NetworkError from "./errors/NetworkError";
+import { ErrorBoundary } from "./components/ErrorBoundary";
 
 // Redirect to new domain if using old domain
 if (window.location.host === "timetabl.vercel.app") {
@@ -100,9 +101,11 @@ ReactDOM.createRoot(document.getElementById("root")).render(
     ]}
   >
     <ColorModeScript initialColorMode={themeGen().config.initialColorMode} />
-    <BrowserRouter>
-      <Routes />
-    </BrowserRouter>
+    <ErrorBoundary>
+      <BrowserRouter>
+        <Routes />
+      </BrowserRouter>
+    </ErrorBoundary>
     <ToastContainer />
     <ReactQueryDevtools initialIsOpen={false} />
   </Compose>

src/routes/Landing/Hero/Hero.tsx

@@ -8,6 +8,7 @@ import {
 import { motion } from "framer-motion";
 import { SignIn } from "phosphor-react";
 import { lazy, Suspense, useState } from "react";
+import { ErrorBoundary } from "../../../components/ErrorBoundary";
 import { useAuth } from "../../../hooks/useAuth";
 
 const HeroExperience = lazy(() => import("./HeroExperience"));
@@ -89,9 +90,12 @@ export const Hero = () => {
         position={"relative"}
         w={"full"}
         h="60vh"
+        display={{ base: "none", md: "block" }}
       >
         <Suspense fallback={null}>
-          <HeroExperience />
+          <ErrorBoundary>
+            <HeroExperience />
+          </ErrorBoundary>
         </Suspense>
       </Flex>
     </Stack>

src/routes/Main/Main.tsx

@@ -3,6 +3,7 @@ import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import { Flex, useBreakpointValue } from "@chakra-ui/react";
 import { useAuth } from "../../hooks/useAuth";
 import Sidebar from "../../components/Sidebar";
+import { ErrorBoundary } from "../../components/ErrorBoundary";
 
 export default () => {
   const { loggedIn, shouldRedirect } = useAuth();
@@ -37,7 +38,9 @@ export default () => {
         ml={{ base: 0, md: "144px" }}
         overflowY={"auto"}
       >
-        <Outlet />
+        <ErrorBoundary>
+          <Outlet />
+        </ErrorBoundary>
       </Flex>
     </Flex>
   );

src/routes/Main/Settings/Settings.tsx

@@ -8,6 +8,7 @@ import {
 import { Code, Gear, Info } from "phosphor-react";
 import { Outlet, Link, useLocation } from "react-router-dom";
 import "@fontsource/poppins";
+import { ErrorBoundary } from "../../../components/ErrorBoundary";
 
 const MenuEntry = ({
   active,
@@ -84,7 +85,9 @@ export default () => {
         mb={20}
         overflowY="auto"
       >
-        <Outlet />
+        <ErrorBoundary>
+          <Outlet />
+        </ErrorBoundary>
       </Flex>
     </Flex>
   );