From e18922c85faf96f11691930e1425bbc6d5b753e7 Mon Sep 17 00:00:00 2001
From: isra el <vernu1997@gmail.com>
Date: Sun, 30 Apr 2023 09:51:39 +0300
Subject: [PATCH] chore(web): implement error boundary

---
 web/components/ErrorBoundary.tsx | 34 ++++++++++++++++++++++++++++++++
 web/pages/_app.tsx               | 27 ++++++++++++++-----------
 web/pages/dashboard/index.tsx    | 11 ++++++++---
 3 files changed, 58 insertions(+), 14 deletions(-)
 create mode 100644 web/components/ErrorBoundary.tsx

diff --git a/web/components/ErrorBoundary.tsx b/web/components/ErrorBoundary.tsx
new file mode 100644
index 0000000..12e4615
--- /dev/null
+++ b/web/components/ErrorBoundary.tsx
@@ -0,0 +1,34 @@
+import React, { Component } from 'react'
+
+interface ErrorBoundaryProps {
+  fallback?: string | React.ReactNode
+  children: React.ReactNode
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean
+}
+
+export default class ErrorBoundary extends Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  state = { hasError: false }
+
+  static getDerivedStateFromError(error) {
+    console.log(error)
+    return { hasError: true }
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.log(error, errorInfo)
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback || 'Something went wrong'
+    }
+
+    return this.props.children
+  }
+}
diff --git a/web/pages/_app.tsx b/web/pages/_app.tsx
index 7101881..f310872 100644
--- a/web/pages/_app.tsx
+++ b/web/pages/_app.tsx
@@ -6,19 +6,24 @@ import { ChakraProvider } from '@chakra-ui/react'
 import Navbar from '../components/Navbar'
 import Meta from '../components/meta/Meta'
 import { GoogleOAuthProvider } from '@react-oauth/google'
+import ErrorBoundary from '../components/ErrorBoundary'
 function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <Provider store={store}>
-      <GoogleOAuthProvider clientId={process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID }>
-        <ChakraProvider>
-          <Meta />
-          <Navbar />
-          <Wrapper>
-            <Component {...pageProps} />
-          </Wrapper>
-        </ChakraProvider>
-      </GoogleOAuthProvider>
-    </Provider>
+    <ErrorBoundary>
+      <Provider store={store}>
+        <GoogleOAuthProvider
+          clientId={process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}
+        >
+          <ChakraProvider>
+            <Meta />
+            <Navbar />
+            <Wrapper>
+              <Component {...pageProps} />
+            </Wrapper>
+          </ChakraProvider>
+        </GoogleOAuthProvider>
+      </Provider>
+    </ErrorBoundary>
   )
 }
 
diff --git a/web/pages/dashboard/index.tsx b/web/pages/dashboard/index.tsx
index 400337a..5f39dd7 100644
--- a/web/pages/dashboard/index.tsx
+++ b/web/pages/dashboard/index.tsx
@@ -9,6 +9,7 @@ import { selectAuth } from '../../store/authReducer'
 import Router from 'next/router'
 import { useEffect } from 'react'
 import SendSMS from '../../components/dashboard/SendSMS'
+import ErrorBoundary from '../../components/ErrorBoundary'
 
 export default function Dashboard() {
   const { user: currentUser } = useSelector(selectAuth)
@@ -27,7 +28,7 @@ export default function Dashboard() {
     <>
       <UserStats />
       <Box maxW='7xl' mx={'auto'} pt={5} px={{ base: 2, sm: 12, md: 17 }}>
-        <Flex justifyContent='space-evenly' >
+        <Flex justifyContent='space-evenly'>
           <GenerateApiKey />
           <SendSMS />
         </Flex>
@@ -35,10 +36,14 @@ export default function Dashboard() {
         <br />
         <SimpleGrid columns={{ base: 1, md: 2 }} spacing={{ base: 5, lg: 8 }}>
           <Box backdropBlur='2xl' borderWidth='1px' borderRadius='lg'>
-            <ApiKeyList />
+            <ErrorBoundary>
+              <ApiKeyList />
+            </ErrorBoundary>
           </Box>
           <Box backdropBlur='2xl' borderWidth='1px' borderRadius='lg'>
-            <DeviceList />
+            <ErrorBoundary>
+              <DeviceList />
+            </ErrorBoundary>
           </Box>
         </SimpleGrid>
       </Box>