From 67cdaf698f8edba978d8e2d8fcae6c0ea60a901d Mon Sep 17 00:00:00 2001 From: Prabhakar acharya Date: Sun, 29 Dec 2024 16:10:19 +1100 Subject: [PATCH 1/4] install react error boundary --- package-lock.json | 13 +++++++++++++ package.json | 1 + 2 files changed, 14 insertions(+) diff --git a/package-lock.json b/package-lock.json index ba6e271..bbd7d91 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "date-fns": "^4.1.0", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-error-boundary": "^5.0.0", "react-hook-form": "^7.54.2", "react-hot-toast": "^2.4.1", "react-icons": "^5.4.0", @@ -5050,6 +5051,18 @@ "react": "^18.3.1" } }, + "node_modules/react-error-boundary": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-5.0.0.tgz", + "integrity": "sha512-tnjAxG+IkpLephNcePNA7v6F/QpWLH8He65+DmedchDwg162JZqx4NmbXj0mlAYVVEd81OW7aFhmbsScYfiAFQ==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.12.5" + }, + "peerDependencies": { + "react": ">=16.13.1" + } + }, "node_modules/react-hook-form": { "version": "7.54.2", "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.54.2.tgz", diff --git a/package.json b/package.json index 07c2304..19f9381 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "date-fns": "^4.1.0", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-error-boundary": "^5.0.0", "react-hook-form": "^7.54.2", "react-hot-toast": "^2.4.1", "react-icons": "^5.4.0", From 0e8554da7e864faf9305fc154a8173989327b636 Mon Sep 17 00:00:00 2001 From: Prabhakar acharya Date: Sun, 29 Dec 2024 16:10:42 +1100 Subject: [PATCH 2/4] prettier formatter --- src/features/bookings/BookingTable.jsx | 60 +++++++++++++------------- 1 file changed, 31 insertions(+), 29 deletions(-) diff --git a/src/features/bookings/BookingTable.jsx b/src/features/bookings/BookingTable.jsx index 635706f..acb1551 100644 --- a/src/features/bookings/BookingTable.jsx +++ b/src/features/bookings/BookingTable.jsx @@ -1,37 +1,39 @@ -import BookingRow from './BookingRow'; -import { Table, Pagination } from '@/ui/Tables'; -import { Menus } from '@/ui/ActionControls'; -import { Empty, Spinner } from '@/ui/Common'; -import { useBookings } from './useBookings'; +import BookingRow from "./BookingRow"; +import { Table, Pagination } from "@/ui/Tables"; +import { Menus } from "@/ui/ActionControls"; +import { Empty, Spinner } from "@/ui/Common"; +import { useBookings } from "./useBookings"; function BookingTable() { - const { isLoading, bookings, count } = useBookings(); + const { isLoading, bookings, count } = useBookings(); - if (isLoading) return ; - if (!bookings.length) ; + if (isLoading) return ; + if (!bookings.length) ; - return ( - - - -
Cabin
-
Guest
-
Dates
-
Status
-
Amount
-
- + return ( + +
+ +
Cabin
+
Guest
+
Dates
+
Status
+
Amount
+
+ - } - /> - - - -
- - ); + ( + + )} + /> + + + + + + ); } export default BookingTable; From 655ef7fce08b7f6109d8222fd6584a83670a2082 Mon Sep 17 00:00:00 2001 From: Prabhakar acharya Date: Sun, 29 Dec 2024 16:11:10 +1100 Subject: [PATCH 3/4] prettier formatter --- src/layouts/AppLayout.jsx | 58 +++++++++++++++++++-------------------- 1 file changed, 28 insertions(+), 30 deletions(-) diff --git a/src/layouts/AppLayout.jsx b/src/layouts/AppLayout.jsx index 252c909..07b316f 100644 --- a/src/layouts/AppLayout.jsx +++ b/src/layouts/AppLayout.jsx @@ -1,41 +1,39 @@ -import { Outlet } from 'react-router-dom'; -import Header from './Header'; -import Sidebar from './Sidebar'; -import ErrorBoundary from './ErrorBoundry'; -import styled from 'styled-components'; +import { Outlet } from "react-router-dom"; +import Header from "./Header"; +import Sidebar from "./Sidebar"; +import ErrorBoundary from "./ErrorBoundry"; +import styled from "styled-components"; const StyledAppLayout = styled.div` - display: grid; - grid-template-columns: 26rem 1fr; - grid-template-rows: auto 1fr; - height: 100vh; + display: grid; + grid-template-columns: 26rem 1fr; + grid-template-rows: auto 1fr; + height: 100vh; `; const Main = styled.main` - padding: 4rem 4.8rem 6.4rem; - background-color: var(--color-grey-50); - overflow: scroll; + padding: 4rem 4.8rem 6.4rem; + background-color: var(--color-grey-50); + overflow: scroll; `; const Container = styled.div` - max-width: 120rem; - margin: 0 auto; + max-width: 120rem; + margin: 0 auto; - display: flex; - flex-direction: column; - gap: 3.2rem; + display: flex; + flex-direction: column; + gap: 3.2rem; `; export default function AppLayout() { - return ( - - -
- -
- - - -
- - - ); + return ( + +
+ +
+ + + +
+ + ); } From e54528b8d233957c8fbb6b208beb902172160cca Mon Sep 17 00:00:00 2001 From: Prabhakar acharya Date: Sun, 29 Dec 2024 16:11:31 +1100 Subject: [PATCH 4/4] useing error boundary on main --- src/layouts/ErrorBoundry.jsx | 81 +++++++++++++++++--------------- src/main.jsx | 21 ++++++--- src/ui/Common/ErrorFallback.jsx | 82 ++++++++++++++++++++------------- 3 files changed, 107 insertions(+), 77 deletions(-) diff --git a/src/layouts/ErrorBoundry.jsx b/src/layouts/ErrorBoundry.jsx index bf00c42..f1fabf1 100644 --- a/src/layouts/ErrorBoundry.jsx +++ b/src/layouts/ErrorBoundry.jsx @@ -1,47 +1,54 @@ -import React, { Component } from 'react'; -import { Heading } from '@/ui/Common'; -import styled from 'styled-components'; +import React, { Component } from "react"; +import { Heading } from "@/ui/Common"; +import styled from "styled-components"; const ErrorContainer = styled.div` - display: block; - margin: 10rem auto; - padding: 4rem; - text-align: center; - border: 1px solid var(--color-grey-300); - border-radius: 5px; - max-width: 114rem; + display: block; + margin: 10rem auto; + padding: 4rem; + text-align: center; + border: 1px solid var(--color-grey-300); + border-radius: 5px; + max-width: 114rem; `; const P = styled.p` - margin-top: 1.6rem; + margin-top: 1.6rem; `; + +/** + * @description ErrorBoundary component is a class component that catches error in the application + * this is our custom error boundary component that catches error in the application + * not is use at the moment but can be used in the future and remove react-error-boundary package + */ class ErrorBoundary extends Component { - constructor(props) { - super(props); - this.state = { hasError: false }; - } - static getDerivedStateFromError(error) { - return { hasError: true }; - } - componentDidCatch(error, errorInfo) { - console.error(error, errorInfo); - } - render() { - if (this.state.hasError) { - return ( - -
- Apologies. -

- Something went wrong while processing your request. we are currently working on this - issue and will get back as soon as possible -

-
- - ); - } - return this.props.children; - } + constructor(props) { + super(props); + this.state = { hasError: false }; + } + static getDerivedStateFromError(error) { + return { hasError: true }; + } + componentDidCatch(error, errorInfo) { + console.error(error, errorInfo); + } + render() { + if (this.state.hasError) { + return ( + +
+ Apologies. +

+ Something went wrong while processing your request. + we are currently working on this issue and will get + back as soon as possible +

+
+ + ); + } + return this.props.children; + } } export default ErrorBoundary; diff --git a/src/main.jsx b/src/main.jsx index bfd26b8..9cfbcf5 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,9 +1,16 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import App from './App.jsx'; +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App.jsx"; +import { ErrorBoundary } from "react-error-boundary"; +import { ErrorFallback } from "./ui/Common"; -ReactDOM.createRoot(document.getElementById('root')).render( - - - , +ReactDOM.createRoot(document.getElementById("root")).render( + + window.location.replace("/")} + > + + + , ); diff --git a/src/ui/Common/ErrorFallback.jsx b/src/ui/Common/ErrorFallback.jsx index 49a3c11..bdf001f 100644 --- a/src/ui/Common/ErrorFallback.jsx +++ b/src/ui/Common/ErrorFallback.jsx @@ -1,43 +1,59 @@ -import styled from 'styled-components'; - +import styled from "styled-components"; +import GlobalStyles from "@/styles/GlobalStyles"; +import { Button } from "../Buttons"; const StyledErrorFallback = styled.main` - height: 100vh; - background-color: var(--color-grey-50); - display: flex; - align-items: center; - justify-content: center; - padding: 4.8rem; + height: 100vh; + background-color: var(--color-grey-50); + display: flex; + align-items: center; + justify-content: center; + padding: 4.8rem; `; const Box = styled.div` - /* Box */ - background-color: var(--color-grey-0); - border: 1px solid var(--color-grey-100); - border-radius: var(--border-radius-md); + /* Box */ + background-color: var(--color-grey-0); + border: 1px solid var(--color-grey-100); + border-radius: var(--border-radius-md); - padding: 4.8rem; - flex: 0 1 96rem; - text-align: center; + padding: 4.8rem; + flex: 0 1 96rem; + text-align: center; - & h1 { - margin-bottom: 1.6rem; - } + & h1 { + margin-bottom: 1.6rem; + } - & p { - font-family: 'Sono'; - margin-bottom: 3.2rem; - color: var(--color-grey-500); - } + & p { + font-family: "Sono"; + margin-bottom: 3.2rem; + color: var(--color-grey-500); + } `; -export default function ErrorFallback({ error }) { - return ( - - -

Something went wrong

-

{error.message}

- - - - ); +/** + * @props error and resetErrorBoundary + * @description error is a any error that is thrown in the application with in component + * @description resetErrorBoundary is a function that resets the error boundary, + * it is a reset function that is called when the user clicks the "Try again" button on ErrorBoundry component on main.js + * + * @note this only catches error when the react is rendering the component. + * @param {*} param0 + * @returns + */ +export default function ErrorFallback({ error, resetErrorBoundary }) { + return ( + <> + + + +

Something went wrong

+

{error.message}

+ + + + + ); }