feat(): Update error boundaries components

Signed-off-by: yash sharma <[email protected]>

src/custom/ErrorBoundary/ErrorBoundary.tsx

@@ -25,7 +25,7 @@ interface FallbackComponentProps extends FallbackProps {
   children?: React.ReactNode;
 }
 
-function Fallback({ error, children }: FallbackComponentProps): JSX.Element {
+export function Fallback({ error, children }: FallbackComponentProps): JSX.Element {
   return (
     <div role="alert">
       <h2>Uh-oh!😔 Please pardon the mesh.</h2>
@@ -62,12 +62,13 @@ const reportError = (error: Error, info: React.ErrorInfo): void => {
 };
 
 interface ErrorBoundaryProps {
+  customFallback?: React.ComponentType<FallbackProps>;
   children: React.ReactNode;
 }
 
-export const ErrorBoundary: React.FC<ErrorBoundaryProps> = ({ children }) => {
+export const ErrorBoundary: React.FC<ErrorBoundaryProps> = ({ customFallback, children }) => {
   return (
-    <ReactErrorBoundary FallbackComponent={Fallback} onError={reportError}>
+    <ReactErrorBoundary FallbackComponent={customFallback ?? Fallback} onError={reportError}>
       {children}
     </ReactErrorBoundary>
   );
@@ -99,7 +100,7 @@ export const withSuppressedErrorBoundary: React.FC<WithSuppressedErrorBoundaryPr
   Component
 }: WithSuppressedErrorBoundaryProps): JSX.Element => {
   return (
-    <ReactErrorBoundary FallbackComponent={Fallback} onError={reportError}>
+    <ReactErrorBoundary FallbackComponent={() => null} onError={reportError}>
       <Component />
     </ReactErrorBoundary>
   );

src/custom/ErrorBoundary/README.md

@@ -0,0 +1,85 @@
+## Error Boundary Components
+
+### `ErrorBoundary`
+
+The `ErrorBoundary` component is designed to catch errors that occur within its child components and provide a customizable fallback UI when an error occurs.
+
+#### Usage
+
+Wrap your component with the `ErrorBoundary`:
+
+```tsx
+import { ErrorBoundary } from '@layer5/sistent';
+
+const MyComponent = () => {
+  // Your component logic
+
+  return <ErrorBoundary>{/* Your component JSX */}</ErrorBoundary>;
+};
+```
+
+##### Custom Fallback
+
+You can provide a custom fallback component to `ErrorBoundary`:
+
+```tsx
+const MyComponent = () => {
+  // Your component logic
+
+  return (
+    <ErrorBoundary customFallback={CustomFallbackComponent}>
+      {/* Your component JSX */}
+    </ErrorBoundary>
+  );
+};
+```
+
+### `withErrorBoundary`
+
+`withErrorBoundary` is a higher-order component (HOC) that simplifies wrapping a component with ErrorBoundary. It uses default fallback component. This can be useFul to wrap child components
+
+#### Usage
+
+Wrap your component using `withErrorBoundary`:
+
+```tsx
+import { withErrorBoundary } from '@layer5/sistent';
+
+const MyComponent = withErrorBoundary(() => {
+  return {
+    /* Your component JSX */
+  };
+});
+```
+
+### `withSuppressedErrorBoundary`
+
+`withSuppressedErrorBoundary` is another HOC that suppresses the error in browser's console instead of displaying fallback component to users, this can be useFull for errors that are not critical and can be avoided.
+
+#### Usage
+
+Wrap your component using withSuppressedErrorBoundary:
+
+```tsx
+import { withSuppressedErrorBoundary } from '@layer5/sistent';
+
+const MyComponent = withSuppressedErrorBoundary(() => {
+  return {
+    /* Your component JSX */
+  };
+});
+```
+
+### Handling Different Levels of Errors
+
+#### Critical Errors
+
+Critical errors typically originate from parent or root components and can potentially lead to the entire page crashing. In such cases, it is recommended to use the ErrorBoundary with either the default fallback component or a custom fallback component to ensure users receive assistance.
+
+#### Non-critical Errors
+
+Non-critical errors occur in child components and may not result in a page crash or hinder users from performing other operations. In these cases, displaying the error through a toaster notification or handling it as an event can be beneficial.
+
+#### Errors That Can Be Avoided
+
+In some scenarios, a child component might encounter an error that doesn't block users and doesn't require immediate attention. Such errors can be avoided and suppressed into the browser's console for debugging purposes. The `withSuppressedErrorBoundary` higher-order component (HOC) function can be useful in this scenario.

src/custom/ErrorBoundary/index.tsx

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

src/custom/index.tsx

@@ -5,7 +5,12 @@ import {
   CustomColumnVisibilityControlProps
 } from './CustomColumnVisibilityControl/CustomColumnVisibilityControl';
 import { EmptyState } from './EmptyState';
-import { ErrorBoundary, WithErrorBoundary, withSuppressedErrorBoundary } from './ErrorBoundary';
+import {
+  ErrorBoundary,
+  Fallback,
+  WithErrorBoundary,
+  withSuppressedErrorBoundary
+} from './ErrorBoundary';
 import { FlipCard } from './FlipCard';
 import { useWindowDimensions } from './Helpers/Dimension';
 import { useNotificationHandler } from './Helpers/Notification';
@@ -22,6 +27,7 @@ export {
   CustomColumnVisibilityControl,
   EmptyState,
   ErrorBoundary,
+  Fallback,
   FlipCard,
   PopperListener,
   ResponsiveDataTable,