feat: add error boundary component

bitcoinsearch · Jun 26, 2024 · 8fdbab7 · 8fdbab7
1 parent 9e2687d
commit 8fdbab7
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 13 deletions.
diff --git a/src/components/errorBoundary/ErrorBoundary.tsx b/src/components/errorBoundary/ErrorBoundary.tsx
@@ -0,0 +1,51 @@
+import Link from "next/link";
+import React, { ErrorInfo } from "react";
+
+interface Props {
+  children: React.ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+}
+
+class ErrorBoundary extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = { hasError: false };
+  }
+
+  public static getDerivedStateFromError(_: Error): State {
+    return { hasError: true };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.log({ error, errorInfo });
+    this.setState({ hasError: true });
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <section className="flex h-[calc(100vh-250px)] flex-col items-center justify-center">
+          <div className="container flex items-center flex-col mx-auto max-w-xl space-y-6 text-center">
+            <p className="text-3xl font-bold text-custom-primary-text md:text-5xl md:leading-[120%]">
+              Oops, something went wrong!
+            </p>
+            <Link
+              href="/"
+              className="rounded-2xl bg-transparent border border-custom-accent gap-3 lg:gap-6 py-[18px] lg:py-6 3xl:py-9 px-4 lg:px-5 3xl:px-8 text-custom-accent hover:bg-custom-accent hover:text-white flex items-center justify-center text-[18px] lg:text-2xl 3xl:text-[32px] font-semibold w-fit"
+            >
+              Go back home
+            </Link>
+          </div>
+        </section>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -29,6 +29,7 @@ import { SearchDriverOptions } from "@elastic/search-ui";
 import { UIContextProvider } from "@/context/UIContext";
 import { ThemeProvider } from "@/context/Theme";
 import Metadata from "@/layout/Metadata";
+import ErrorBoundary from "@/components/errorBoundary/ErrorBoundary";
 
 const queryClient = new QueryClient();
 
@@ -56,19 +57,21 @@ export default function App({ Component, pageProps }) {
     <>
       <Metadata />
       <ChakraProvider theme={theme}>
-        <QueryClientProvider client={queryClient}>
-          <Hydrate state={pageProps.dehydratedState}>
-            <SearchQueryProvider>
-              <SearchProvider config={config}>
-                <UIContextProvider>
-                  <ThemeProvider>
-                    <Component {...pageProps} />
-                  </ThemeProvider>
-                </UIContextProvider>
-              </SearchProvider>
-            </SearchQueryProvider>
-          </Hydrate>
-        </QueryClientProvider>
+        <ErrorBoundary>
+          <QueryClientProvider client={queryClient}>
+            <Hydrate state={pageProps.dehydratedState}>
+              <SearchQueryProvider>
+                <SearchProvider config={config}>
+                  <UIContextProvider>
+                    <ThemeProvider>
+                      <Component {...pageProps} />
+                    </ThemeProvider>
+                  </UIContextProvider>
+                </SearchProvider>
+              </SearchQueryProvider>
+            </Hydrate>
+          </QueryClientProvider>
+        </ErrorBoundary>
       </ChakraProvider>
     </>
   );