MarieandGitHub
3e60c0050c
[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))
44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
import { FallbackProps } from 'react-error-boundary';
|
||
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';
|
||
import {
|
||
AnimatedPlaceholderEmptyContainer,
|
||
AnimatedPlaceholderEmptySubTitle,
|
||
AnimatedPlaceholderEmptyTextContainer,
|
||
AnimatedPlaceholderEmptyTitle,
|
||
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
|
||
|
||
type GenericErrorFallbackProps = FallbackProps;
|
||
|
||
export const GenericErrorFallback = ({
|
||
error,
|
||
resetErrorBoundary,
|
||
}: GenericErrorFallbackProps) => {
|
||
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>
|
||
);
|
||
};
|