From 797122fdf260f5c9cc960e38516cc34386ae477b Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Wed, 15 Nov 2023 18:59:02 +0530 Subject: [PATCH 1/4] fix(refactor): refactor error boundary Signed-off-by: Sudhanshu Dasgupta --- packages/components/package.json | 3 +- .../custom/ErrorBoundary/ErrorBoundary.tsx | 126 ++++++++---------- .../src/custom/ErrorBoundary/index.tsx | 2 +- 3 files changed, 61 insertions(+), 70 deletions(-) diff --git a/packages/components/package.json b/packages/components/package.json index b4d4eea6..d18973e7 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -24,7 +24,8 @@ "lint:fix": "eslint --fix" }, "dependencies": { - "@layer5/sistent-svg": "^0.14.0" + "@layer5/sistent-svg": "^0.14.0", + "react-error-boundary": "^4.0.11" }, "devDependencies": { "@emotion/react": "^11.11.1", diff --git a/packages/components/src/custom/ErrorBoundary/ErrorBoundary.tsx b/packages/components/src/custom/ErrorBoundary/ErrorBoundary.tsx index f4bf27df..f0669d33 100644 --- a/packages/components/src/custom/ErrorBoundary/ErrorBoundary.tsx +++ b/packages/components/src/custom/ErrorBoundary/ErrorBoundary.tsx @@ -1,88 +1,78 @@ -/* -import { - ErrorBoundaryProps, - FallbackProps, - ErrorBoundary as ReactErrorBoundary -} from 'react-error-boundary'; +import React, { ComponentType, ReactNode } from 'react'; +import { FallbackProps, ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary'; import { Button } from '../../base/Button'; -import React from 'react'; -function Fallback({ error, resetErrorBoundary }: FallbackProps): JSX.Element { - if (error instanceof Error) { - // Check if error is an instance of Error - return ( -
-

Uh-oh!😔 Please pardon the mesh.

-
- {error.message} -
- -
- ); - } else { - // Handle the case where error is not an instance of Error - return ( -
-

Uh-oh!😔 An unknown error occurred.

- +interface FallbackComponentProps extends FallbackProps { + resetErrorBoundary: () => void; +} + +function Fallback({ error, resetErrorBoundary }: FallbackComponentProps): JSX.Element { + return ( +
+

Uh-oh!😔 Please pardon the mesh.

+
+ {(error as Error).message}
- ); - } + +
+ ); } -function reportError(error: Error, info: React.ErrorInfo): void { - // This is where you'd send the error to Sentry, etc. +const reportError = (error: Error, info: { componentStack: string }): void => { + // This is where you'd send the error to Sentry, etc console.log('Error Caught Inside Boundary --reportError', error, 'Info', info); +}; + +interface ErrorBoundaryProps { + children: ReactNode; } -function ErrorBoundary({ children, ...props }: ErrorBoundaryProps): JSX.Element { +export const ErrorBoundary: React.FC = ({ children }) => { return ( - + {children} ); -} - -function withErrorBoundary

( - Component: React.ComponentType

, - errorHandlingProps: ErrorBoundaryProps | null -): JSX.Element { - const WrappedWithErrorBoundary = (props: P): JSX.Element => ( - - - - ); - - return WrappedWithErrorBoundary; -} +}; -interface Props { - children: React.ReactNode; +interface WithErrorBoundaryProps { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + Component: ComponentType; + errorHandlingProps?: ErrorBoundaryProps; } -function withSuppressedErrorBoundary

( - Component: React.ComponentType

-): JSX.Element { - const WrappedWithErrorBoundary = (props: P & Props): JSX.Element => ( - null}> - +export const WithErrorBoundary: React.FC = ({ + Component, + errorHandlingProps = { children: null } +}: WithErrorBoundaryProps): JSX.Element => { + return ( + + ); +}; - return WrappedWithErrorBoundary; +interface WithSuppressedErrorBoundaryProps { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + Component: ComponentType; } -export { ErrorBoundary, withErrorBoundary, withSuppressedErrorBoundary }; -*/ +export const withSuppressedErrorBoundary: React.FC = ({ + Component +}: WithSuppressedErrorBoundaryProps): JSX.Element => { + return ( + + + + ); +}; diff --git a/packages/components/src/custom/ErrorBoundary/index.tsx b/packages/components/src/custom/ErrorBoundary/index.tsx index ffc92554..d1a114da 100644 --- a/packages/components/src/custom/ErrorBoundary/index.tsx +++ b/packages/components/src/custom/ErrorBoundary/index.tsx @@ -1 +1 @@ -// export { ErrorBoundary, withErrorBoundary, withSuppressedErrorBoundary } from './ErrorBoundary'; +export { ErrorBoundary, WithErrorBoundary, withSuppressedErrorBoundary } from './ErrorBoundary'; From 673b6cdcc76d91c800721517032163927dbc519c Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Wed, 15 Nov 2023 19:07:37 +0530 Subject: [PATCH 2/4] fix(error): yarn error Signed-off-by: Sudhanshu Dasgupta --- yarn.lock | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/yarn.lock b/yarn.lock index adb8400f..dd218d0d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -912,6 +912,7 @@ __metadata: notistack: ^3.0.1 react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 + react-error-boundary: ^4.0.11 tsconfig: "workspace:^" tsup: ^7.2.0 typescript: ^5.0.2 @@ -8539,6 +8540,17 @@ __metadata: languageName: node linkType: hard +"react-error-boundary@npm:^4.0.11": + version: 4.0.11 + resolution: "react-error-boundary@npm:4.0.11" + dependencies: + "@babel/runtime": ^7.12.5 + peerDependencies: + react: ">=16.13.1" + checksum: b3c157fea4e8f78411e9aa0fbf5241f6907b66ede1cd8b7bb22faaeb0339ebeb3dc8e63bf90ef3f740bfa8fd994ca6edf975089cd371b664ad6c2735e7512d38 + languageName: node + linkType: hard + "react-is@npm:^16.13.1, react-is@npm:^16.7.0": version: 16.13.1 resolution: "react-is@npm:16.13.1" From 117653a215787fe7fe0e640a2fe9adf2393adc6b Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Mon, 22 Jan 2024 20:39:08 +0530 Subject: [PATCH 3/4] fix(refactor): error-boundary Signed-off-by: Sudhanshu Dasgupta --- packages/components/src/base/Link/Link.tsx | 5 +++ packages/components/src/base/Link/index.tsx | 1 + .../custom/ErrorBoundary/ErrorBoundary.tsx | 38 ++++++++++++++++--- 3 files changed, 39 insertions(+), 5 deletions(-) create mode 100644 packages/components/src/base/Link/Link.tsx create mode 100644 packages/components/src/base/Link/index.tsx diff --git a/packages/components/src/base/Link/Link.tsx b/packages/components/src/base/Link/Link.tsx new file mode 100644 index 00000000..76b6e405 --- /dev/null +++ b/packages/components/src/base/Link/Link.tsx @@ -0,0 +1,5 @@ +import { Link as MuiLink, LinkProps as MuiLinkProps } from '@mui/material'; + +export function Link(props: MuiLinkProps): JSX.Element { + return ; +} diff --git a/packages/components/src/base/Link/index.tsx b/packages/components/src/base/Link/index.tsx new file mode 100644 index 00000000..61fe08c6 --- /dev/null +++ b/packages/components/src/base/Link/index.tsx @@ -0,0 +1 @@ +export { Link } from './Link'; diff --git a/packages/components/src/custom/ErrorBoundary/ErrorBoundary.tsx b/packages/components/src/custom/ErrorBoundary/ErrorBoundary.tsx index f0669d33..a4062453 100644 --- a/packages/components/src/custom/ErrorBoundary/ErrorBoundary.tsx +++ b/packages/components/src/custom/ErrorBoundary/ErrorBoundary.tsx @@ -1,12 +1,31 @@ +import { styled } from '@mui/system'; import React, { ComponentType, ReactNode } from 'react'; import { FallbackProps, ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary'; -import { Button } from '../../base/Button'; +import { Box } from '../../base/Box'; +import { Link } from '../../base/Link'; +import { Typography } from '../../base/Typography'; +import { BLACK, KEPPEL } from '../../theme/colors'; + +const ErrorMessage = styled(Typography)(() => ({ + color: BLACK, + fontWeight: 'normal', + marginTop: '2px', + marginBottom: '2px', + fontSize: '1.15rem' +})); + +const StyledLink = styled(Link)(() => ({ + color: KEPPEL, + textDecoration: 'underline', + cursor: 'pointer' +})); interface FallbackComponentProps extends FallbackProps { resetErrorBoundary: () => void; + children?: ReactNode; } -function Fallback({ error, resetErrorBoundary }: FallbackComponentProps): JSX.Element { +function Fallback({ error, resetErrorBoundary, children }: FallbackComponentProps): JSX.Element { return (

Uh-oh!😔 Please pardon the mesh.

@@ -21,9 +40,18 @@ function Fallback({ error, resetErrorBoundary }: FallbackComponentProps): JSX.El > {(error as Error).message}
- + + We apologize for the inconvenience. The issue may be on our end. If troubleshooting doesn't + work, please check out our support channels{' '} + + Discuss Forum + {' '} + {' or '} + + Slack + + + {children}
); } From 420b4583c71d107fb0160f750dc8df4231a2e036 Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Mon, 22 Jan 2024 20:42:01 +0530 Subject: [PATCH 4/4] fix(lint): lint fix Signed-off-by: Sudhanshu Dasgupta --- packages/components/src/custom/ErrorBoundary/ErrorBoundary.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/custom/ErrorBoundary/ErrorBoundary.tsx b/packages/components/src/custom/ErrorBoundary/ErrorBoundary.tsx index a4062453..22daafe4 100644 --- a/packages/components/src/custom/ErrorBoundary/ErrorBoundary.tsx +++ b/packages/components/src/custom/ErrorBoundary/ErrorBoundary.tsx @@ -25,7 +25,7 @@ interface FallbackComponentProps extends FallbackProps { children?: ReactNode; } -function Fallback({ error, resetErrorBoundary, children }: FallbackComponentProps): JSX.Element { +function Fallback({ error, children }: FallbackComponentProps): JSX.Element { return (

Uh-oh!😔 Please pardon the mesh.