created ErrorBoundary class component and implmented into _app.tsx

sandboxnu · Oct 22, 2023 · 9d0f4d8 · 9d0f4d8
1 parent e377149
commit 9d0f4d8
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 36 deletions.
diff --git a/packages/frontend-v2/components/Error/ErrorBoundary.tsx b/packages/frontend-v2/components/Error/ErrorBoundary.tsx
@@ -1,22 +1,42 @@
-// import { ErrorBoundary as ReactErrorBoundary } from "react-error-boundary";
-import React, { PropsWithChildren } from "react";
-// import { logger } from "../../utils";
-// import { ClientSideError } from "./ClientSideError";
-
-// const clientSideErrorHandler = (
-//   error: Error,
-//   { componentStack }: { componentStack: string }
-// ) => {
-//   logger.error(error.message, componentStack);
-// };
-
-export const ErrorBoundary: React.FC<PropsWithChildren> = ({ children }) => {
-  return (
-    // <ReactErrorBoundary
-    //   FallbackComponent={ClientSideError}
-    //   onError={clientSideErrorHandler}
-    // >
-    <div>{children}</div>
-    // </ReactErrorBoundary>
-  );
-};
+import React, { Component, ErrorInfo } from 'react';
+
+interface IProps {
+  fallback: React.FC;
+  children: React.ReactNode;
+}
+
+interface IState {
+  hasError: boolean;
+}
+
+export class ErrorBoundary extends Component<IProps, IState>{
+
+  state = {hasError: false};
+
+  constructor(props: IProps) {
+    super(props);
+    this.state = {hasError: false};
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    // Update state so the next render will show the fallback UI.
+    console.error(error);
+    console.error("error boundary reached");
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    // You can also log the error to an error reporting service
+    console.error(error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (<>
+      {this.props.fallback}
+      </>)
+    }
+
+    return this.props.children;
+  }
+}
diff --git a/packages/frontend-v2/pages/_app.tsx b/packages/frontend-v2/pages/_app.tsx
@@ -15,21 +15,21 @@ function MyApp({ Component, pageProps }: AppProps) {
 
   return (
     <>
-      <Head>
-        <title>GraduateNU</title>
-        <meta
-          name="description"
-          content="A degree scheduling service for Northeastern Students."
-        />
-        <link rel="icon" href="/favicon.ico" />
-        <link rel="icon" href="/favicon.svg" type="image/svg+xml"></link>
-      </Head>
-      <ErrorBoundary>
-        <ChakraProvider theme={theme}>
-          {disableApp ? <DisabledApp /> : <Component {...pageProps} />}
-        </ChakraProvider>
+      <ErrorBoundary fallback={ErrorPage}>
+        <Head>
+          <title>GraduateNU</title>
+          <meta
+            name="description"
+            content="A degree scheduling service for Northeastern Students."
+          />
+          <link rel="icon" href="/favicon.ico" />
+          <link rel="icon" href="/favicon.svg" type="image/svg+xml"></link>
+        </Head>
+          <ChakraProvider theme={theme}>
+            {disableApp ? <DisabledApp /> : <Component {...pageProps} />}
+          </ChakraProvider>
+        <ToastContainer position="bottom-right" />
       </ErrorBoundary>
-      <ToastContainer position="bottom-right" />
     </>
   );
 }
@@ -68,4 +68,12 @@ const DisabledApp: React.FC = () => {
   );
 };
 
+const ErrorPage: React.FC = () => {
+  return (
+   <Text size="xl" textAlign="center">
+    THIS PAGE DOES NOT EXIST
+   </Text>
+  );
+}
+
 export default MyApp;
diff --git a/packages/frontend-v2/pages/errorBoundary.tsx b/packages/frontend-v2/pages/errorBoundary.tsx
diff --git a/packages/frontend-v2/pages/index.tsx b/packages/frontend-v2/pages/index.tsx
@@ -24,6 +24,7 @@ interface InfoTextProps {
 }
 
 const LandingPage: NextPage = () => {
+  throw new Error("testing");
   return (
     <Box>
       <GraduatePreAuthHeader />