logging, error boundry

components/ErrorBoundary.tsx

@@ -1,10 +1,14 @@
 import React from 'react';
-const logger = require('../src/logger');
 
 class ErrorBoundary extends React.Component {
     constructor(props) {
         super(props);
         this.state = { hasError: false };
+        this.logger = null;
+
+        if (typeof window === 'undefined') {
+            this.logger = require('../src/logger');
+        }
     }
 
     static getDerivedStateFromError(error) {
@@ -13,14 +17,16 @@ class ErrorBoundary extends React.Component {
     }
 
     componentDidCatch(error, info) {
-        // You can also log the error to an error reporting service
+        // Log the error to an error reporting service
         console.error(error, info);
-        logger.error(error, info);
+        if (this.logger) {
+            this.logger.error(`${error}: ${info.componentStack}`);
+        }
     }
 
     render() {
         if (this.state.hasError) {
-            // You can render any custom fallback UI
+            // Render any custom fallback UI
             return <h1>Нещо се обърка при изтриването. Моля, опитай отново и се свържете с нас ако проблема продължи. </h1>;
         }
 
@@ -28,4 +34,4 @@ class ErrorBoundary extends React.Component {
     }
 }
 
-export default ErrorBoundary;
+export default ErrorBoundary;

components/layout.tsx

@@ -10,6 +10,7 @@ import Body from 'next/document'
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { set } from "date-fns"
+import ErrorBoundary from "./ErrorBoundary";
 
 export default function Layout({ children }) {
   const router = useRouter();
@@ -61,7 +62,9 @@ export default function Layout({ children }) {
           <Sidebar isSidebarOpen={isSidebarOpen} toggleSidebar={toggleSidebar} />
           <main className={`flex-1 transition-all duration-300 ${marginLeftClass}`}>
             <div className="">
-              {children}
+              <ErrorBoundary>
+                {children}
+              </ErrorBoundary>
             </div>
             <div id="modal-root"></div>  {/* Modal container */}
           </main>