Merge pull request #118 from SpaceyaTech/error-boundary

add-error-boundary

src/APP/index.js

@@ -25,6 +25,8 @@ import Error403 from "./pages/errorPages/Error403";
 import Error404 from "./pages/errorPages/Error404";
 import Error500 from "./pages/errorPages/Error500";
 
+import ErrorBoundary from "./pages/errorPages/ErrorBoundary";
+
 import ProductDisplay from "./pages/shop/pages/ProductDisplay";
 import GalleryPage from "./pages/gallery/GalleryPage";
 
@@ -51,6 +53,7 @@ export {
   Error403,
   Error404,
   Error500,
+  ErrorBoundary,
   ProductDisplay,
   GalleryPage,
 };

src/APP/pages/blog/Blog.jsx

@@ -1,4 +1,3 @@
-
 import React, { useEffect } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 
@@ -15,7 +14,6 @@ function Blog() {
   const {
     data: blogData,
     refetch: refetchBlogData,
-
     isLoading,
     isError,
     isSuccess,

src/APP/pages/blog/sections/RelatedBlogs.jsx

@@ -4,6 +4,7 @@ import { useRelatedBlogsData } from "../../../../hooks/Queries/blog/useBlogData"
 import BlogCard from "../../blogs/sections/BlogCard";
 import { filterRelatedBlogs } from "../../../../utilities/FilterBlogs";
 
+
 function RelatedBlogs({ blogId, categoryId }) {
   const { title_slug } = useParams();
 
@@ -24,6 +25,7 @@ function RelatedBlogs({ blogId, categoryId }) {
     title_slug
   );
 
+
   return (
     <>
       {isError && <p>Error loading blogs!</p>}

src/APP/pages/blogs/sections/BlogsWrapper.jsx

@@ -1,21 +1,16 @@
-/* eslint-disable operator-linebreak */
-/* eslint-disable react/jsx-indent */
 import React, { useState, useEffect, useContext } from "react";
-// import { useNavigate } from "react-router-dom";
 
 import BlogCard from "./BlogCard";
 import BlogPagination from "./BlogPagination";
 
 import { Loader } from "../../../components";
-
 import { SearchBlogContext } from "../../../../context/searchBlog";
 import {
   useBlogsData,
   useBlogCategories,
 } from "../../../../hooks/Queries/blogs/useAllBlogsData";
 
 import { filterBlogsByCat } from "../../../../utilities/FilterBlogs";
-
 import Error500 from "../../errorPages/Error500";
 
 function SearchResults({ searchText }) {
@@ -77,6 +72,7 @@ function BlogsWrapper() {
       {isSuccess && (
         <>
           <div className="w-full md:w-fit overflow-x-auto md:overflow-auto flex flex-row items-center gap-4 md:px-3 md:gap-3 md:mb-2">
+
             {statusBlogCategories === "error" && (
               <p>Error loading blog categories!</p>
             )}

src/APP/pages/errorPages/Error400.jsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { Link } from "react-router-dom";
 
 import { error400 } from "../../../assets/images/errorPages";
 
@@ -16,18 +15,18 @@ function Error400() {
         <p className="px-6 text-base sm:text-lg font-normal">
           There was a problem with your request. If you continue to see this
           error, please{" "}
-          <Link to="/" className="text-primary hover:underline">
+          <a href="/" className="text-primary hover:underline">
             contact us.
-          </Link>
+          </a>
           .
         </p>
 
-        <Link
-          to="/"
+        <a
+          href="/"
           className="bg-primary text-base rounded-lg text-white w-max py-2 px-10 mt-4"
         >
           Go Home
-        </Link>
+        </a>
       </div>
     </section>
   );

src/APP/pages/errorPages/Error403.jsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { Link } from "react-router-dom";
 
 import { error403 } from "../../../assets/images/errorPages";
 
@@ -16,18 +15,18 @@ function Error403() {
         <p className="px-6 text-base sm:text-lg font-normal">
           You don’t have permission to view this resource. If you believe there
           has been a mistake, please{" "}
-          <Link to="/" className="text-primary hover:underline">
+          <a href="/" className="text-primary hover:underline">
             contact us.
-          </Link>
+          </a>
           .
         </p>
 
-        <Link
-          to="/"
+        <a
+          href="/"
           className="bg-primary text-base rounded-lg text-white w-max py-2 px-10 mt-4"
         >
           Go Home
-        </Link>
+        </a>
       </div>
     </section>
   );

src/APP/pages/errorPages/Error500.jsx

@@ -1,6 +1,4 @@
 import React from "react";
-import { Link } from "react-router-dom";
-
 import { bgError500, error500svg } from "../../../assets/images/errorPages";
 
 function Error500() {
@@ -30,17 +28,18 @@ function Error500() {
             <p className="text-xl font-normal mb-2">
               We’re experiencing an internal server problem. Please try again
               after a few minutes or{" "}
-              <Link to="/" className="text-primary hover:underline">
+              <a href="/" className="text-primary hover:underline">
                 contact us.
-              </Link>
+              </a>
             </p>
 
-            <Link
-              to="/"
+            <a
+              href="/"
               className="bg-[#00664E] rounded-lg text-white w-max py-2 px-10"
             >
               Go Home
-            </Link>
+            </a>
+
           </div>
         </div>
 
@@ -60,17 +59,17 @@ function Error500() {
         <p className="text-base font-normal mb-2 max-w-lg ">
           We’re experiencing an internal server problem. Please try again after
           a few minutes or{" "}
-          <Link to="/" className="text-primary hover:underline">
+          <a href="/" className="text-primary hover:underline">
             contact us.
-          </Link>
+          </a>
         </p>
 
-        <Link
-          to="/"
+        <a
+          href="/"
           className="bg-primary text-base rounded-lg text-white w-max py-2 px-10"
         >
           Go Home
-        </Link>
+        </a>
       </div>
     </section>
   );

src/APP/pages/errorPages/ErrorBoundary.jsx

@@ -0,0 +1,33 @@
+import React, { useState, useEffect } from "react";
+
+import Error500 from "./Error500";
+
+function ErrorBoundary({ children }) {
+  const [hasError, setHasError] = useState(false);
+
+  useEffect(() => {
+    const errorHandler = (error) => {
+      console.error(
+        "Error: ",
+        error.message,
+        "ErrorFileName: ",
+        error.filename
+      );
+      setHasError(true);
+    };
+
+    window.addEventListener("error", errorHandler);
+
+    return () => {
+      window.removeEventListener("error", errorHandler);
+    };
+  }, []);
+
+  if (hasError) {
+    return <Error500 />;
+  }
+
+  return <>{children}</>;
+}
+
+export default ErrorBoundary;

src/APP/pages/events/sections/eventsSection/Events.jsx

@@ -8,7 +8,7 @@ function Events({ events, isVertical }) {
   const verticalContainer =
     "my-6 grid grid-cols-1 gap-x-3 gap-y-10 sm:grid-cols-2 lg:grid-cols-5 xl:gap-x-8";
   const horizontalContainer =
-    "flex overflow-x-auto px-0 md:px-4 justify-between gap-2 sm:gap-4 w-full";
+    "flex overflow-x-auto px-0 md:px-4 gap-2 sm:gap-4 w-full";
 
   // Event Card classes
   const verticalWrapper =

src/main.jsx

@@ -8,7 +8,7 @@ import "./index.css";
 import router from "./router";
 import { SearchBlogProvider } from "./context/searchBlog";
 import { AuthContextProvider } from "./utils/AuthContext";
-
+import { ErrorBoundary } from "./APP";
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -19,13 +19,15 @@ const queryClient = new QueryClient({
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
-    <AuthContextProvider>
-      <QueryClientProvider client={queryClient}>
-        <SearchBlogProvider>
-          <RouterProvider router={router} />
-          <ReactQueryDevtools position="bottom-right" />
-        </SearchBlogProvider>
-      </QueryClientProvider>
-    </AuthContextProvider>
+    <ErrorBoundary>
+      <AuthContextProvider>
+        <QueryClientProvider client={queryClient}>
+          <SearchBlogProvider>
+            <RouterProvider router={router} />
+            <ReactQueryDevtools position="bottom-right" />
+          </SearchBlogProvider>
+        </QueryClientProvider>
+      </AuthContextProvider>
+    </ErrorBoundary>
   </React.StrictMode>
 );

src/router/index.jsx

@@ -141,6 +141,7 @@ const router = createBrowserRouter([
   {
     path: "/error-403",
     element: <Error403 />,
+
   },
   {
     path: "/*",