back to default with just pageContainer

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

@@ -3,33 +3,8 @@ import { ErrorInfo, ReactNode } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 
 import { GenericErrorFallback } from '@/error-handler/components/GenericErrorFallback';
-import { RecordIndexErrorFallback } from '@/error-handler/components/RecordIndexErrorFallback';
-import { RecordShowErrorFallback } from '@/error-handler/components/RecordShowErrorFallback';
-import { SettingsErrorFallback } from '@/error-handler/components/SettingsErrorFallback';
-import { ErrorFallbackType } from '@/error-handler/utils/errorFallbackType';
 
-type AppErrorBoundaryProps = {
-  children: ReactNode;
-  errorFallbackType?: ErrorFallbackType;
-};
-
-const getFallbackComponent = (type: ErrorFallbackType) => {
-  switch (type) {
-    case ErrorFallbackType.Settings:
-      return SettingsErrorFallback;
-    case ErrorFallbackType.RecordShow:
-      return RecordShowErrorFallback;
-    case ErrorFallbackType.RecordIndex:
-      return RecordIndexErrorFallback;
-    default:
-      return GenericErrorFallback;
-  }
-};
-
-export const AppErrorBoundary = ({
-  children,
-  errorFallbackType = ErrorFallbackType.Default,
-}: AppErrorBoundaryProps) => {
+export const AppErrorBoundary = ({ children }: { children: ReactNode }) => {
   const handleError = (_error: Error, _info: ErrorInfo) => {
     Sentry.captureException(_error, (scope) => {
       scope.setExtras({ _info });
@@ -39,7 +14,7 @@ export const AppErrorBoundary = ({
 
   return (
     <ErrorBoundary
-      FallbackComponent={getFallbackComponent(errorFallbackType)}
+      FallbackComponent={GenericErrorFallback}
       onError={handleError}
     >
       {children}

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

@@ -1,5 +1,6 @@
-import { ThemeProvider, useTheme } from '@emotion/react';
-import isEmpty from 'lodash.isempty';
+import { PageBody } from '@/ui/layout/page/components/PageBody';
+import { PageContainer } from '@/ui/layout/page/components/PageContainer';
+import { PageHeader } from '@/ui/layout/page/components/PageHeader';
 import { useEffect, useState } from 'react';
 import { FallbackProps } from 'react-error-boundary';
 import { useLocation } from 'react-router-dom';
@@ -11,7 +12,6 @@ import {
   AnimatedPlaceholderEmptyTitle,
   Button,
   IconRefresh,
-  THEME_LIGHT,
 } from 'twenty-ui';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
@@ -31,27 +31,28 @@ export const GenericErrorFallback = ({
     }
   }, [previousLocation, location, resetErrorBoundary]);
 
-  const theme = useTheme();
-
   return (
-    <ThemeProvider theme={isEmpty(theme) ? THEME_LIGHT : theme}>
-      <AnimatedPlaceholderEmptyContainer>
-        <AnimatedPlaceholder type="errorIndex" />
-        <AnimatedPlaceholderEmptyTextContainer>
-          <AnimatedPlaceholderEmptyTitle>
-            Server’s on a coffee break
-          </AnimatedPlaceholderEmptyTitle>
-          <AnimatedPlaceholderEmptySubTitle>
-            {error.message}
-          </AnimatedPlaceholderEmptySubTitle>
-        </AnimatedPlaceholderEmptyTextContainer>
-        <Button
-          Icon={IconRefresh}
-          title="Reload"
-          variant={'secondary'}
-          onClick={() => resetErrorBoundary()}
-        />
-      </AnimatedPlaceholderEmptyContainer>
-    </ThemeProvider>
+    <PageContainer>
+      <PageHeader />
+      <PageBody>
+        <AnimatedPlaceholderEmptyContainer>
+          <AnimatedPlaceholder type="errorIndex" />
+          <AnimatedPlaceholderEmptyTextContainer>
+            <AnimatedPlaceholderEmptyTitle>
+              Server’s on a coffee break
+            </AnimatedPlaceholderEmptyTitle>
+            <AnimatedPlaceholderEmptySubTitle>
+              {error.message}
+            </AnimatedPlaceholderEmptySubTitle>
+          </AnimatedPlaceholderEmptyTextContainer>
+          <Button
+            Icon={IconRefresh}
+            title="Reload"
+            variant={'secondary'}
+            onClick={() => resetErrorBoundary()}
+          />
+        </AnimatedPlaceholderEmptyContainer>
+      </PageBody>
+    </PageContainer>
   );
 };