fix(errorboundary): revise error boundary

Signed-off-by: Sudhanshu Dasgupta <[email protected]>
layer5io · Oct 25, 2023 · 83d7018 · 83d7018
1 parent ceb5487
commit 83d7018
Showing 1 changed file with 77 additions and 73 deletions.
diff --git a/packages/components/src/custom/ErrorBoundary.tsx b/packages/components/src/custom/ErrorBoundary.tsx
@@ -1,80 +1,84 @@
-//Commenting out the below code because its having typescript issues with using type <any> as its violating the eslint rules and its failing workflow checks
+import { Button } from '@mui/material';
+import React, { type FC } from 'react';
+import {
+  ErrorBoundaryProps,
+  FallbackProps,
+  ErrorBoundary as ReactErrorBoundary
+} from 'react-error-boundary';
 
-// import { Button } from '@mui/material';
-// import React, { type FC } from 'react';
-// import {
-//   ErrorBoundaryProps,
-//   FallbackProps,
-//   ErrorBoundary as ReactErrorBoundary
-// } from 'react-error-boundary';
+const Fallback: React.ComponentType<FallbackProps> = ({ error, resetErrorBoundary }) => {
+  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>
+      </div>
+    );
+  }
+};
 
-// const Fallback: React.ComponentType<FallbackProps> = ({ error, resetErrorBoundary }) => {
-//   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>
-//       </div>
-//     );
-//   }
-// };
+const reportError = (error: Error, info: React.ErrorInfo) => {
+  // This is where you'd send the error to Sentry,etc
+  console.log('Error Caught Inside Boundary --reportError', error, 'Info', info);
+};
 
-// const reportError = (error: Error, info: React.ErrorInfo) => {
-//   // This is where you'd send the error to Sentry,etc
-//   console.log('Error Caught Inside Boundary --reportError', error, 'Info', info);
-// };
+export const ErrorBoundary: FC<ErrorBoundaryProps> = ({ children, ...props }) => {
+  return (
+    <ReactErrorBoundary FallbackComponent={Fallback} onError={reportError} {...props}>
+      {children}
+    </ReactErrorBoundary>
+  );
+};
+//
+export const withErrorBoundary = <P extends object>(
+  Component: React.ComponentType<P>,
+  errorHandlingProps: ErrorBoundaryProps | null
+) => {
+  const WrappedWithErrorBoundary: React.FC<P> = (props: P) => (
+    <ErrorBoundary {...(errorHandlingProps ? errorHandlingProps : {})}>
+      <Component {...props} />
+    </ErrorBoundary>
+  );
 
-// export const ErrorBoundary: FC<ErrorBoundaryProps> = ({ children, ...props }) => {
-//   return (
-//     <ReactErrorBoundary FallbackComponent={Fallback} onError={reportError} {...props}>
-//       {children}
-//     </ReactErrorBoundary>
-//   );
-// };
-// //
-// export const withErrorBoundary = (
-//   Component: FC<any>,
-//   errorHandlingProps: ErrorBoundaryProps | null
-// ) => {
-//   const WrappedWithErrorBoundary = (props: any) => (
-//     <ErrorBoundary {...(errorHandlingProps ? errorHandlingProps : {})}>
-//       <Component {...props} />
-//     </ErrorBoundary>
-//   );
+  return WrappedWithErrorBoundary;
+};
 
-//   return WrappedWithErrorBoundary;
-// };
+interface Props {
+  children: React.ReactNode;
+}
 
-// export const withSuppressedErrorBoundary = (Component: React.ComponentType<any>) => {
-//   const WrappedWithErrorBoundary = (props: any) => (
-//     <ErrorBoundary FallbackComponent={() => null}>
-//       <Component {...props} />
-//     </ErrorBoundary>
-//   );
+export const withSuppressedErrorBoundary = <P extends object>(
+  Component: React.ComponentType<P>
+) => {
+  const WrappedWithErrorBoundary: React.FC<P & Props> = (props: P & Props) => (
+    <ErrorBoundary FallbackComponent={() => null}>
+      <Component {...props} />
+    </ErrorBoundary>
+  );
 
-//   return WrappedWithErrorBoundary;
-// };
+  return WrappedWithErrorBoundary;
+};