From 3e60c0050cce2b64da54bf293b1751f0a01ebf67 Mon Sep 17 00:00:00 2001
From: Marie <51697796+ijreilly@users.noreply.github.com>
Date: Thu, 18 Apr 2024 10:42:30 +0200
Subject: [PATCH] [fix] Fix white screen when error handled by AppErrorBoundary
 (#5017)

[In a previous PR](https://github.com/twentyhq/twenty/pull/5008) I was
fixing dark mode by calling useTheme in AppErrorBoundary while there was
actually no parent ThemeProvider. This was causing a bug when an error
was actually intercepted by AppErrorBoundary because theme was empty.

Now I am providing the error theme in GenericErrorFallback, fallbacking
to THEME_LIGHT as it can be called from outside a ThemeProvider (as it
is the case today), but also reading into ThemeProvider in case we end
up using this component in a part of the application where it is
available, not to necessarily use THEME_LIGHT.

## How was it tested?
with @thaisguigon
Locally (dark mode works + error mode works (throwing an error in
RecoilDebugObserver))
---
 .../components/AppErrorBoundary.tsx           | 17 +++-----
 .../components/GenericErrorFallback.tsx       | 41 +++++++++++--------
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/packages/twenty-front/src/modules/error-handler/components/AppErrorBoundary.tsx b/packages/twenty-front/src/modules/error-handler/components/AppErrorBoundary.tsx
index 8f38b9e8e..ecd37e8e2 100644
--- a/packages/twenty-front/src/modules/error-handler/components/AppErrorBoundary.tsx
+++ b/packages/twenty-front/src/modules/error-handler/components/AppErrorBoundary.tsx
@@ -1,6 +1,5 @@
 import { ErrorInfo, ReactNode } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import { ThemeProvider, useTheme } from '@emotion/react';
 
 import { GenericErrorFallback } from '@/error-handler/components/GenericErrorFallback';
 
@@ -9,16 +8,12 @@ export const AppErrorBoundary = ({ children }: { children: ReactNode }) => {
     // TODO: log error to Sentry
   };
 
-  const theme = useTheme();
-
   return (
-    <ThemeProvider theme={theme}>
-      <ErrorBoundary
-        FallbackComponent={GenericErrorFallback}
-        onError={handleError}
-      >
-        {children}
-      </ErrorBoundary>
-    </ThemeProvider>
+    <ErrorBoundary
+      FallbackComponent={GenericErrorFallback}
+      onError={handleError}
+    >
+      {children}
+    </ErrorBoundary>
   );
 };
diff --git a/packages/twenty-front/src/modules/error-handler/components/GenericErrorFallback.tsx b/packages/twenty-front/src/modules/error-handler/components/GenericErrorFallback.tsx
index 73b9a64c6..87f840369 100644
--- a/packages/twenty-front/src/modules/error-handler/components/GenericErrorFallback.tsx
+++ b/packages/twenty-front/src/modules/error-handler/components/GenericErrorFallback.tsx
@@ -1,5 +1,7 @@
 import { FallbackProps } from 'react-error-boundary';
-import { IconRefresh } from 'twenty-ui';
+import { ThemeProvider, useTheme } from '@emotion/react';
+import isEmpty from 'lodash.isempty';
+import { IconRefresh, THEME_LIGHT } from 'twenty-ui';
 
 import { Button } from '@/ui/input/button/components/Button';
 import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
@@ -16,23 +18,26 @@ export const GenericErrorFallback = ({
   error,
   resetErrorBoundary,
 }: GenericErrorFallbackProps) => {
+  const theme = useTheme();
   return (
-    <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 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>
   );
 };