chore(web): implement error boundary

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
+  }
+}

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>
   )
 }
 

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>