[custom] Fix and Refactor react-error boundary

packages/components/package.json

@@ -27,7 +27,8 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@layer5/sistent-svg": "^0.14.2"
+    "@layer5/sistent-svg": "^0.14.2",
+    "react-error-boundary": "^4.0.11"
   },
   "devDependencies": {
     "@emotion/react": "^11.11.1",

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 <MuiLink {...props} />;
+}

packages/components/src/base/Link/index.tsx

@@ -0,0 +1 @@
+export { Link } from './Link';

packages/components/src/custom/ErrorBoundary/ErrorBoundary.tsx

@@ -1,88 +1,106 @@
-/*
-import {
-  ErrorBoundaryProps,
-  FallbackProps,
-  ErrorBoundary as ReactErrorBoundary
-} from 'react-error-boundary';
-import { Button } from '../../base/Button';
-import React from 'react';
+import { styled } from '@mui/system';
+import React, { ComponentType, ReactNode } from 'react';
+import { FallbackProps, ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary';
+import { Box } from '../../base/Box';
+import { Link } from '../../base/Link';
+import { Typography } from '../../base/Typography';
+import { BLACK, KEPPEL } from '../../theme/colors';
 
-function Fallback({ error, resetErrorBoundary }: FallbackProps): JSX.Element {
-  if (error instanceof Error) {
-    // Check if error is an instance of Error
-    return (
-      <div role="alert">
-        <h2>Uh-oh!😔 Please pardon the mesh.</h2>
-        <div
-          style={{
-            backgroundColor: '#1E2117',
-            color: '#FFFFFF',
-            padding: '.85rem',
-            borderRadius: '.2rem',
-            marginBlock: '.5rem'
-          }}
-        >
-          <code>{error.message}</code>
-        </div>
-        <Button color="primary" variant="contained" onClick={resetErrorBoundary}>
-          Try again
-        </Button>
-      </div>
-    );
-  } else {
-    // Handle the case where error is not an instance of Error
-    return (
-      <div role="alert">
-        <h2>Uh-oh!😔 An unknown error occurred.</h2>
-        <Button color="primary" variant="contained" onClick={resetErrorBoundary}>
-          Try again
-        </Button>
+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, children }: FallbackComponentProps): JSX.Element {
+  return (
+    <div role="alert">
+      <h2>Uh-oh!😔 Please pardon the mesh.</h2>
+      <div
+        style={{
+          backgroundColor: '#1E2117',
+          color: '#FFFFFF',
+          padding: '.85rem',
+          borderRadius: '.2rem',
+          marginBlock: '.5rem'
+        }}
+      >
+        <code>{(error as Error).message}</code>
       </div>
-    );
-  }
+      <ErrorMessage>
+        We apologize for the inconvenience. The issue may be on our end. If troubleshooting doesn't
+        work, please check out our support channels{' '}
+        <StyledLink href="https://discuss.layer5.io/" target="_blank" rel="noopener noreferrer">
+          Discuss Forum
+        </StyledLink>{' '}
+        {' or '}
+        <StyledLink href="https://slack.layer5.io/" target="_blank" rel="noopener noreferrer">
+          Slack
+        </StyledLink>
+      </ErrorMessage>
+      <Box>{children}</Box>
+    </div>
+  );
 }
 
-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<ErrorBoundaryProps> = ({ children }) => {
   return (
-    <ReactErrorBoundary FallbackComponent={Fallback} onError={reportError} {...props}>
+    <ReactErrorBoundary FallbackComponent={Fallback} onError={reportError}>
       {children}
     </ReactErrorBoundary>
   );
-}
-
-function withErrorBoundary<P extends object>(
-  Component: React.ComponentType<P>,
-  errorHandlingProps: ErrorBoundaryProps | null
-): JSX.Element {
-  const WrappedWithErrorBoundary = (props: P): JSX.Element => (
-    <ErrorBoundary {...(errorHandlingProps ? errorHandlingProps : {})}>
-      <Component {...props} />
-    </ErrorBoundary>
-  );
-
-  return WrappedWithErrorBoundary;
-}
+};
 
-interface Props {
-  children: React.ReactNode;
+interface WithErrorBoundaryProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Component: ComponentType<any>;
+  errorHandlingProps?: ErrorBoundaryProps;
 }
 
-function withSuppressedErrorBoundary<P extends object>(
-  Component: React.ComponentType<P>
-): JSX.Element {
-  const WrappedWithErrorBoundary = (props: P & Props): JSX.Element => (
-    <ErrorBoundary FallbackComponent={() => null}>
-      <Component {...props} />
+export const WithErrorBoundary: React.FC<WithErrorBoundaryProps> = ({
+  Component,
+  errorHandlingProps = { children: null }
+}: WithErrorBoundaryProps): JSX.Element => {
+  return (
+    <ErrorBoundary {...errorHandlingProps}>
+      <Component />
     </ErrorBoundary>
   );
+};
 
-  return WrappedWithErrorBoundary;
+interface WithSuppressedErrorBoundaryProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Component: ComponentType<any>;
 }
 
-export { ErrorBoundary, withErrorBoundary, withSuppressedErrorBoundary };
-*/
+export const withSuppressedErrorBoundary: React.FC<WithSuppressedErrorBoundaryProps> = ({
+  Component
+}: WithSuppressedErrorBoundaryProps): JSX.Element => {
+  return (
+    <ReactErrorBoundary FallbackComponent={Fallback} onError={reportError}>
+      <Component />
+    </ReactErrorBoundary>
+  );
+};

packages/components/src/custom/ErrorBoundary/index.tsx

@@ -1 +1 @@
-// export { ErrorBoundary, withErrorBoundary, withSuppressedErrorBoundary } from './ErrorBoundary';
+export { ErrorBoundary, WithErrorBoundary, withSuppressedErrorBoundary } from './ErrorBoundary';

yarn.lock

@@ -894,6 +894,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
     tsup: ^7.2.0
     typescript: ^5.0.2
   peerDependencies:
@@ -8347,6 +8348,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"