Feat/error boundaries (#2779)

* - Changed to objectNameSingular always defined
- Added ErrorCatchAll

* - Added mock mode for companies logged out
- Added a proper ErrorBoundary component

* Removed react-error-boundary

* Implemented proper ErrorBoundary

* Fixes

* Change strategy about mocks

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/error-handler/components/AppErrorBoundary.tsx

@@ -0,0 +1,19 @@
+import { ErrorInfo, ReactNode } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+
+import { GenericErrorFallback } from '@/error-handler/components/GenericErrorFallback';
+
+export const AppErrorBoundary = ({ children }: { children: ReactNode }) => {
+  const handleError = (_error: Error, _info: ErrorInfo) => {
+    // TODO: log error to Sentry
+  };
+
+  return (
+    <ErrorBoundary
+      FallbackComponent={GenericErrorFallback}
+      onError={handleError}
+    >
+      {children}
+    </ErrorBoundary>
+  );
+};

front/src/modules/error-handler/components/GenericErrorFallback.tsx

@@ -0,0 +1,26 @@
+import { FallbackProps } from 'react-error-boundary';
+
+type GenericErrorFallbackProps = FallbackProps;
+
+export const GenericErrorFallback = ({
+  error,
+  resetErrorBoundary,
+}: GenericErrorFallbackProps) => {
+  return (
+    <div
+      style={{
+        color: 'red',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '20px',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%',
+        height: '100%',
+      }}
+    >
+      <div>{error.message}</div>
+      <button onClick={() => resetErrorBoundary()}>Retry</button>
+    </div>
+  );
+};

front/src/modules/error-handler/components/PromiseRejectionEffect.tsx

@@ -0,0 +1,39 @@
+import React, { useCallback, useEffect } from 'react';
+
+import { ObjectMetadataItemNotFoundError } from '@/object-metadata/errors/ObjectMetadataNotFoundError';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+
+export const PromiseRejectionEffect = () => {
+  const { enqueueSnackBar } = useSnackBar();
+
+  const handlePromiseRejection = useCallback(
+    (event: PromiseRejectionEvent) => {
+      const error = event.reason;
+
+      // TODO: connect Sentry here
+      if (error instanceof ObjectMetadataItemNotFoundError) {
+        enqueueSnackBar(
+          `Error with custom object that cannot be found : ${event.reason}`,
+          {
+            variant: 'error',
+          },
+        );
+      } else {
+        enqueueSnackBar(`Error: ${event.reason}`, {
+          variant: 'error',
+        });
+      }
+    },
+    [enqueueSnackBar],
+  );
+
+  useEffect(() => {
+    window.addEventListener('unhandledrejection', handlePromiseRejection);
+
+    return () => {
+      window.removeEventListener('unhandledrejection', handlePromiseRejection);
+    };
+  }, [handlePromiseRejection]);
+
+  return <></>;
+};