feat: add error boundary

makes crashes graceful

src/pages/404.tsx

@@ -1,7 +1,7 @@
 import ErrorInfo from '../components/error/ErrorInfo';
 
 const Error404 = () => {
-  return <ErrorInfo />;
+  return <ErrorInfo message='Not found, sorry.' statusCode={404} />;
 };
 
 export default Error404;

src/pages/500.tsx

@@ -1,6 +1,6 @@
 import ErrorInfo from '../components/error/ErrorInfo';
 
 const Error500 = () => {
-  return <ErrorInfo message="server messed up, sorry." statusCode={500} />;
+  return <ErrorInfo message='Server messed up, sorry.' statusCode={500} />;
 };
 export default Error500;

src/pages/_app.tsx

@@ -1,10 +1,10 @@
 import type { AppProps } from 'next/app';
 import usePageLoading from '../hooks/usePageLoading';
 import ProgressBar from '../components/loaders/ProgressBar';
+import ErrorBoundary from '../components/error/ErrorBoundary';
 import ThemeProvider from '../context/theme-context';
 
 import '../styles/main.scss';
-import { useRouter } from 'next/router';
 
 const ModifiedApp = ({ Component, pageProps }: AppProps) => {
   const { isPageLoading, key } = usePageLoading();
@@ -12,10 +12,12 @@ const ModifiedApp = ({ Component, pageProps }: AppProps) => {
   return (
     <ThemeProvider>
       {isPageLoading && <ProgressBar />}
-      <Component
-        {...pageProps}
-        key={key} /* passing key to force react to remound components */
-      />
+      <ErrorBoundary>
+        <Component
+          {...pageProps}
+          key={key} /* passing key to force react to remount components */
+        />
+      </ErrorBoundary>
     </ThemeProvider>
   );
 };