Error boundary (#121)

* init blog formatting * format blogs page * add line-clamp to podCard title&desc * return categories * add blog search functionality * prevent blogWrapper.css styles affecting other components * add text-primary & bg in global.css * style code on blog body * wrap no result in a p tag * init pageNotFound * import 404 image * complete page not found page * import formatDistanceToNow (#100) * refactor service section * change param to title_slug * filter blogs by categories * make blog categories scrollable * span components on the landing page * add download attribute internship document * fix route * fetch related blogs on blog page * refetch on page change * add error img * add condition filtering to cat * add loader to blog page * build error500 mobile page * build error500 web page * remove img border * error 400 page build * error 400 page build * error 403 page build * reinsert 404 page * remove 403 route * removed unbuilt routes * Filter out recurring current blog on related blogs fetched. * Add error500 svg img * Dev resolve conflict (#106) * Update Dev (#96) * - * remove and refactor code * import useQuery * make navlinks active * delete NavLink component * set max-width on pages --------- Co-authored-by: felixNyalenda <[email protected]> Co-authored-by: Jimmy Oty <[email protected]> * Update 05-01-24 (#99) * init blog formatting * format blogs page * add line-clamp to podCard title&desc * return categories * add blog search functionality * prevent blogWrapper.css styles affecting other components * add text-primary & bg in global.css * style code on blog body * wrap no result in a p tag --------- Co-authored-by: felixNyalenda <[email protected]> * Update 05-01-24 Beta (#101) * init blog formatting * format blogs page * add line-clamp to podCard title&desc * return categories * add blog search functionality * prevent blogWrapper.css styles affecting other components * add text-primary & bg in global.css * style code on blog body * wrap no result in a p tag * import formatDistanceToNow (#100) --------- Co-authored-by: felixNyalenda <[email protected]> --------- Co-authored-by: SpaceYaTech <[email protected]> Co-authored-by: Jimmy Oty <[email protected]> * remove duplicate * create error routes * re-route to error-pages * Add related blogs header * conditionally render related blogs * conditionally render related blogs * resize subscription form on small screens * style: fixed styles on landing page * refactor: added temp API statements * refactor: added single order endpoint * rename related blogs header to related articles * gallery init * add dummy photos * reformat event dates * format date on the events page * remove console logs * add Loader * remove parse * Add blog liking functionality * add hover effect * Hotfix 0.1 broken events page (#113) * Update date attribute name * Uncomment blocked single events page * use grid to render images * add overflow to events container * add wrap on Events cities filter for mobile * add more photos * change id number * data syt photos * refactor: add gallery footer link * add error boundary --------- Co-authored-by: felixNyalenda <[email protected]> Co-authored-by: Jimmy Oty <[email protected]> Co-authored-by: Collins Kasyoki <[email protected]> Co-authored-by: sonylomo <[email protected]>
SpaceyaTech · Jan 25, 2024 · ef4a640 · ef4a640 · vercel · Jan 25, 2024
1 parent 3d81c63
commit ef4a640
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 47 deletions.
diff --git a/src/APP/index.js b/src/APP/index.js
@@ -25,6 +25,7 @@ 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";
 
@@ -52,6 +53,7 @@ export {
   Error403,
   Error404,
   Error500,
+  ErrorBoundary,
   ProductDisplay,
   GalleryPage,
 

diff --git a/src/APP/pages/blog/Blog.jsx b/src/APP/pages/blog/Blog.jsx
@@ -1,5 +1,5 @@
 
-import React, { useEffect } from "react";
+import React from "react";
 import { useParams, useNavigate } from "react-router-dom";
 
 
@@ -14,18 +14,12 @@ function Blog() {
   const navigate = useNavigate();
   const {
     data: blogData,
-    refetch: refetchBlogData,
 
     isLoading,
     isError,
     isSuccess,
   } = useBlogData(title_slug);
 
-
-  useEffect(() => {
-    refetchBlogData();
-  }, [title_slug]);
-
   return (
     <div className="w-screen max-w-[1440px] mx-auto">
       {isError && navigate("/error-500")}

diff --git a/src/APP/pages/blog/sections/RelatedBlogs.jsx b/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,15 +25,16 @@ function RelatedBlogs({ blogId, categoryId }) {
     title_slug
   );
 
+
   return (
     <>
       {isError && <p>Error loading blogs!</p>}
       {isLoading && <p>Loading blogs...</p>}
 
-
       {isSuccess && filteredRelatedBlogs.length > 0 && (
         <>
-          <h2 className="text-2xl text-black font-semibold underline decoration-green-600 underline-offset-2">
+          <h2 className="text-2xl text-gray-500 font-semibold underline decoration-green-600 underline-offset-2">
+
             {filteredRelatedBlogs.length > 1
               ? "Related Articles"
               : "Related Article"}
@@ -53,7 +55,6 @@ function RelatedBlogs({ blogId, categoryId }) {
             )}
           </div>
         </>
-
       )}
     </>
   );

diff --git a/src/APP/pages/blogs/sections/BlogsWrapper.jsx b/src/APP/pages/blogs/sections/BlogsWrapper.jsx
@@ -5,26 +5,21 @@ 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";
-
-
 function SearchResults({ searchText }) {
   return (
     <h3 className="text-black text-xl md:text-3xl font-semibold leading-8 md:leading-loose text-center">
       Showing results for
 
       <span className="text-primary"> "{searchText}"</span>
 
-
     </h3>
   );
 }
@@ -99,7 +94,6 @@ function BlogsWrapper() {
             blogCategories &&
             Array.isArray(blogCategories)
               ? blogCategories.map((blog) => (
-
                   <button
                     type="button"
                     key={blog.id}
@@ -110,7 +104,6 @@ function BlogsWrapper() {
                   >
                     {blog.name}
                   </button>
-
                 ))
               : null}
           </div>

diff --git a/src/APP/pages/errorPages/Error500.jsx b/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>
   );

diff --git a/src/APP/pages/errorPages/ErrorBoundary.jsx b/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;
diff --git a/src/APP/pages/events/sections/eventsSection/EventsUpdateSection.jsx b/src/APP/pages/events/sections/eventsSection/EventsUpdateSection.jsx
@@ -1,7 +1,5 @@
 
 import React from "react"; // , { useState }
-
-
 import { Link } from "react-router-dom";
 
 function EventsUpdateSection({

diff --git a/src/main.jsx b/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>
 );
diff --git a/src/router/index.jsx b/src/router/index.jsx
@@ -16,7 +16,6 @@ import {
   DonatePage,
   Homepage,
   Resources,
-
   ProductDisplay,
   Checkout,
   SingleEvent,
@@ -26,7 +25,6 @@ import {
   Error400,
   Error403,
   GalleryPage,
-
 } from "../APP";
 // import {
 //   AllChaptersPage,
@@ -66,7 +64,6 @@ const router = createBrowserRouter([
         element: <CommunityPage />,
       },
       {
-
         path: "/Gallery",
         element: <GalleryPage />,
       },
@@ -108,7 +105,6 @@ const router = createBrowserRouter([
         path: "/events/:id", // New route path
         element: <SingleEvent />,
       },
-
       // {
       //   path: "/resources",
       //   element: <Resources />,
@@ -122,8 +118,6 @@ const router = createBrowserRouter([
       //   element: <SingleProductDonation />,
       // },
       // {
-
-
       //   path: "/signup",
       //   element: <SignUp />,
       // },
@@ -141,6 +135,7 @@ const router = createBrowserRouter([
   {
     path: "/error-403",
     element: <Error403 />,
+
   },
   {
     path: "/*",
@@ -151,7 +146,6 @@ const router = createBrowserRouter([
     element: <Error500 />,
   },
 
-
   // {
   //   path: "/admin",
   //   element: <AdminLayout />,