From ef4a640fcd97def75d50f9296276dc985f307dd3 Mon Sep 17 00:00:00 2001 From: SpaceYaTech <139357796+spaceyatech-org@users.noreply.github.com> Date: Thu, 25 Jan 2024 17:07:11 +0300 Subject: [PATCH] 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 Co-authored-by: Jimmy Oty * 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 * 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 --------- Co-authored-by: SpaceYaTech <139357796+spaceyatech-org@users.noreply.github.com> Co-authored-by: Jimmy Oty * 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 Co-authored-by: Jimmy Oty Co-authored-by: Collins Kasyoki Co-authored-by: sonylomo --- src/APP/index.js | 2 ++ src/APP/pages/blog/Blog.jsx | 8 +---- src/APP/pages/blog/sections/RelatedBlogs.jsx | 7 ++-- src/APP/pages/blogs/sections/BlogsWrapper.jsx | 7 ---- src/APP/pages/errorPages/Error500.jsx | 23 +++++++------ src/APP/pages/errorPages/ErrorBoundary.jsx | 33 +++++++++++++++++++ .../eventsSection/EventsUpdateSection.jsx | 2 -- src/main.jsx | 20 ++++++----- src/router/index.jsx | 8 +---- 9 files changed, 63 insertions(+), 47 deletions(-) create mode 100644 src/APP/pages/errorPages/ErrorBoundary.jsx diff --git a/src/APP/index.js b/src/APP/index.js index 4a755f70..15910b9d 100644 --- 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 index 4e949891..889d3e82 100644 --- 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 (
{isError && navigate("/error-500")} diff --git a/src/APP/pages/blog/sections/RelatedBlogs.jsx b/src/APP/pages/blog/sections/RelatedBlogs.jsx index 04819087..65f87bb0 100644 --- 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 &&

Error loading blogs!

} {isLoading &&

Loading blogs...

} - {isSuccess && filteredRelatedBlogs.length > 0 && ( <> -

+

+ {filteredRelatedBlogs.length > 1 ? "Related Articles" : "Related Article"} @@ -53,7 +55,6 @@ function RelatedBlogs({ blogId, categoryId }) { )}

- )} ); diff --git a/src/APP/pages/blogs/sections/BlogsWrapper.jsx b/src/APP/pages/blogs/sections/BlogsWrapper.jsx index 3964c83f..13a181a9 100644 --- a/src/APP/pages/blogs/sections/BlogsWrapper.jsx +++ b/src/APP/pages/blogs/sections/BlogsWrapper.jsx @@ -5,9 +5,7 @@ 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, @@ -15,8 +13,6 @@ import { } from "../../../../hooks/Queries/blogs/useAllBlogsData"; import { filterBlogsByCat } from "../../../../utilities/FilterBlogs"; - - function SearchResults({ searchText }) { return (

@@ -24,7 +20,6 @@ function SearchResults({ searchText }) { "{searchText}" -

); } @@ -99,7 +94,6 @@ function BlogsWrapper() { blogCategories && Array.isArray(blogCategories) ? blogCategories.map((blog) => ( - - )) : null} diff --git a/src/APP/pages/errorPages/Error500.jsx b/src/APP/pages/errorPages/Error500.jsx index 2c879d4e..bfeb1a75 100644 --- 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() {

We’re experiencing an internal server problem. Please try again after a few minutes or{" "} - + contact us. - +

- Go Home - + + @@ -60,17 +59,17 @@ function Error500() {

We’re experiencing an internal server problem. Please try again after a few minutes or{" "} - + contact us. - +

- Go Home - + ); diff --git a/src/APP/pages/errorPages/ErrorBoundary.jsx b/src/APP/pages/errorPages/ErrorBoundary.jsx new file mode 100644 index 00000000..34e1d5bf --- /dev/null +++ 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 ; + } + + 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 index aa63d953..4d161cd3 100644 --- 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 index 01e98260..0590c09c 100644 --- 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( - - - - - - - - + + + + + + + + + + ); diff --git a/src/router/index.jsx b/src/router/index.jsx index de09d2df..6a7cbdf1 100644 --- 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: , }, { - path: "/Gallery", element: , }, @@ -108,7 +105,6 @@ const router = createBrowserRouter([ path: "/events/:id", // New route path element: , }, - // { // path: "/resources", // element: , @@ -122,8 +118,6 @@ const router = createBrowserRouter([ // element: , // }, // { - - // path: "/signup", // element: , // }, @@ -141,6 +135,7 @@ const router = createBrowserRouter([ { path: "/error-403", element: , + }, { path: "/*", @@ -151,7 +146,6 @@ const router = createBrowserRouter([ element: , }, - // { // path: "/admin", // element: ,